xxxxxxxxxx
<meta charset="utf-8">
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400italic,600italic,700italic,200,300,400,600,700,900">
<script src="https://d3js.org/d3.v3.min.js"></script>
<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>
<script src="chart.js"></script>
<script>
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–34 year-olds with a post-secondary degree"; break;
case "Employment to population ratio": unit = "Percent of working age population (15–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