block by michalskop 5679400

109th US Congress

Full Screen

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>US 109th Congress</title>
	<link rel="stylesheet" href="//code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
	<script src="//code.jquery.com/jquery-1.8.2.min.js"></script>
	<script src="//code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
	<script src="//d3js.org/d3.v2.js?2.8.1"></script>
	<link href="chart.css" rel="stylesheet" type="text/css" />
	
	<style>
	  
	  /* **for future */
		#chart {
		  height: 406px;
		}
	  
	</style>

	<!-- js parameters -->
	<script>
	  
	  /*from //stackoverflow.com/questions/2177548/load-json-into-variable */
	  var parameters = (function () {
		var parameters = null;
		$.ajax({
		    'async': false,
		    'global': false,
		    'url': "parameters.json",
		    'dataType': "json",
		    'success': function (data) {
		        parameters = data;
		    }
		});
		return parameters;
	  })();
	  
	</script>

</head>
<body>
	<div data-role="page" id="mpage" class="type-home">
		<div data-role="content">


			<h1>US 109th Congress</h1>

			<div class="chart-content">
				<div class="main-column">
					<p id="chart"><svg><defs id="gradients"></defs></svg></p>
					
					<div id="slider-play">
						<form id="slider-form">
							<!--<label for="slider">Slider:</label>-->
							<input name="slider" id="slider" min="2005.25" max="2006.75" value="2005.25" step=".01" type="range" />
						</form>
						<p id="play-button">
							<a href="#" id="play" data-role="button" data-inline="true" data-icon="refresh" data-mini="true"><span id="playText">Play ></span></a>
						</p>
					</div> <!-- /slider-play -->
				</div>
				<div class="additional-column">
					<form>
						<fieldset data-role="controlgroup" data-mini="true">
							<legend>Highlight:</legend>
							 
							  <input class="checkbox-mp" name="checkbox-h-1" id="checkbox-h-1" type="checkbox">
							  <label for="checkbox-h-1">BUSH</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-2" id="checkbox-h-2" type="checkbox">
							  <label for="checkbox-h-2">SESSIONS</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-3" id="checkbox-h-3" type="checkbox">
							  <label for="checkbox-h-3">SHELBY</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-4" id="checkbox-h-4" type="checkbox">
							  <label for="checkbox-h-4">MURKOWSKI</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-5" id="checkbox-h-5" type="checkbox">
							  <label for="checkbox-h-5">STEVENS</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-6" id="checkbox-h-6" type="checkbox">
							  <label for="checkbox-h-6">KYL</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-7" id="checkbox-h-7" type="checkbox">
							  <label for="checkbox-h-7">MCCAIN</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-8" id="checkbox-h-8" type="checkbox">
							  <label for="checkbox-h-8">PRYOR</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-9" id="checkbox-h-9" type="checkbox">
							  <label for="checkbox-h-9">LINCOLN</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-10" id="checkbox-h-10" type="checkbox">
							  <label for="checkbox-h-10">BOXER</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-11" id="checkbox-h-11" type="checkbox">
							  <label for="checkbox-h-11">FEINSTEIN</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-12" id="checkbox-h-12" type="checkbox">
							  <label for="checkbox-h-12">ALLARD</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-13" id="checkbox-h-13" type="checkbox">
							  <label for="checkbox-h-13">SALAZAR</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-14" id="checkbox-h-14" type="checkbox">
							  <label for="checkbox-h-14">DODD</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-15" id="checkbox-h-15" type="checkbox">
							  <label for="checkbox-h-15">LIEBERMAN</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-16" id="checkbox-h-16" type="checkbox">
							  <label for="checkbox-h-16">BIDEN</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-17" id="checkbox-h-17" type="checkbox">
							  <label for="checkbox-h-17">CARPER</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-18" id="checkbox-h-18" type="checkbox">
							  <label for="checkbox-h-18">MARTINEZ</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-19" id="checkbox-h-19" type="checkbox">
							  <label for="checkbox-h-19">NELSON</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-20" id="checkbox-h-20" type="checkbox">
							  <label for="checkbox-h-20">CHAMBLISS</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-21" id="checkbox-h-21" type="checkbox">
							  <label for="checkbox-h-21">ISAKSON</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-22" id="checkbox-h-22" type="checkbox">
							  <label for="checkbox-h-22">AKAKA</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-23" id="checkbox-h-23" type="checkbox">
							  <label for="checkbox-h-23">INOUYE</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-24" id="checkbox-h-24" type="checkbox">
							  <label for="checkbox-h-24">CRAIG</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-25" id="checkbox-h-25" type="checkbox">
							  <label for="checkbox-h-25">CRAPO</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-26" id="checkbox-h-26" type="checkbox">
							  <label for="checkbox-h-26">DURBIN</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-27" id="checkbox-h-27" type="checkbox">
							  <label for="checkbox-h-27">OBAMA</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-28" id="checkbox-h-28" type="checkbox">
							  <label for="checkbox-h-28">BAYH</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-29" id="checkbox-h-29" type="checkbox">
							  <label for="checkbox-h-29">LUGAR</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-30" id="checkbox-h-30" type="checkbox">
							  <label for="checkbox-h-30">GRASSLEY</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-31" id="checkbox-h-31" type="checkbox">
							  <label for="checkbox-h-31">HARKIN</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-32" id="checkbox-h-32" type="checkbox">
							  <label for="checkbox-h-32">BROWNBACK</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-33" id="checkbox-h-33" type="checkbox">
							  <label for="checkbox-h-33">ROBERTS</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-34" id="checkbox-h-34" type="checkbox">
							  <label for="checkbox-h-34">BUNNING</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-35" id="checkbox-h-35" type="checkbox">
							  <label for="checkbox-h-35">MCCONNELL</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-36" id="checkbox-h-36" type="checkbox">
							  <label for="checkbox-h-36">VITTER</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-37" id="checkbox-h-37" type="checkbox">
							  <label for="checkbox-h-37">LANDRIEU</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-38" id="checkbox-h-38" type="checkbox">
							  <label for="checkbox-h-38">COLLINS</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-39" id="checkbox-h-39" type="checkbox">
							  <label for="checkbox-h-39">SNOWE</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-40" id="checkbox-h-40" type="checkbox">
							  <label for="checkbox-h-40">MIKULSKI</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-41" id="checkbox-h-41" type="checkbox">
							  <label for="checkbox-h-41">SARBANES</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-42" id="checkbox-h-42" type="checkbox">
							  <label for="checkbox-h-42">KENNEDYED</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-43" id="checkbox-h-43" type="checkbox">
							  <label for="checkbox-h-43">KERRYJOHN</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-44" id="checkbox-h-44" type="checkbox">
							  <label for="checkbox-h-44">STABENOW</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-45" id="checkbox-h-45" type="checkbox">
							  <label for="checkbox-h-45">LEVINCARL</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-46" id="checkbox-h-46" type="checkbox">
							  <label for="checkbox-h-46">DAYTON</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-47" id="checkbox-h-47" type="checkbox">
							  <label for="checkbox-h-47">COLEMAN</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-48" id="checkbox-h-48" type="checkbox">
							  <label for="checkbox-h-48">COCHRAN</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-49" id="checkbox-h-49" type="checkbox">
							  <label for="checkbox-h-49">LOTT</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-50" id="checkbox-h-50" type="checkbox">
							  <label for="checkbox-h-50">TALENT</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-51" id="checkbox-h-51" type="checkbox">
							  <label for="checkbox-h-51">BOND</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-52" id="checkbox-h-52" type="checkbox">
							  <label for="checkbox-h-52">BAUCUS</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-53" id="checkbox-h-53" type="checkbox">
							  <label for="checkbox-h-53">BURNS</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-54" id="checkbox-h-54" type="checkbox">
							  <label for="checkbox-h-54">HAGEL</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-55" id="checkbox-h-55" type="checkbox">
							  <label for="checkbox-h-55">NELSONBEN</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-56" id="checkbox-h-56" type="checkbox">
							  <label for="checkbox-h-56">ENSIGN</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-57" id="checkbox-h-57" type="checkbox">
							  <label for="checkbox-h-57">REID</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-58" id="checkbox-h-58" type="checkbox">
							  <label for="checkbox-h-58">GREGG</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-59" id="checkbox-h-59" type="checkbox">
							  <label for="checkbox-h-59">SUNUNU</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-60" id="checkbox-h-60" type="checkbox">
							  <label for="checkbox-h-60">CORZINE</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-61" id="checkbox-h-61" type="checkbox">
							  <label for="checkbox-h-61">MENENDEZ</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-62" id="checkbox-h-62" type="checkbox">
							  <label for="checkbox-h-62">LAUTENBERG</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-63" id="checkbox-h-63" type="checkbox">
							  <label for="checkbox-h-63">BINGAMAN</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-64" id="checkbox-h-64" type="checkbox">
							  <label for="checkbox-h-64">DOMENICI</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-65" id="checkbox-h-65" type="checkbox">
							  <label for="checkbox-h-65">CLINTON</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-66" id="checkbox-h-66" type="checkbox">
							  <label for="checkbox-h-66">SCHUMER</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-67" id="checkbox-h-67" type="checkbox">
							  <label for="checkbox-h-67">BURR</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-68" id="checkbox-h-68" type="checkbox">
							  <label for="checkbox-h-68">DOLE</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-69" id="checkbox-h-69" type="checkbox">
							  <label for="checkbox-h-69">CONRAD</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-70" id="checkbox-h-70" type="checkbox">
							  <label for="checkbox-h-70">DORGAN</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-71" id="checkbox-h-71" type="checkbox">
							  <label for="checkbox-h-71">DEWINE</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-72" id="checkbox-h-72" type="checkbox">
							  <label for="checkbox-h-72">VOINOVICH</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-73" id="checkbox-h-73" type="checkbox">
							  <label for="checkbox-h-73">INHOFE</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-74" id="checkbox-h-74" type="checkbox">
							  <label for="checkbox-h-74">COBURN</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-75" id="checkbox-h-75" type="checkbox">
							  <label for="checkbox-h-75">SMITHGORD</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-76" id="checkbox-h-76" type="checkbox">
							  <label for="checkbox-h-76">WYDEN</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-77" id="checkbox-h-77" type="checkbox">
							  <label for="checkbox-h-77">SANTORUM</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-78" id="checkbox-h-78" type="checkbox">
							  <label for="checkbox-h-78">SPECTER</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-79" id="checkbox-h-79" type="checkbox">
							  <label for="checkbox-h-79">CHAFEE</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-80" id="checkbox-h-80" type="checkbox">
							  <label for="checkbox-h-80">REED</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-81" id="checkbox-h-81" type="checkbox">
							  <label for="checkbox-h-81">DEMINT</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-82" id="checkbox-h-82" type="checkbox">
							  <label for="checkbox-h-82">GRAHAM</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-83" id="checkbox-h-83" type="checkbox">
							  <label for="checkbox-h-83">THUNE</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-84" id="checkbox-h-84" type="checkbox">
							  <label for="checkbox-h-84">JOHNSON</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-85" id="checkbox-h-85" type="checkbox">
							  <label for="checkbox-h-85">FRIST</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-86" id="checkbox-h-86" type="checkbox">
							  <label for="checkbox-h-86">ALEXANDER</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-87" id="checkbox-h-87" type="checkbox">
							  <label for="checkbox-h-87">CORNYN</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-88" id="checkbox-h-88" type="checkbox">
							  <label for="checkbox-h-88">HUTCHISON</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-89" id="checkbox-h-89" type="checkbox">
							  <label for="checkbox-h-89">BENNETT</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-90" id="checkbox-h-90" type="checkbox">
							  <label for="checkbox-h-90">HATCH</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-91" id="checkbox-h-91" type="checkbox">
							  <label for="checkbox-h-91">JEFFORDS</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-92" id="checkbox-h-92" type="checkbox">
							  <label for="checkbox-h-92">LEAHY</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-93" id="checkbox-h-93" type="checkbox">
							  <label for="checkbox-h-93">ALLEN</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-94" id="checkbox-h-94" type="checkbox">
							  <label for="checkbox-h-94">WARNER</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-95" id="checkbox-h-95" type="checkbox">
							  <label for="checkbox-h-95">CANTWELL</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-96" id="checkbox-h-96" type="checkbox">
							  <label for="checkbox-h-96">MURRAY</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-97" id="checkbox-h-97" type="checkbox">
							  <label for="checkbox-h-97">BYRDROBER</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-98" id="checkbox-h-98" type="checkbox">
							  <label for="checkbox-h-98">ROCKEFELLER</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-99" id="checkbox-h-99" type="checkbox">
							  <label for="checkbox-h-99">FEINGOLD</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-100" id="checkbox-h-100" type="checkbox">
							  <label for="checkbox-h-100">KOHL</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-101" id="checkbox-h-101" type="checkbox">
							  <label for="checkbox-h-101">ENZI</label>
							 
							  <input class="checkbox-mp" name="checkbox-h-102" id="checkbox-h-102" type="checkbox">
							  <label for="checkbox-h-102">THOMAS</label>
													</fieldset>
					</form>
				</div>  <!-- /additional-column -->
			</div>  <!-- /chart-content -->

			
			<div class="description">
			</div>


		<script src="motion.js"></script>
		<p>Method: weighted PCA; Time intervals: approx. 6 months (projection of approx. 6-month blocks into all data, time is only approximated in this example)</p>
