US Nuclear Generating Capacity Map

README.md

US Nuclear Generating Capacity Map

This Github repository all relevant code used to create an interactive map of US nuclear generating capacity. See the full blog post describing the map here.

chroniton.css

.chroniton {
  font: 10px sans-serif;
  outline:none;
}
.chroniton .play-button {
  fill:#444;
}
.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}
.x.axis, .slider text {
  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:none;
}
.x.axis path.domain {
  stroke-width:10;
  stroke-linecap:round;
  stroke:#ddd;
}
.x.axis path.halo {
  stroke-width:12;
  stroke-linecap:round;
  stroke:#ccc;
}
.tick line {
  stroke:#d0d0d0;
  stroke-width:1;
  transform:translate(0px, -5px);
}
.slider .handle {
  fill: #fff;
  stroke-width:1;
  stroke:#333;
}
.slider .handle, .slider text {
  cursor: move;
  cursor: -webkit-grab;
  transition:fill 200ms ease-in-out;
}
.handle:active, .slider text:active {
  cursor: move;
  cursor: -moz-grabbing;
  cursor: -webkit-grabbing;
}
.slider.brushing .handle {
  fill: #eee;
}
.label {
  font:bold 12px sans-serif;
}

chroniton.js

var handleRadius = 6,
  handleHeight = 8,
  caretHeight = 5,
  handleD = 'M' + [
    -handleRadius, -handleHeight,
    handleRadius, -handleHeight,
    handleRadius, handleHeight - caretHeight,
    0, handleHeight,
    -handleRadius, handleHeight - caretHeight,
    -handleRadius, -handleHeight].join(','),
  playWidth = 10,
  playD = 'M' + [
    0, 0,
    playWidth/1.2, playWidth/2,
    0, playWidth,
    0, 0].join(','),
  pauseD = 'M' + [
    0, 0,
    playWidth/3, 0,
    playWidth/3, playWidth,
    0, playWidth
  ].join(',') + 'Z M' + [
    (playWidth / 2) + 0, 0,
    (playWidth / 2) + playWidth/3, 0,
    (playWidth / 2) + playWidth/3, playWidth,
    (playWidth / 2) + 0, playWidth
  ].join(',');

