oshoham · February 16, 2016 17:12
diff --git a/index.html b/index.html
 <!DOCTYPE HTML>
 <html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>U.S. Prison Population From 1978-2014</title>

    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <link href="main.css" rel="stylesheet" type="text/css">
    <script src="https://d3js.org/d3.v3.min.js" defer></script>
    <script src="http://d3js.org/queue.v1.min.js" defer></script>
    <script src="http://d3js.org/topojson.v1.min.js" defer></script>
    <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js" defer></script>
    <script type="text/javascript" src="index.js" defer></script>
  </head>
  <body>
    <h1 class="title">U.S. Prison Population From 1978-2014</h1>
  </body>
 </html>
diff --git a/index.js b/index.js
 function draw () {
  d3.select('#us-prison-population').remove();

  var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
  var height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

  var projection = d3.geo.albersUsa()
    .scale(width)
    .translate([width / 2 - width / 8, height / 2]);

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

  var svg = d3.select('body').append('svg')
    .attr('id', 'us-prison-population')
    .attr('width', width)
    .attr('height', height);

  var totalPrisonersByYearByState = d3.map();

  queue()
    .defer(d3.json, 'us.json')
    .defer(d3.csv, 'prison_population.csv', function (d) {
      if (!totalPrisonersByYearByState.has(d.year)) {
        totalPrisonersByYearByState.set(d.year, d3.map());
      }

      totalPrisonersByYearByState.get(d.year).set(d.state, d.total);
    })
    .await(ready);

  function ready (error, us) {
    if (error) {
      return console.error(error);
    }

    var initialYear = '1978';

    var tip = d3.tip()
      .attr('class', 'tip')
        .offset([-10, 0])
        .direction('n')
        .html(function (d) {
          return d.properties.name + '<br/>' + totalPrisonersByYearByState.get(initialYear).get(d.properties.code);
        });

    svg.call(tip);

    var domain = d3.extent(totalPrisonersByYearByState.get(initialYear).values());

    var quantize = d3.scale.quantize()
      .domain([domain[1], domain[0]])
      .range(d3.range(9).map(function(i) { return 'q' + i + '-9'; }));

    var states = svg.append('g')
      .attr('class', 'states')
      .selectAll('path')
        .data(topojson.feature(us, us.objects.states).features)
      .enter().append('path')
        .attr('class', function (d) { return 'state ' + quantize(totalPrisonersByYearByState.get(initialYear).get(d.properties.code)); })
        .attr('id', function (d) { return d.properties.code; })
        .attr('d', path)
        .on('mouseover', tip.show)
        .on('mouseout', tip.hide);

    var label = svg.append('text')
      .attr('class', 'year')
      .attr('text-anchor', 'end')
      .attr('y', height - 24)
      .attr('x', width - 24)
      .text(initialYear);

    // Add an overlay for the year label.
    var box = label.node().getBBox();
    var yearScale = d3.scale.linear()
      .domain(d3.extent(totalPrisonersByYearByState.keys()))
      .range([box.x + 10, box.x + box.width - 10])
      .clamp(true);

    var overlay = svg.append('rect')
      .attr('class', 'overlay')
      .attr('x', box.x)
      .attr('y', box.y)
      .attr('width', box.width)
      .attr('height', box.height)
      .on('mouseover', function () {
        svg.transition().duration(0);
        label.classed('active', true);
      })
      .on('mouseout', function () { label.classed('active', false); })
      .on('mousemove', onMouseOverYear)
      .on('touchmove', onMouseOverYear);

    function tweenYear() {
      var year = d3.interpolateNumber(1978, 2014);
      return function (t) { displayYear(Math.round(year(t)).toString()); };
    }

    function onMouseOverYear () {
      var year = Math.round(yearScale.invert(d3.mouse(this)[0])).toString();
      displayYear(year);
    }

    function displayYear (year) {
      label.text(year);
      states.attr('class', function (d) {
        return 'state ' + quantize(totalPrisonersByYearByState.get(year).get(d.properties.code));
      });
      tip.html(function (d) {
        return d.properties.name + '<br/>' + totalPrisonersByYearByState.get(year).get(d.properties.code);
      });
    }
    
    d3.select(window).on('resize', resize);

    function resize () {
      width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
      height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);

      svg
        .attr('width', width)
        .attr('height', height);

      projection = d3.geo.albersUsa()
        .scale(width)
        .translate([width / 2 - width / 8, height / 2]);

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

      states.attr('d', path);

      label
        .attr('y', height - 24)
        .attr('x', width - 24);

      box = label.node().getBBox();
      overlay
        .attr('x', box.x)
        .attr('y', box.y)
        .attr('width', box.width)
        .attr('height', box.height);

      yearScale.range([box.x + 10, box.x + box.width - 10]);
    }

    svg.transition()
      .duration(20000)
      .ease('linear')
      .tween('year', tweenYear);
  }
 }

 draw();
