rsimmon/index.html

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

body {
  font: 10px sans-serif;
}

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

.bar {
  fill: steelblue;
}

.x.axis path {
  display: none;
}

</style>
<body>


  <div>
    <h1>Energy Consumption Overview: Estimates by Energy Source, 2013</h1>
    <p>Stacked bar graph <a href="http://bl.ocks.org/mbostock/3886208">shamelessly copied</a> from Mike Bostock. I didn't even use the stacked layout! (I need to learn some Javascript or refresh my Python skills first.) Energy consumption <a href="http://www.eia.gov/state/seds/data.cfm?incfile=/state/seds/sep_sum/html/sum_btu_1.html">data</a> from the U.S. Energy Information Administration.<p>

    <p>I was <em>intending</em> to show the breakdown of goal scoring for each of the 30 NHL teams during the 2014-15 season, but could not figure out how to properly format the unequal number of players who scored goals for each team.</p>
  </div>


<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);

var y = d3.scale.linear()
    .rangeRound([height, 0]);

var color = d3.scale.ordinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56"]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left")
    .tickFormat(d3.format(".2s"));

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv("state_energy_use_by_sector_abbreviation.csv", function(error, data) {
  if (error) throw error;

  color.domain(d3.keys(data[0]).filter(function(key) { return key !== "State"; }));

  data.forEach(function(d) {
    var y0 = 0;
    d.energy = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
    d.total = d.energy[d.energy.length - 1].y1;
  });

  data.sort(function(a, b) { return b.total - a.total; });

  x.domain(data.map(function(d) { return d.State; }));
  y.domain([0, d3.max(data, function(d) { return d.total; })]);

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Energy Consumption (Trillions of Btu)");

  var state = svg.selectAll(".state")
      .data(data)
    .enter().append("g")
      .attr("class", "g")
      .attr("transform", function(d) { return "translate(" + x(d.State) + ",0)"; });

  state.selectAll("rect")
      .data(function(d) { return d.energy; })
    .enter().append("rect")
      .attr("width", x.rangeBand())
      .attr("y", function(d) { return y(d.y1); })
      .attr("height", function(d) { return y(d.y0) - y(d.y1); })
      .style("fill", function(d) { return color(d.name); });

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

  legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);

  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return d; });

});

</script>

