Small multiple maps

<html>
<head>
	<title>small multiple maps</title>
	<style type="text/css">
		body{
			font-family: sans-serif;
		}
		.map{
			display: inline-block;
			text-align: center; }

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>
	<script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<div id="maps"></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 = {};
  map.features.forEach(function(d,i){
  	if(!dates_o[d.properties.date]){
  		dates_o[d.properties.date] = true;
  	}
  });
  var dates = Object.keys(dates_o);
  console.log(dates);
  //draw a map for each date
  var dateJoin = d3.select('#maps').selectAll('div.map')
  	.data(dates);

var divs = dateJoin.enter()
  	.append('div').attr({
  		'id':function(d){ return 'map_'+d; },
  		'class':'map'
  	})

divs.append('p').text(function(d){ return dateFormat(new Date(d)); })

var SVGs = divs.append('svg').attr({
  		'width':mapWidth,
  		'height':mapHeight
  	});

SVGs.each(function(date){
  		d3.select(this).selectAll('path')
			.data(map.features)
			.enter().append("path")
				.attr({
					"d":path,
					"id":function(d){
						return d.properties.name + date;
					}
				});
	});

update();

});

</script>

</html>

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

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