lukemckinstry/redistricting-morpher

## redistricting-morpher
<!DOCTYPE html>
<meta charset="utf-8">
<style>

  path {
    stroke-width: 1px;
    stroke: #444;
  }

  text {
    font: bold 64px Libre Franklin, sans-serif;
    text-anchor: middle;
    text-transform: uppercase;
  }

</style>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script>

var width = 960,
    height = 500;

var colors = d3.scale.category20c().range();

d3.shuffle(colors);

var svg = d3.select("body").append("svg")
  .attr("width",width)
  .attr("height",height);

var projection = d3.geo.conicConformal()
  .parallels([34 + 20 / 60, 36 + 10 / 60])
  .rotate([79, -33 - 45 / 60])
  .scale(6102.002295938357)
  .translate([570.5880508434078,431.7927213940179]);

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

queue()
  .defer(d3.json,"gist/old.geojson")
  .defer(d3.json,"gist/new.geojson")
  .await(function(err,oldDistricts,newDistricts){

    var combined = oldDistricts.features.map(function(d,i){
      return [d,newDistricts.features[i]].map(path);
    });

    var districts = svg.selectAll("path")
      .data(combined)
      .enter()
      .append("path")
        .attr("d",next)
        .style("fill",function(d,i){
          return colors[i % 20];
        });

    var label = svg.append("text")
      .datum(["Old","New"])
      .text(next)
      .attr("x",300)
      .attr("y",400);

    morph();

    function morph() {

      districts.transition()
        .duration(3200)
        .attr("d",next)
        .each("end",function(d,i){

          if (i === combined.length - 1) {
            morph();
          }

        });

      label.transition()
        .duration(0)
        .delay(3200 / 2)
        .each("end",function(){
          label.text(next);
        });

    }

  });

function next(d) {
  return d.reverse()[1];
}

</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	path {
	stroke-width: 1px;
	stroke: #444;
	}

	text {
	font: bold 64px Libre Franklin, sans-serif;
	text-anchor: middle;
	text-transform: uppercase;
	}

	</style>
	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

	<script>

	var width = 960,
	height = 500;

	var colors = d3.scale.category20c().range();

	d3.shuffle(colors);

	var svg = d3.select("body").append("svg")
	.attr("width",width)
	.attr("height",height);

	var projection = d3.geo.conicConformal()
	.parallels([34 + 20 / 60, 36 + 10 / 60])
	.rotate([79, -33 - 45 / 60])
	.scale(6102.002295938357)
	.translate([570.5880508434078,431.7927213940179]);

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

	queue()
	.defer(d3.json,"gist/old.geojson")
	.defer(d3.json,"gist/new.geojson")
	.await(function(err,oldDistricts,newDistricts){

	var combined = oldDistricts.features.map(function(d,i){
	return [d,newDistricts.features[i]].map(path);
	});

	var districts = svg.selectAll("path")
	.data(combined)
	.enter()
	.append("path")
	.attr("d",next)
	.style("fill",function(d,i){
	return colors[i % 20];
	});

	var label = svg.append("text")
	.datum(["Old","New"])
	.text(next)
	.attr("x",300)
	.attr("y",400);

	morph();

	function morph() {

	districts.transition()
	.duration(3200)
	.attr("d",next)
	.each("end",function(d,i){

	if (i === combined.length - 1) {
	morph();
	}

	});

	label.transition()
	.duration(0)
	.delay(3200 / 2)
	.each("end",function(){
	label.text(next);
	});

	}

	});

	function next(d) {
	return d.reverse()[1];
	}

	</script>