slider with map 'tooltip'

<html>
<head>
	<title>small map slider</title>
	<link href="jquery-ui-1.10.4.custom.min.css" rel="stylesheet">
	<script src="https://code.jquery.com/jquery-git2.js"></script>
	<script src="jquery-ui-1.10.4.custom.min.js"></script>
	<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<style type="text/css">
		body{
			font-family: sans-serif;
		}
		.bounds{
			margin:20%;
		}
		#map{
			display: inline-block;
			text-align: center; 
			position: relative;}

path{
			stroke-width:1; }

.yet-to-vote{
			fill:none;
			stroke:#666;
			stroke-width:0.1; }

.voted{
			fill:#666; 
			stroke:#666;}

.voting{
			fill:#FF2600; 
			stroke:#FF2600;}

.none{
			fill:none;
			stroke:none; }

</style>

</head>
<body>

<div class="bounds">
	<div id="slider"></div>
	<div id="map"></div>
</div>
</body>
<script type="text/javascript">

var currentDate = '2014-2-10';
var mapWidth = 200;
var mapHeight = 120;

var projection = d3.geo.albersUsa()
	.scale(220)
	.translate([mapWidth / 2, mapHeight / 2]);

var path = d3.geo.path()
	.projection(projection);

var dateFormat = d3.time.format("%B %e");

d3.json("map.geojson", function(error, map) {
	var dates_o = {};
	var ticker;
	map.features.forEach(function(d,i){
		if(!dates_o[d.properties.date]){
			dates_o[d.properties.date] = true;
		}
	});
	var dates = Object.keys(dates_o);
	var mapContainer = d3.select('#map');
	var title = mapContainer.append('p');
	var mapView = mapContainer.append('svg').attr({
	  		'width':mapWidth,
	  		'height':mapHeight
	  	});

var mapJoin = mapView.selectAll('path')
		.data(map.features);
	
	mapJoin.enter().append("path")
			.attr({
				"d":path
			});

var slider = $( "#slider" ).slider({
			range: false,
			step:1,
			min:0,
			max:(dates.length-1)
		});
	$sliderhandle = $('.ui-slider-handle');
	mapContainer.style('left', ($sliderhandle.position().left - mapWidth/2) )

slider.on( "slide", function(e,ui){
		update(new Date(dates[ui.value])); 
	});
	slider.on( "slidestart", function(e,ui){
		ticker = setInterval(moveMap,100)
	});

slider.on( "slidestop", function(e,ui){
		window.clearInterval(ticker);
	});

function moveMap(){
		var p = $sliderhandle.position().left;
		mapContainer.style('left', (p  - mapWidth/2) ) 
	}

update(new Date( dates[0] ));

});

</script>
</html>

Modified http://code.jquery.com/jquery-git2.js to a secure url

Modified http://d3js.org/d3.v3.min.js to a secure url

https://code.jquery.com/jquery-git2.js

https://d3js.org/d3.v3.min.js