function chroniton() {
  var margin = {top: 10, right: 20, bottom: 20, left: 20},
    domain = [new Date('1/1/2000'), new Date()],
    width = 660,
    height = 50,

    // configurable options
    keybindings = true,
    playButton = false,
    play = false,
    noLabel = false,
    loop = false,
    playbackRate = 1,

    // internal state
    playLastTick = null,

    labelFormat = d3.time.format("%Y-%m-%d"),

    // scales
    xScale = d3.time.scale().clamp(true),
    xAxis = d3.svg.axis()
      .scale(xScale)
      .orient('bottom')
      .tickSize(10, 0),

    brush = d3.svg.brush(),
    events = d3.dispatch('change', 'setValue');

  function chart(selection) {

    if (selection instanceof HTMLElement) selection = d3.select(selection);

    selection.each(function() {
      if (playButton) { margin.left = 30; }
      if (noLabel) { margin.top = 0; }

      xScale
        .domain(domain)
        .range([0, width - margin.left - margin.right]);

      brush.x(xScale)
        .extent([domain[0], domain[0]])
        .on('brush', brushed);

      var svg = d3.select(this)
        .selectAll('svg').data([0]);

      var gEnter = svg.enter()
        .append('svg')
        .attr('class', 'chroniton')
        .attr('tabindex', 1) // make this element focusable
        .on('keydown', keydown)
        .append('g');

      gEnter
        .append('g')
        .attr('class', 'x axis');

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

      var g = svg.select('g')
        .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

      g.select('.x.axis')
        .attr('transform', 'translate(0,' + (height - margin.bottom - margin.top) + ')')
        .call(xAxis);

      var domainNode = g.select('.x.axis .domain')
        .remove()
        .node();

      var axisNode = g.select('.x.axis').node();
      axisNode.insertBefore(domainNode, axisNode.childNodes[0]);

      g.select('.domain')
        .select(function() { return this.parentNode.insertBefore(this.cloneNode(true), this.parentNode.childNodes[0]); })
          .attr('class', 'halo');

      g.select('.x.axis .domain')
        .on('click', function() {
          setValue(xScale.invert(d3.mouse(this)[0]));
        });

      if (playButton) {
        var playButtonG = svg.append('g')
          .attr('transform', 'translate(' + [8, margin.top + 13] + ')');
        var playIcon = playButtonG.append('path')
          .attr('transform', 'translate(2, 2)')
          .attr('d', playD)
          .attr('class', 'play-button');
        var playRect = playButtonG.append('rect')
          .attr('fill', 'none')
          .attr('pointer-events', 'visible')
          .attr('width', 15)
          .attr('height', 15)
          .on('click', function() {
            chart.playPause();
            playIcon.attr('d', chart.playing() ? pauseD : playD);
          });
      }

      var slider = g.append('g')
        .attr('class', 'slider')
        .attr('transform', 'translate(' + [0, height - margin.bottom - margin.top + 2] + ')')
        .call(brush);

      var handle = slider.append('path')
        .attr('d', handleD)
        .attr('class', 'handle');

      var textG = slider.append('g')
        .attr('transform', 'translate(0, -35)');

      var labelText = textG
        .append('text')
        .attr('class', 'label');

      slider.call(brush.event);

      brush.on('brushstart', function() {
        slider.classed('brushing', true);
      }).on('brushend', function() {
        slider.classed('brushing', false);
      });

      function setValue(value, transition) {
        var v = new Date(Math.min(Math.max(+domain[0], +value), +domain[1]));
        var s = slider;
        if (transition) {
          s = slider.transition();
          if (transition.ease) s.ease(transition.ease);
          if (transition.duration) s.duration(transition.duration);
        }
        s.call(brush.extent([v, v]))
            .call(brush.event);
      }

      events.on('setValue', setValue);

      function brushed() {
        var value = brush.extent()[0];

        if (d3.event && d3.event.sourceEvent &&
            d3.event.sourceEvent.type !== 'keydown') { // not a programmatic event
          value = xScale.invert(d3.mouse(this)[0]);
          brush.extent([value, value]);
        }

        handle.attr('transform', function(d) {
          return 'translate(' + [xScale(value), 0] + ')';
        });

        labelText
          .text(labelFormat(value))
          .attr('text-anchor', 'left');

        var textRadius = labelText.node().getComputedTextLength() / 2,
          leftEdge = xScale(value) - textRadius,
          rightEdge = xScale(value) + textRadius;

        labelText.attr('transform', function(d) {
          if (leftEdge < -margin.left) {
            return 'translate(' + [-margin.left, 20] + ')';
          } else if (rightEdge > width - margin.left) {
            return 'translate(' + [width - margin.left - textRadius * 2, 20] + ')';
          } else {
            return 'translate(' + [xScale(value) - textRadius, 20] + ')';
          }
        });

        events.change(value);
      }
    });
  }

  function jumpSize() { return +xScale.invert(10) - domain[0]; }

  function ticker() {
    if (!play) return;
    var now = new Date().getTime();
    if (playLastTick === null) playLastTick = now;
    var playSinceLastTick = now - playLastTick,
      tenthPx = (+xScale.invert(0.1) - +domain[0]) * playbackRate,
      increment = playSinceLastTick * tenthPx;
    chart.setValue(new Date(+brush.extent()[0] + increment));
    playLastTick = now;
    if (loop && chart.isAtEnd()) chart.setValue(domain[0]);
  }

  function keydown() {
    if (!keybindings) return;
    // right
    switch (d3.event.which) {
      case 39:
        setValue(new Date(+brush.extent()[0] + jumpSize()));
        d3.event.preventDefault();
        break;
      case 37:
        setValue(new Date(+brush.extent()[0] - jumpSize()));
        d3.event.preventDefault();
        break;
    }
  }

  chart.playbackRate = function(_) {
    if (!arguments.length) return playbackRate;
    if (typeof _ !== 'number') throw new Error('argument must be a number of pixels per second');
    playbackRate = _;
    return chart;
  };

  chart.play = function() {
    play = true;
    return chart;
  };

  chart.playing = function() {
    return play;
  };

  chart.playPause = function() {
    if (play) chart.pause();
    else chart.play();
    return chart;
  };

  chart.pause = function() {
    playLastTick = null;
    play = false;
    return chart;
  };

  chart.stop = function() {
    chart.pause();
    chart.setValue(domain[0]);
    return chart;
  };

  chart.loop = function(_) {
    if (!arguments.length) return loop;
    if (typeof _ !== 'boolean') throw new Error('argument must be a boolean for whether to loop');
    loop = _;
    return chart;
  };

  chart.width = function(_) {
    if (!arguments.length) return width;
    width = _;
    xScale
      .domain(domain)
      .range([0, width - margin.left - margin.right]);
    return chart;
  };

  chart.tapAxis = function(_) {
    _(xAxis);
    if (typeof _ !== 'function') throw new Error('argument must be a function');
    return chart;
  };

  chart.height = function(_) {
    if (!arguments.length) return height;
    if (typeof _ !== 'number') throw new Error('argument must be a numeric width');
    height = _;
    return chart;
  };

  chart.domain = function(_) {
    if (!arguments.length) return domain;
    domain = _;
    xScale
     .domain(domain)
     .range([0, width - margin.left - margin.right]);
    return chart;
  };

  chart.labelFormat = function(_) {
    if (!_) return labelFormat;
    if (typeof _ !== 'function') throw new Error('argument must be a label formatter function');
    noLabel = false;
    margin.top = 10;
    height = 50;
    labelFormat = _;
    return chart;
  };

  chart.hideLabel = function() {
    labelFormat = d3.functor('');
    noLabel = true;
    margin.top = 0;
    height = 27;
    return chart;
  };

  chart.getValue = function() {
    return brush.extent()[0];
  };

  chart.isAtStart = function() {
    return +brush.extent()[0] === +domain[0];
  };

  chart.isAtEnd = function() {
    return +brush.extent()[0] === +domain[1];
  };

  chart.getScale = function() {
    return xScale.copy();
  };

  chart.getMargin = function() {
    return JSON.parse(JSON.stringify(margin));
  };

  chart.setValue = function(_, transition) {
    events.setValue(_, transition);
    return chart;
  };

  chart.playButton = function(_) {
    if (_ === undefined) return playButton;
    if (typeof _ !== 'boolean') throw new Error('argument must be a boolean setting');
    playButton = _;
    return chart;
  };

  chart.keybindings = function(_) {
    if (_ === undefined) return keybindings;
    if (typeof _ !== 'boolean') throw new Error('argument must be a boolean setting');
    keybindings = _;
    return chart;
  };

  var timer = d3.timer(ticker);
  var bound = d3.rebind(chart, events, 'on');

  return bound;
}