## state_energy_use_by_sector_abbreviation.csv

          
            State
            Coal
            Natural Gas
            Petroleum
            Nuclear Electric Power
            Renewable Energy

            
              AL
              565.1
              628.5
              508.0
              426.5
              317.7

            
              AK
              14.8
              333.0
              240.7
              0.0
              20.4

            
              AZ
              454.9
              340.6
              493.8
              328.4
              122.9

            
              AR
              327.1
              288.2
              317.8
              124.8
              121.8

            
              CA
              38.2
              2483.5
              3246.6
              187.2
              872.6

            
              CO
              363.5
              481.9
              459.2
              0.0
              123.1

            
              CT
              7.7
              240.1
              307.4
              178.5
              40.9

            
              DE
              18.3
              100.7
              95.2
              0.0
              7.5

            
              DC
              0.0
              33.8
              14.8
              0.0
              1.2

            
              FL
              505.2
              1245.2
              1527.3
              277.2
              315.5

            
              GA
              426.2
              634.8
              880.0
              343.8
              270.4

            
              HI
              15.3
              0.2
              233.0
              0.0
              28.6

            
              ID
              8.0
              107.1
              158.7
              0.0
              139.6

            
              IL
              1026.9
              1063.7
              1195.0
              1014.9
              234.6

            
              IN
              1198.6
              680.3
              759.1
              0.0
              150.0

            
              IA
              402.4
              306.5
              414.2
              55.6
              384.7

            
              KS
              326.8
              289.0
              405.8
              74.9
              131.9

            
              KY
              914.8
              236.0
              570.8
              0.0
              89.5

            
              LA
              228.1
              1500.5
              1695.3
              177.2
              138.4

            
              ME
              1.7
              65.9
              182.7
              0.0
              161.4

            
              MD
              183.2
              209.3
              463.8
              149.0
              78.0

            
              MA
              42.2
              454.5
              547.7
              45.3
              81.0

            
              MI
              658.2
              832.1
              823.4
              302.2
              195.5

            
              MN
              267.7
              478.8
              583.4
              111.9
              233.7

            
              MS
              97.8
              428.4
              420.5
              113.5
              70.2

            
              MO
              806.5
              281.5
              610.7
              87.4
              94.5

            
              MT
              166.1
              82.3
              169.0
              0.0
              117.7

            
              NE
              293.0
              179.6
              233.4
              71.7
              136.3

            
              NV
              64.8
              282.3
              219.7
              0.0
              75.6

            
              NH
              16.8
              55.6
              141.2
              114.2
              58.0

            
              NJ
              25.9
              713.1
              968.9
              348.8
              89.0

            
              NM
              256.4
              253.0
              250.2
              0.0
              45.3

            
              NY
              68.7
              1321.6
              1235.9
              467.7
              410.2

            
              NC
              493.8
              445.0
              789.3
              420.5
              220.3

            
              ND
              393.2
              83.8
              217.8
              0.0
              97.4

            
              OH
              1104.5
              946.0
              1126.0
              168.5
              148.0

            
              OK
              335.9
              683.1
              520.5
              0.0
              170.0

            
              OR
              38.9
              244.3
              329.6
              0.0
              464.5

            
              PA
              1126.1
              1146.6
              1168.0
              822.5
              216.6

            
              RI
              0.0
              88.6
              77.8
              0.0
              5.7

            
              SC
              257.3
              236.9
              482.6
              566.9
              144.8

            
              SD
              34.2
              84.5
              113.6
              0.0
              127.7

            
              TN
              399.8
              286.1
              661.8
              297.7
              218.3

            
              TX
              1597.4
              4137.4
              6163.9
              400.4
              552.2

            
              UT
              355.2
              258.9
              282.5
              0.0
              24.7

            
              VT
              0.0
              9.7
              75.2
              50.6
              36.1

            
              VA
              290.5
              433.5
              784.4
              306.4
              146.9

            
              WA
              75.0
              328.0
              713.2
              88.4
              933.1

            
              WV
              771.2
              151.3
              184.8
              0.0
              60.0

            
              WI
              454.6
              450.2
              504.9
              122.0
              169.0

            
              WY
              520.7
              156.2
              159.1
              0.0
              54.5
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	body {
	font: 10px sans-serif;
	}

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

	.bar {
	fill: steelblue;
	}

	.x.axis path {
	display: none;
	}

	</style>
	<body>


	<div>
	<h1>Energy Consumption Overview: Estimates by Energy Source, 2013</h1>
	<p>Stacked bar graph <a href="http://bl.ocks.org/mbostock/3886208">shamelessly copied</a> from Mike Bostock. I didn't even use the stacked layout! (I need to learn some Javascript or refresh my Python skills first.) Energy consumption <a href="http://www.eia.gov/state/seds/data.cfm?incfile=/state/seds/sep_sum/html/sum_btu_1.html">data</a> from the U.S. Energy Information Administration.<p>

	<p>I was <em>intending</em> to show the breakdown of goal scoring for each of the 30 NHL teams during the 2014-15 season, but could not figure out how to properly format the unequal number of players who scored goals for each team.</p>
	</div>


	<script src="//d3js.org/d3.v3.min.js"></script>
	<script>

	var margin = {top: 20, right: 20, bottom: 30, left: 40},
	width = 960 - margin.left - margin.right,
	height = 500 - margin.top - margin.bottom;

	var x = d3.scale.ordinal()
	.rangeRoundBands([0, width], .1);

	var y = d3.scale.linear()
	.rangeRound([height, 0]);

	var color = d3.scale.ordinal()
	.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56"]);

	var xAxis = d3.svg.axis()
	.scale(x)
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left")
	.tickFormat(d3.format(".2s"));

	var svg = d3.select("body").append("svg")
	.attr("width", width + margin.left + margin.right)
	.attr("height", height + margin.top + margin.bottom)
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

	d3.csv("state_energy_use_by_sector_abbreviation.csv", function(error, data) {
	if (error) throw error;

	color.domain(d3.keys(data[0]).filter(function(key) { return key !== "State"; }));

	data.forEach(function(d) {
	var y0 = 0;
	d.energy = color.domain().map(function(name) { return {name: name, y0: y0, y1: y0 += +d[name]}; });
	d.total = d.energy[d.energy.length - 1].y1;
	});

	data.sort(function(a, b) { return b.total - a.total; });

	x.domain(data.map(function(d) { return d.State; }));
	y.domain([0, d3.max(data, function(d) { return d.total; })]);

	svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + height + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "y axis")
	.call(yAxis)
	.append("text")
	.attr("transform", "rotate(-90)")
	.attr("y", 6)
	.attr("dy", ".71em")
	.style("text-anchor", "end")
	.text("Energy Consumption (Trillions of Btu)");

	var state = svg.selectAll(".state")
	.data(data)
	.enter().append("g")
	.attr("class", "g")
	.attr("transform", function(d) { return "translate(" + x(d.State) + ",0)"; });

	state.selectAll("rect")
	.data(function(d) { return d.energy; })
	.enter().append("rect")
	.attr("width", x.rangeBand())
	.attr("y", function(d) { return y(d.y1); })
	.attr("height", function(d) { return y(d.y0) - y(d.y1); })
	.style("fill", function(d) { return color(d.name); });

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

	legend.append("rect")
	.attr("x", width - 18)
	.attr("width", 18)
	.attr("height", 18)
	.style("fill", color);

	legend.append("text")
	.attr("x", width - 24)
	.attr("y", 9)
	.attr("dy", ".35em")
	.style("text-anchor", "end")
	.text(function(d) { return d; });

	});

	</script>