<p>Using <a href="https://github.com/michalskop/mpv_motion">Models of parliamentary voting in motion</a></p>

		</div> <!-- /content -->
		

	</div><!-- /page -->
</body>
</html>

chart.css


/*based on http://bost.ocks.org/mike/nations/ */
#chart {
  margin-left: -40px;
}

text {
  font: 10px sans-serif;
}

/*dots*/
.dot {
  stroke: #000;
  opacity: .5;
  stroke-opacity: .75;
}

.highlighted {
  stroke: #000;
  stroke-opacity: 1;
  stroke-width: 3;
  opacity: 1;
}

/*axes*/
.axis path, .axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.label {
  fill: #777;
}

/*year*/
.year.label {
  font: 500 100px "Helvetica Neue";
  fill: #ddd;
}

.year.label.active {
  fill: #aaa;
}

.overlay {
  fill: none;
  pointer-events: all;
  cursor: ew-resize;
}

/*layout of chart and checkboxes of mps*/
.chart-content {
    min-height: 460px;
}
.additional-column {
  max-height: 460px;
  /* from http://stackoverflow.com/questions/5715705/always-show-vertical-scrollbar-in-select */
  overflow-x: hidden;
}
#slider-form {
  width:80%;
  float:right;
}
  
/*computer*/
@media all and (min-width: 770px){
  .additional-column {
		text-align: right;
		float: right;
		width: 25%;
		background: none;
	}
 .main-column {
		width: 70%;
		float: left;
		margin-top: 30px;
		margin-right: 1%;
		padding-right: 1%;
	}
}


