All examples By author By category About

nsonnad

Full window Github gist

Area + donut: History of energy use in the US

<!DOCTYPE html>
<html>
  <head>
    <title>US Historical Energy Consumption</title>
    <script type="text/javascript" src="https://d3js.org/d3.v3.min.js"></script>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
  
<style type="text/css">
body { font-size: 11px; font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; }

.axis path, line { stroke: #000; fill:none; shape-rendering: crispEdges;}

line.tick { stroke: #cccccc; opacity:.4; }

.arc path {
  stroke: #fff;
}

div#stack { width: 550px; float:left; }
div#pie { width: 350px; float:left; }
.yLabels { stroke: none; font-size: 1em; fill:#191919; }
.donutLabels { font-size:12px; font-weight: bold; stroke: none; fill:white; }
.underlay { visibility: hidden; pointer-events:all; }
.underlay rect { fill:gray; opacity:.3; }
.tooltip { position:absoulte; }
</style>
</head>
<body>
<div id="stack">
</div>
<div id="pie">
</div>

var	dataChange,
		latest,
		data;

// settings for stacked area chart
var stacked = d3.select("#stack").append("svg")
		.attr("width", w1 + margin.l + margin.r)
		.attr("height", h + margin.t + margin.b)
  .append("g")
    .attr("class", "stackWrapper")
		.attr("transform", "translate(" + margin.l + "," + margin.t + ")");

var xAxis = d3.svg.axis()
		.scale(x)
		.tickSubdivide(true)
		.orient("bottom");
	stacked.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + h + ")")

var yAxis = d3.svg.axis()
		.scale(y)
		.tickSubdivide(true)
		.tickSize(-w1, 0, 0)
		.orient("left");

var stack = d3.layout.stack()
		.values(function(d) { return d.values; });

var area = d3.svg.area().interpolate("cardinal")
		.x(function(d) { return x(d.year); })
		.y0(function(d) { return y(d.y0); })
		.y1(function(d) { return y(d.y + d.y0); })

stacked.append("g")
		.attr("class", "y axis")
		.call(yAxis);

// settings for donut chart		
var radius = Math.min((w2), h) / 2,
		labelRadius = radius - 20;

var krispy = d3.select("#pie").append("svg")
		.attr("width", w2 + margin.r + margin.l)
		.attr("height", h + margin.t + margin.b)
  .append("g")
		.attr("transform", "translate(150," + (h/2 + margin.t) + ")");

var arc = d3.svg.arc()
		.outerRadius(radius - 15)
		.innerRadius(radius - 55);

var pie = d3.layout.pie()
		.sort(null)
		.value(function(d) { return d.values; });

// bring in the data
d3.csv("us-historical-energy.csv", function(csv) {	
	// data variable that will be used throughout
	data = csv;

// format dates
	data.forEach(function(d) { 
		d.Year = formatTime(d.Year);
	});

// function for adding data points one at a time
	var latest = 1;

function update() {
		// create array that will update with each new data point
		dataChange = data.slice(0, latest)
		latest++;
		if (latest < csv.length) {
		// redraw function draws the meat of the charts
		redraw();			
		};
	};
	// update data every 500ms
	var interval = setInterval(update, 500);

// create list energy sources to be used as keys
	color.domain(d3.keys(data[0]).filter(function(key) { return key !== "Year" && key !== "sourcesPie"; }))

// create legend
	var legend = stacked.append("g")
				.attr("class", "legendBox")

var legends = legend.selectAll(".legend")
			.data(color.domain())
		.enter().append("g")
			.attr("class", "legend")
			.attr("transform", function(d, i) { return "translate(10," + (5 + (i * 20)) + ")"; });

legends.append("rect")
			.attr("width", 15)
			.attr("height", 15)
			.style("fill", color)

legends.append("text")
			.attr("x", 20)
			.attr("y", 8)
			.attr("dy", ".35em")
			.text(function(d) { return d; });

// draw the charts			
function redraw() {

// map vales to d3.layout.stack() for the area chart
var sourcesStack = stack(color.domain().map(function(name) {
  return {
	name: name,
	values: data.map(function(d) { 
	  return { year: d.Year, y: +d[name] };
	  })
  };
}));

// set x domain to extend to the most recently added data point
x.domain([d3.min(dataChange, function(d) { 
		return d.Year; }),
	d3.max(dataChange, function(d) { 
		return d.Year; })]);

// set data for energy sources stacked areas
var stacks = stacked.selectAll(".sources")
	.data(sourcesStack);

// call enter() for stacked areas
var stacksEnter = stacks.enter().append("g")
    .attr("class", "sources");

// draw paths and areas
stacksEnter.append("path")
	.attr("class", "area")
	.attr("d", function(d) { return area(d.values); })
	.style("fill", function(d) { return color(d.name); });

// update and transition area values
var stacksUpdate = d3.transition(stacks)

stacksUpdate.transition().select("path").duration(500)
	.attr("d", function(d) { return area(d.values); });

// update x axis
d3.selectAll(".x.axis").transition(stacked).duration(500).call(xAxis)

// create rect underlays that will be used for mouseovers
var underlay = stacks.selectAll(".underlay").data(data),
		underlayWidth = w1/dataChange.length;

// enter() underlay g and append rects
var underlayEnter = underlay.enter().append("g")
	.attr("class", "underlay");

underlayEnter.append("rect")
	.attr("x", function(d, i) { return x(d.Year); })
	.attr("width", underlayWidth)
	.attr("y", 0)
	.attr("height", h);

// update and move underlays; reduce width to svgwidth/data.length
var underlayUpdate = d3.transition(underlay);

underlayUpdate.transition().selectAll("rect").duration(500)
	.attr("x", function(d, i) { return x(d.Year); })
	.attr("width", underlayWidth);

// what to do when we mouse on or off a rect
underlay.on("mouseover", rectOn)
underlay.on("mouseout", rectOff)

// now for the donut
// map values to color.domain key
data.forEach(function(d) {
  d.sourcesPie = color.domain().map(function(name) {
    return {name: name, values: +d[name]};
  });
});

// set data for the donut
var donut = krispy.selectAll(".arc")
	.data(pie(dataChange[dataChange.length - 1].sourcesPie))

// enter() the donut "g"
var donutEnter = donut.enter().append("g")
	.attr("class", "arc")

// things we will use to compute percentages
var total = d3.sum(dataChange[dataChange.length - 1].sourcesPie, function(d) { return d.values; })
var formatPercent = d3.format("%")

// draw donut arcs
donutEnter.append("path")
	.attr("class", "donutPath")
	.attr("d", arc)
	.each(function(d) { this._current = d; })
	.style("fill", function(d) { return color(d.data.name); })

// draw percentage labels inside arcs	
donutEnter.append("text")
	.attr("class", "donutLabels")
	.attr("transform", function(d) {
		return "translate(" + arc.centroid(d) + ")rotate(" + angle(d) + ")"; })
	.attr("dy", ".35em")
	.attr("text-anchor", "middle")
	.style("fill-opacity", function(d) {return d.value==0 ? 1e-6 : 1;})
	.text(function(d) { 
		return formatPercent(d.data.values/total) });

// angle function used for rotating labels		
function angle(d) {
  var a = (d.startAngle + d.endAngle) * 90 / Math.PI - 90;
  return a > 90 ? a - 180 : a;
  }

// update and transition arcs and labels	
var donutUpdate = d3.transition(donut);

donutUpdate.transition().select("text").duration(500)
	.attr("transform", function(d) {
    return "translate(" + arc.centroid(d) + ")rotate(" + angle(d) + ")"; }) 
	.style("fill-opacity", function(d) {return d.value==0 ? 1e-6 : 1;})
	.text(function(d) {
		return formatPercent(d.data.values/total) });

donutUpdate.transition().select("path").duration(500)
	.attrTween("d", arcTween)

function arcTween(a) {
  var i = d3.interpolate(this._current, a);
  this._current = i(0);
		return function(t) {
		return arc(i(t));
		 };
	}
};

// helper functions

// what happens when we go on or off of a rect
var rectOn = function() {
	var hoverRect = d3.select(this)
	hoverRect.style("visibility", "visible")
	}

var rectOff = function() {
	var hoverRect = d3.select(this)
	hoverRect.style("visibility", "hidden")
	}

// stop animation when we roll over stacked area, restart when leaving
$('#stack').hover(function() {
		clearInterval(interval);
		},
		function() {
		 interval = setInterval(update, 500);
		});

});

</script>
</body>
</html>

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

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

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

https://code.jquery.com/jquery-1.8.3.min.js