index.html

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

body {
   font-family: 'Roboto Condensed', sans-serif;
    /* font: 14px/16px "Helvetica Neue", Helvetica, Arial, sans-serif; */
}

h1, h2 {
    font-family: 'Roboto Condensed', sans-serif;
    text-align: center;
    font-weight: normal;
}
h1{
	font-family: 'Roboto Condensed', sans-serif;
  font-size: 30px;
  margin: 20px;
  color: #1a1a1a;
}
h2{
  font-size: 18px;
  color: #999;
  margin: 15px;
}

.states {
  fill: #ddd;
  stroke: #fff;
}

.symbol{
    fill: #33aa89;
    stroke: #fff;
    opacity: 0.65;
		stroke-width: .5px;
}

.symbol:hover {
    stroke: #000;
    fill-opacity: 1;
    stroke-width: 1px;
    stroke-width: .5px;
}

.symbol--gain{
    fill: #67a9cf;
    stroke: #fff;
    stroke-width: .5px;
    fill-opacity: .65;
    stroke-opacity: 1;
}
.symbol--loss{
    fill: #ef8a62;
    stroke: #fff;
	stroke-width: .5px;
    fill-opacity: .65;
    stroke-opacity: 1;
}

div.tooltip {
 	position: absolute;
    background-color: white;
	text-align: center;
	padding: 10px;
	font-size: 12px;
	border: 1px solid #ccc;
	border-radius: 5px;
	pointer-events: none;
    -webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
    -moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.25);
}

#label{
	position: absolute;
	font-family: 'Roboto Condensed', sans-serif;
	bottom: 511px;
    left: 270px;
    color: #333;
	font-size: 30px;
}
#label p{
  margin: 0;
}

#source{
    color: #999;
    font-size: 12px;
/*	position: relative;*/
	text-align: center;
/*	 margin-left: 60px;*/
    padding-top: 0px; 
    padding-bottom: 2px;
}

#slider {
    position: relative;
	text-align: center;
}

/*
 #slider {
     position: fixed;
     left: 300px;
     bottom: 520px;
     width: 600px;
} 
*/


</style>
<head>
    <link rel="stylesheet" href="css/main.css" />
    <title>US Nuclear Generating Capacity</title>
</head>
<body>
<!-- <h1>U.S. Nuclear Generation in <span id="year">1968</span></h1> -->
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed" rel="stylesheet">
<h1>U.S. Nuclear Generating Capacity (1968-2028)</h1>
<!--<p id="source">Source: U.S. Energy Information Administration</p> -->
<!-- <p id="label"></p> -->
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script src="//d3js.org/queue.v1.min.js"></script>
<script src="chroniton.js"></script>
<link href="chroniton.css" rel="stylesheet">
<div id="slider"></div>

<script>

var plants = {},
	startYear = 1968,
	endYear = 2028,
    currentYear = startYear;

 var width = 1200,
     height = 500;