/*tooltips*/
/* http://www.d3noob.org/2013/01/adding-tooltips-to-d3js-graph.html */
/* alternative, was not able to use it: bl.ocks.org/ilyabo/1373263 */
div.tooltip {   
  position: absolute;           
  text-align: center;           
  width: 10em;                  
  height: 2.5em;                 
  padding: 2px;             
  font: .8em sans-serif;        
  background: lightsteelblue;   
  border: 0px;      
  border-radius: 8px;           
  pointer-events: none;         
}

motion.js

// Various accessors that specify the four dimensions of data to visualize.
function x(d) { return d.d1; }
function y(d) { return d.d2; }
function z(d) { return d.d3; }
function radius(d) { 
  /*if (("#"+d.id).length > 0) {
  	return 2;
  } else */
    return 1; 
}
function color(d) { return d.color; }
function mid(d) { return d.id; }
function key(d) { return d.id; }
function display(d) { return d.display;}
function mname(d) {return d.name;}


// Chart dimensions.
var margin = {top: 19.5, right: 19.5, bottom: 19.5, left: 39.5},
    width = parameters.width - margin.right,
    height = parameters.height - margin.top - margin.bottom;

// Various scales. These domains make assumptions of data, naturally.
var xScale = d3.scale.linear().domain([parameters.xscale[0], parameters.xscale[1]]).range([0, width]),
    yScale = d3.scale.linear().domain([parameters.yscale[0], parameters.yscale[1]]).range([height, 0]),
    radiusScale = d3.scale.sqrt().domain([0, 1]).range([0, 10]);
    //colorScale = d3.scale.category10();
    var colorScale = d3.scale.category20c();