State	Coal	Natural Gas	Petroleum	Nuclear Electric Power	Renewable Energy
AL	565.1	628.5	508.0	426.5	317.7
AK	14.8	333.0	240.7	0.0	20.4
AZ	454.9	340.6	493.8	328.4	122.9
AR	327.1	288.2	317.8	124.8	121.8
CA	38.2	2483.5	3246.6	187.2	872.6
CO	363.5	481.9	459.2	0.0	123.1
CT	7.7	240.1	307.4	178.5	40.9
DE	18.3	100.7	95.2	0.0	7.5
DC	0.0	33.8	14.8	0.0	1.2
FL	505.2	1245.2	1527.3	277.2	315.5
GA	426.2	634.8	880.0	343.8	270.4
HI	15.3	0.2	233.0	0.0	28.6
ID	8.0	107.1	158.7	0.0	139.6
IL	1026.9	1063.7	1195.0	1014.9	234.6
IN	1198.6	680.3	759.1	0.0	150.0
IA	402.4	306.5	414.2	55.6	384.7
KS	326.8	289.0	405.8	74.9	131.9
KY	914.8	236.0	570.8	0.0	89.5
LA	228.1	1500.5	1695.3	177.2	138.4
ME	1.7	65.9	182.7	0.0	161.4
MD	183.2	209.3	463.8	149.0	78.0
MA	42.2	454.5	547.7	45.3	81.0
MI	658.2	832.1	823.4	302.2	195.5
MN	267.7	478.8	583.4	111.9	233.7
MS	97.8	428.4	420.5	113.5	70.2
MO	806.5	281.5	610.7	87.4	94.5
MT	166.1	82.3	169.0	0.0	117.7
NE	293.0	179.6	233.4	71.7	136.3
NV	64.8	282.3	219.7	0.0	75.6
NH	16.8	55.6	141.2	114.2	58.0
NJ	25.9	713.1	968.9	348.8	89.0
NM	256.4	253.0	250.2	0.0	45.3
NY	68.7	1321.6	1235.9	467.7	410.2
NC	493.8	445.0	789.3	420.5	220.3
ND	393.2	83.8	217.8	0.0	97.4
OH	1104.5	946.0	1126.0	168.5	148.0
OK	335.9	683.1	520.5	0.0	170.0
OR	38.9	244.3	329.6	0.0	464.5
PA	1126.1	1146.6	1168.0	822.5	216.6
RI	0.0	88.6	77.8	0.0	5.7
SC	257.3	236.9	482.6	566.9	144.8
SD	34.2	84.5	113.6	0.0	127.7
TN	399.8	286.1	661.8	297.7	218.3
TX	1597.4	4137.4	6163.9	400.4	552.2
UT	355.2	258.9	282.5	0.0	24.7
VT	0.0	9.7	75.2	50.6	36.1
VA	290.5	433.5	784.4	306.4	146.9
WA	75.0	328.0	713.2	88.4	933.1
WV	771.2	151.3	184.8	0.0	60.0
WI	454.6	450.2	504.9	122.0	169.0
WY	520.7	156.2	159.1	0.0	54.5