//var width = window.innerWidth-100,
//  height = window.innerHeight-100;

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

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

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

var radius = function(d) { return (Math.abs(d.net_capacity))/70;}

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

var g = svg.append("g");

g.append( "rect" )
  .attr("width",width)
  .attr("height",height)
  .attr("fill","white")
  .attr("opacity",0)
  .on("mouseover",function(){
    hoverData = null;
    if ( probe ) probe.style("display","none");
  })

queue()
    .defer(d3.json, "us.json")
    .defer(d3.csv, "nuclear_capacity.csv")
    .await(ready);

function ready(error, us, sequence) {
  if (error) throw error;

	svg.append("path")
      .attr("class", "states")
      .datum(topojson.feature(us, us.objects.states))
      .attr("d", path);

		function update(y,tween) {

			circle = svg.selectAll("circle")
					.data(sequence.filter(function(d) { return d.year == y; })
								.sort(function (a,b) {return d3.descending(a.order, b.order);})
							)

			circle
					.enter()
					.append("circle")

			if ( tween ){
					circle
						.transition()
						.ease("linear")
						.duration(500)
						.attr("class", function(d) { return "symbol symbol--" + (d.net_capacity < 0 ? "loss" : "gain"); })
						.attr("r", radius );
			} else {
				circle
					.attr("class", function(d) { return "symbol symbol--" + (d.net_capacity < 0 ? "loss" : "gain"); })
					.attr("r", radius );
			}

				circle
					.attr("cx", function(d) {
						return projection([d.longitude, d.latitude])[0];})
					.attr("cy", function(d) {
						return projection([d.longitude, d.latitude])[1];})
					.attr("vector-effect","non-scaling-stroke")
					.on("mouseover", function(d) {
						div.transition()
								.style("left", (d3.event.pageX + 10) + "px")
								.style("top", (d3.event.pageY - 80) + "px")
								.duration(200)
								.style("opacity", .9);
						div.html("<strong>" + d.plant_name + "</strong><br/>" +
						(d.net_capacity < 0 ? Math.abs(d.net_capacity) + " MW lost" + "<br/>" + Math.abs( d.op_capacity ) + " MW operating"  : Math.abs( d.op_capacity ) + " MW operating") +
						"<br/>" + d.city + ", " + d.state)

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


						d3.select("#label").html(currentYear);


		}

		update(currentYear,false)

		d3.select("#slider")
				.call(
					chroniton()
						.domain([new Date(startYear, 1, 1), new Date(endYear, 1, 1)])
						.labelFormat(function(date) {
							return Math.ceil((date.getFullYear()) / 1) * 1;
						})
						.width(600)
						.on('change', function(date) {
							var newYear = Math.ceil((date.getFullYear()) / 1) * 1;
							if (newYear != currentYear) {
									currentYear = newYear;
									// circle
									// 	.remove();
									update(currentYear,true);
							}
						})
						.playButton(true)
						.playbackRate(0.2)
						.loop(true)
				);

		var legend = svg.append("g")
									.attr("id","legend")
									.attr("transform", "translate(" + (width - 260) + "," + (height - 185) + ")");

		legend.append("circle")
					.attr("class","symbol symbol--gain")
					.attr("r",5)
					.attr("cx",5)
					.attr("cy",10);
		legend.append("circle")
					.attr("class","symbol symbol--loss")
					.attr("r",5)
					.attr("cx",5)
					.attr("cy",30);

		legend.append("text").text("Capacity added").attr("x",15).attr("y",13).style("font-size","12px");
		legend.append("text").text("Capacity lost").attr("x",15).attr("y",33).style("font-size","12px");


		var sizes = [ 1000, 3000, 4000 ];
	  for ( var i in sizes ){
			legend.append("circle")
	      .attr( "r", ( sizes[i] )/70 )
	      .attr( "cx", 125 + ( sizes[sizes.length-1] )/70 )
	      .attr( "cy", 1.5 * ( sizes[sizes.length-1] )/70 - ( sizes[i] )/70 )
	      .attr("vector-effect","non-scaling-stroke")
				.style("stroke", "#ccc")
				.style("fill", "none");
	    legend.append("text")
	      .text( (sizes[i] / 1000) + "GW" + (i == sizes.length-1 ? "" : "") )
	      .attr( "text-anchor", "middle" )
	      .attr( "x", 125 + ( sizes[sizes.length-1] )/70 )
	      .attr( "y", 2 * ( ( sizes[sizes.length-1] )/70 - ( sizes[i] )/70 ) - 20 )
	      .attr( "dy", 10)
				.style("font-size","10px");
	  }
    
	  }
    
    

</script>

nuclear_capacity.csv

us.json