// The x & y axes.
var xAxis = d3.svg.axis().orient("bottom").scale(xScale).ticks(12, d3.format(",d")),
    yAxis = d3.svg.axis().scale(yScale).orient("left");

// Create the SVG container and set the origin.
var svg = d3.select("#chart svg") //d3.select("#chart").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// Add the x-axis.
svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

// Add the y-axis.
svg.append("g")
    .attr("class", "y axis")
    .call(yAxis);

// Add an x-axis label.
svg.append("text")
    .attr("class", "x label")
    .attr("text-anchor", "end")
    .attr("x", width)
    .attr("y", height - 6)
    .text("Dimension 1");

// Add a y-axis label.
svg.append("text")
    .attr("class", "y label")
    .attr("text-anchor", "end")
    .attr("y", 6)
    .attr("dy", ".75em")
    .attr("transform", "rotate(-90)")
    .text("Dimension 2");

// Add the year label; the value is set on transition.
tmp_month = Math.ceil((parameters.start - Math.floor(parameters.start))*12);
tmp_year = Math.floor(parameters.start) + '/' + tmp_month;
var label = svg.append("text")
    .attr("class", "year label")
    .attr("text-anchor", "end")
    .attr("y", height - 24)
    .attr("x", width)
    .text(tmp_year);
    
