Reusable Bar Chart

forked from dougdowson's block: Reusable Bar Chart

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

<style>

body, h1, h2, h3, p {
  margin: 0;
  padding: 0;
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 1em;
  color: #333;
  font-weight: 400;
}

#content {
  margin: 5px;
  padding: 20px;
  width: 775px;
  text-align: left;
  border: 1px solid #ccc;
}

h1 {
  line-height: 1em;
  font-size: 1.75em;
  font-weight: 900;
  color: #000;
}

p {
  margin: 5px 0px 0px 0px;
}

.domain {
  fill: none;
  stroke-width: 0;
}

#menu {
  margin: 5px 0px 0px 0px;
  display: block;
}

#unit {
  margin: 10px 0px 5px 0px;
  font-size: 0.9em;
}

select {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 0.9em;
  color: #333;
  font-weight: 400;
}

.bar {
  fill: #2980B9;
}

.bar:hover {
  fill: #2C3E50;
}

.axis line {
  stroke: #eee;
  stroke-width: 1;
  opacity: 0.5;
  shape-rendering: crispEdges;
}

.g-baseline line {
  stroke: #333;
  stroke-width: 2;
  opacity: 1;
  shape-rendering: crispEdges;
}

.x.axis .tick text, .y.axis .tick text {
  fill: #333;
  font-size: 0.9em;
}

</style>

</head>

<body>
<div id="content">
<h1>OECD Social Indicators, 2012</h1>
  <select id="menu">
	<option>Poverty rate</option>
	<option>Infant mortality</option>
	<option>Health expenditures</option>
	<option>Education</option>
	<option>Income inequality</option>
	<option>Public social spending</option>
	<option>Tax revenue</option>
    <option>Employment to population ratio</option>
    <option>GDP per capita</option>
	<option>CO2 emissions</option>
  </select>

<p id="unit">Percent of population earning less than 50% of median household income</p>

<div id="chart"></div>
<p>Source: OECD.</p>
</div>

var map = d3.map(),
    barchart;

d3.csv("data.csv", function(error, data) {

data = d3.nest()
      .key(function(d){ return d.variable; })
      .entries(data);

data.forEach(function(d){
    d.value = +d.value;
    d.values.sort(function(a, b){ return d3.ascending(+a.value, +b.value); });
    map.set(d.key, d.values);
  });

barchart = d3.svg.barchart()
      .margin({top: 0, right: 10, bottom: 40, left: 40})
      .tickFormat(d3.format(",.0f"))
      .x(function(d){ return d.country; })
      .y(function(d){ return d.value; });

d3.select("#chart")
      .datum(map.get("Poverty rate"))
      .call(barchart);

});

d3.select("#menu").on("change", function() {

d3.select("#chart")
      .datum(map.get(this.value))
      .call(barchart);

var unit;
  var selectedVariable = document.getElementById("menu").value;
  switch (selectedVariable)
    	{
    	case "CO2 emissions": unit = "Metric tons of CO<sub>2</sub> per capita"; break;
    	case "Education": unit = "Percent of 25&ndash;34 year-olds with a post-secondary degree"; break;
    	case "Employment to population ratio": unit = "Percent of working age population (15&ndash;64)"; break;
    	case "GDP per capita": unit = "$US PPP adjusted"; break;
    	case "Health expenditures": unit = "Percent of GDP"; break;
    	case "Income inequality": unit = "Gini coefficient (0 = perfect equality, 100 = perfect inequality)"; break;
    	case "Infant mortality": unit = "Deaths per 1,000 live births"; break;
    	case "Poverty rate": unit = "Percent of population earning less than 50% of median household income"; break;
    	case "Public social spending": unit = "Percent of GDP"; break;
    	case "Tax revenue": unit = "Percent of GDP"; break;
    	}
  d3.select("#unit")
      .html(unit);

});

d3.select(self.frameElement).style("height", "560px");

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

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

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