diff --git a/main.css b/main.css
 body {
  font-family: 'Open Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
 }

 path {
  stroke:white;
  stroke-width: 1px;
 }

 .title {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
 }

 .tip {
  line-height: 1.5;
  padding: 8px;
  background: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 0px;
  text-align: center;
 }

 .state {
  fill: #ddd;
  stroke: #fff;
  stroke-linejoin: round;
  stroke-linecap: round;
 }

 .state:hover {
  fill-opacity:0.5;
 }

 .q0-9 { fill: #fff7ec; }
 .q1-9 { fill: #fee8c8; }
 .q2-9 { fill: #fdd49e; }
 .q3-9 { fill: #fdbb84; }
 .q4-9 { fill: #fc8d59; }
 .q5-9 { fill: #ef6548; }
 .q6-9 { fill: #d7301f; }
 .q7-9 { fill: #b30000; }
 .q8-9 { fill: #7f0000; }

 .year {
  font: 500 196px "Helvetica Neue";
  font: 500 15vmax "Helvetica Neue";
  fill: #ddd;
 }

 .year.active {
  fill: #aaa;
 }

 .overlay {
  fill: none;
  pointer-events: all;
  cursor: ew-resize;
 }
diff --git a/prison_population.csv b/prison_population.csv
diff --git a/us.json b/us.json
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>U.S. Prison Population From 1978-2014</title>

	<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
	<link href="main.css" rel="stylesheet" type="text/css">
	<script src="https://d3js.org/d3.v3.min.js" defer></script>
	<script src="http://d3js.org/queue.v1.min.js" defer></script>
	<script src="http://d3js.org/topojson.v1.min.js" defer></script>
	<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js" defer></script>
	<script type="text/javascript" src="index.js" defer></script>
	</head>
	<body>
	<h1 class="title">U.S. Prison Population From 1978-2014</h1>
	</body>
	</html>
	function draw () {
	d3.select('#us-prison-population').remove();

	var width = Math.max(document.documentElement.clientWidth, window.innerWidth \|\| 0);
	var height = Math.max(document.documentElement.clientHeight, window.innerHeight \|\| 0);

	var projection = d3.geo.albersUsa()
	.scale(width)
	.translate([width / 2 - width / 8, height / 2]);

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

	var svg = d3.select('body').append('svg')
	.attr('id', 'us-prison-population')
	.attr('width', width)
	.attr('height', height);

	var totalPrisonersByYearByState = d3.map();

	queue()
	.defer(d3.json, 'us.json')
	.defer(d3.csv, 'prison_population.csv', function (d) {
	if (!totalPrisonersByYearByState.has(d.year)) {
	totalPrisonersByYearByState.set(d.year, d3.map());
	}

	totalPrisonersByYearByState.get(d.year).set(d.state, d.total);
	})
	.await(ready);

	function ready (error, us) {
	if (error) {
	return console.error(error);
	}

	var initialYear = '1978';

	var tip = d3.tip()
	.attr('class', 'tip')
	.offset([-10, 0])
	.direction('n')
	.html(function (d) {
	return d.properties.name + '<br/>' + totalPrisonersByYearByState.get(initialYear).get(d.properties.code);
	});

	svg.call(tip);

	var domain = d3.extent(totalPrisonersByYearByState.get(initialYear).values());

	var quantize = d3.scale.quantize()
	.domain([domain[1], domain[0]])
	.range(d3.range(9).map(function(i) { return 'q' + i + '-9'; }));

	var states = svg.append('g')
	.attr('class', 'states')
	.selectAll('path')
	.data(topojson.feature(us, us.objects.states).features)
	.enter().append('path')
	.attr('class', function (d) { return 'state ' + quantize(totalPrisonersByYearByState.get(initialYear).get(d.properties.code)); })
	.attr('id', function (d) { return d.properties.code; })
	.attr('d', path)
	.on('mouseover', tip.show)
	.on('mouseout', tip.hide);

	var label = svg.append('text')
	.attr('class', 'year')
	.attr('text-anchor', 'end')
	.attr('y', height - 24)
	.attr('x', width - 24)
	.text(initialYear);

	// Add an overlay for the year label.
	var box = label.node().getBBox();
	var yearScale = d3.scale.linear()
	.domain(d3.extent(totalPrisonersByYearByState.keys()))
	.range([box.x + 10, box.x + box.width - 10])
	.clamp(true);

	var overlay = svg.append('rect')
	.attr('class', 'overlay')
	.attr('x', box.x)
	.attr('y', box.y)
	.attr('width', box.width)
	.attr('height', box.height)
	.on('mouseover', function () {
	svg.transition().duration(0);
	label.classed('active', true);
	})
	.on('mouseout', function () { label.classed('active', false); })
	.on('mousemove', onMouseOverYear)
	.on('touchmove', onMouseOverYear);

	function tweenYear() {
	var year = d3.interpolateNumber(1978, 2014);
	return function (t) { displayYear(Math.round(year(t)).toString()); };
	}

	function onMouseOverYear () {
	var year = Math.round(yearScale.invert(d3.mouse(this)[0])).toString();
	displayYear(year);
	}

	function displayYear (year) {
	label.text(year);
	states.attr('class', function (d) {
	return 'state ' + quantize(totalPrisonersByYearByState.get(year).get(d.properties.code));
	});
	tip.html(function (d) {
	return d.properties.name + '<br/>' + totalPrisonersByYearByState.get(year).get(d.properties.code);
	});
	}

	d3.select(window).on('resize', resize);

	function resize () {
	width = Math.max(document.documentElement.clientWidth, window.innerWidth \|\| 0);
	height = Math.max(document.documentElement.clientHeight, window.innerHeight \|\| 0);

	svg
	.attr('width', width)
	.attr('height', height);

	projection = d3.geo.albersUsa()
	.scale(width)
	.translate([width / 2 - width / 8, height / 2]);

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

	states.attr('d', path);

	label
	.attr('y', height - 24)
	.attr('x', width - 24);

	box = label.node().getBBox();
	overlay
	.attr('x', box.x)
	.attr('y', box.y)
	.attr('width', box.width)
	.attr('height', box.height);

	yearScale.range([box.x + 10, box.x + box.width - 10]);
	}

	svg.transition()
	.duration(20000)
	.ease('linear')
	.tween('year', tweenYear);
	}
	}

	draw();
	body {
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	font-weight: 400;
	}

	path {
	stroke:white;
	stroke-width: 1px;
	}

	.title {
	position: absolute;
	top: 20px;
	left: 50%;
	transform: translateX(-50%);
	}

	.tip {
	line-height: 1.5;
	padding: 8px;
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	border-radius: 0px;
	text-align: center;
	}

	.state {
	fill: #ddd;
	stroke: #fff;
	stroke-linejoin: round;
	stroke-linecap: round;
	}

	.state:hover {
	fill-opacity:0.5;
	}

	.q0-9 { fill: #fff7ec; }
	.q1-9 { fill: #fee8c8; }
	.q2-9 { fill: #fdd49e; }
	.q3-9 { fill: #fdbb84; }
	.q4-9 { fill: #fc8d59; }
	.q5-9 { fill: #ef6548; }
	.q6-9 { fill: #d7301f; }
	.q7-9 { fill: #b30000; }
	.q8-9 { fill: #7f0000; }

	.year {
	font: 500 196px "Helvetica Neue";
	font: 500 15vmax "Helvetica Neue";
	fill: #ddd;
	}

	.year.active {
	fill: #aaa;
	}

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