var formatTime = d3.time.format("%e %B");

var div = d3.select("body").append("div")   
    .attr("class", "tooltip")               
    .style("opacity", 0);
    


// Load the data.
d3.json(parameters.data, function(nations) {

  // A bisector since many nation's data is sparsely-defined.
  var bisect = d3.bisector(function(d) { return d[0]; });

  // Add a dot per nation. Initialize the data at 1800, and set the colors.
  var dot = svg.append("g")
      .attr("class", "dots")
    .selectAll(".dot")
      .data(interpolateData(parameters.start))	//here we set up the dots at the beggining
    .enter().append("circle")
      .attr("class", "dot")
      //.attr("id",function(d) {return "dot-"+key(d)})	//wrong!, shall be in position() and interpolateData
      .call(position)
      .call(checkCheckboxes)
      .sort(order)
      .on("mouseover", showTooltip)                
      .on("mouseout", hideTooltip)
      .on("mousedown", switchHighlight);

  /*FF keeps the checkboxes on reload, so we need to check them at the beginning*/
  function checkCheckboxes() {
	  $(".checkbox-mp").each(function(i) {
		a = $(this).attr('id').split('-');
		id = a[a.length-1];
		if ($('#checkbox-h-'+id).prop('checked'))
		   highlight($('#dot-'+id));
	  });
  }    
  
  //switch highligth
  function switchHighlight(d) {
    a = d.id.split('-');
	id = a[a.length-1];
    if ($('#'+d.id).attr("class") == 'dot') {
       highlight($('#'+d.id));
       $("input#checkbox-h-"+id).attr("checked",true).checkboxradio("refresh");
    } else {
      dehighlight($('#'+d.id));
      $("input#checkbox-h-"+id).attr("checked",false).checkboxradio("refresh");
    } 
  }
    
  // show/hide tooltip      
  function showTooltip(d) {      
            div.transition()        
                .duration(200)      
                .style("opacity", .9);      
            div .html(d.name + "<br/>" + d.group)  
                .style("left", (d3.event.pageX) + "px")     
                .style("top", (d3.event.pageY - 28) + "px");
  }

  function hideTooltip(d) {      
            div.transition()        
                .duration(500)      
                .style("opacity", 0)
  }



  var i=0;
  var playing = false;
  $("#play").click(function() {
	  if(playing === false) {
		    startPlaying();
		} else {
			stopPlaying();
		}

  });
  
  function startPlaying() {
  	playing = true;
    $("#playText").html("Stop ||");
    $('#slider').slider('disable');
    // Start a transition that interpolates the data based on year.
    svg.transition()
	  .duration(30000*(parameters.untilchart-parseFloat($('#slider').val()))/(parameters.untilchart-parameters.sincechart+0.0001))
	  .ease("linear")
	  .tween("year", function() {return tweenYear($('#slider').val()) })
	  .each("end", stopPlaying);
  }
  
  function stopPlaying() {
	playing = false;
    $("#playText").html("Play >");
    svg.transition().duration(0);
    $('#slider').slider('enable');
  }


  // Positions the dots based on data.
  function position(dot) {
    dot .attr("cx", function(d) { return xScale(x(d)); })
        .attr("cy", function(d) { return yScale(y(d)); })
        .attr("r", function(d) { return radiusScale(radius(d)) })
        .attr("id", function(d) {return mid(d);})
        .style("fill", function (d) { return gradient(color(d)) })
		.attr("display", function (d) { return display(d);})
		.attr("title", function (d) {return mname(d);});
  }

  // Defines a sort order so that the smallest dots are drawn on top.
  function order(a, b) {
    return radius(b) - radius(a);
  }

  // Tweens the entire chart by first tweening the year, and then the data.
  // For the interpolated data, the dots and label are redrawn.
  function tweenYear(start) {
    //if ((parseFloat(start)+0.01) >= parameters.untilchart) start=parameters.sincechart;
    var year = d3.interpolateNumber(parseFloat(start),parameters.untilchart);
    return function(t) { displayYear(year(t)); };
  }
  
  // Updates the display to show the specified year.
  function displayYear(year) {
    dot.data(interpolateData(year), key).call(position).sort(order);
    month = Math.ceil((year - Math.floor(year))*12);
    label.text(Math.floor(year) + '/' + month);
    i++;
    if ((i%25) == 0) {	//to prevent jumping and for speed of animation -> "25"
      $("#slider").val(year);
      $('#slider').slider('refresh');
    }
  }

  // Interpolates the dataset for the given (fractional) year.
  function interpolateData(year) {
    return nations.map(function(d) {
      return {
        name: d.name,
        id: "dot-"+d.id,
        d1: interpolateValues(d.d1, year),
        d2: interpolateValues(d.d2, year),
        color: findColor(d.color, year, true),
        display: isDisplayed(d.d1, year),
        title: d.name,
        group: findColor(d.color, year, false)
      };
    });
  }

  // Finds (and possibly interpolates) the value for the specified year.
  function interpolateValues(values, year) {
    var i = bisect.left(values, year, 0, values.length - 1),
        a = values[i];
    if (i > 0) {
      var b = values[i - 1],
          t = (year - a[0]) / (b[0] - a[0]);
      return a[1] * (1 - t) + b[1] * t;
    }
    return a[1];
  }
  
  function findColor(values, year, color) {
     var i = bisect.left(values, year, 0, values.length - 1);
     if (color)
       return values[i][2];
     else
       return values[i][1];
  }
  
  function isDisplayed(values, year) {
     if ( (year < values[0][0]) || (year > values[values.length - 1][0]))
       return 'none';
     else 
       return 'inherit';
  }
	
	function highlight(d) {
	  d.attr("class","dot highlighted");
	  //d.addClass("highlight"); we cannot use this, because http://bugs.jquery.com/ticket/10329
	}
	
	function dehighlight(d) {
	  d.attr('class','dot');
	  //d.removeClass("highlight"); we cannot use this, because http://bugs.jquery.com/ticket/10329
	}


	//checkboxes
	$('.checkbox-mp').click (function () {
	  var thisCheck = $(this);
	  a = $(this).attr('id').split('-');
	  id = a[a.length-1];
	  if (thisCheck.is (':checked')) {
		highlight($("#dot-"+id));
	  } else {
	    dehighlight($("#dot-"+id));
	  }
	});

	
	//slider
	//see http://michalskop.tumblr.com/post/37352195911/strange-behaviour-of-jquery-change
	$('#slider').ready(function() {
	  $('#slider').change(function(){
		displayYear($(this).val());
	  });
	});
	


	
	//color gradients
	//http://dexvis.wordpress.com/2012/12/25/motion-charts-revisited/
	function shadeColor(color, percent) {

		var R = parseInt(color.substring(1,3),16)
		var G = parseInt(color.substring(3,5),16)
		var B = parseInt(color.substring(5,7),16);

		R = parseInt(R * (100 + percent) / 100);
		G = parseInt(G * (100 + percent) / 100);
		B = parseInt(B * (100 + percent) / 100);

		R = (R<255)?R:255;  
		G = (G<255)?G:255;  
		B = (B<255)?B:255;  

		var RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16));
		var GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16));
		var BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16));

		return "#"+RR+GG+BB;
	}

	function gradient(baseColor)
	{
	  var gradientId = "gradient" + baseColor.substring(1)
	  console.log("COLOR: " + gradientId);

	  //var lightColor = shadeColor(baseColor, -10)
	  var darkColor = shadeColor(baseColor, -20) 
	  
	  var grad = d3.select("#gradients").selectAll("#" + gradientId)
		.data([ gradientId ])
		.enter()
		.append("radialGradient")
		.attr("id", gradientId)
		.attr("gradientUnits", "objectBoundingBox")
		.attr("fx", "30%")
		.attr("fy", "30%")

	  grad.append("stop")
		.attr("offset", "0%")
		.attr("style", "stop-color:#FFFFFF")
	  
	  // Middle
	  grad.append("stop")
		.attr("offset", "40%")
		.attr("style", "stop-color:" + baseColor)

	  // Outer Edges
	  grad.append("stop")
		.attr("offset", "100%")
		.attr("style", "stop-color:" + darkColor)
	  
	  console.log("url(#" + gradientId + ")")
	  return "url(#" + gradientId + ")";
	}
	
});

parameters.json

{"width":600,
"height":400,
"xscale":[-20,20],
"yscale":[-10,10],
"data":"us_congress_109_1h.json",
"start":2005.25,
"sincechart":2005.25,
"untilchart":2006.75
}