index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CPI change</title>
<script type="text/javascript" src="//d3js.org/d3.v3.js"></script>
</head>
<style>
body {
font-family: 'Helvetica', Arial, sans-serif;
margin: 0;
padding: 0;
}
#container {
width: 600px;
margin: 20px;
}
h1 {
font-size: 26px;
margin: 0;
}
p {
margin: 0;
}
small {
font-size: 10px;
}
.source, .credit {
display: inline-block;
}
.source {
float: left;
}
.credit {
float: right;
}
circle.circle:hover {
fill: #013f62
}
.axis path,
.axis line {
fill: none;
stroke: black;
shape-rendering: crispEdges;
}
.axis text {
font-family: sans-serif;
font-size: 11px;
}
</style>
<body>
<div id='container'>
<h1>Median household income vs. overall population by Oregon county, 2013</h1>
<p>Income in inflation-adjusted 2013 dollars</p>
<div id='chart'></div>
<p class='source'><small>Source: U.S. Census Bureau</small></p>
<p class='credit'><small>Chart by Andy Zeigert</small></p>
</div>
<script type="text/javascript">
d3.csv("oregon.csv", function(data) {
console.log(data);
data.sort(function(a, b) {
return d3.descending(+a.income, +b.income);
});
var h = 400;
var w = 600
var barPadding = 2;
var margin = { top: 10, right: 10, bottom: 10, left: 40 };
var chart = d3.select("#chart").append("svg").attr({ width: w + margin.left + margin.right, height: h + margin.bottom + margin.top });
var yScale = d3.scale.linear()
.range([0, h - margin.top ])
.domain([
d3.max(data, function(d) {
return +d.population; } ),
d3.min(data, function(d) {
return +d.population; } )
]);
var xScale = d3.scale.linear()
.range([margin.left, w])
.domain([
d3.min(data, function(d) {
return +d.income; }),
d3.max(data, function(d) {
return +d.income; })
]);
var xAxis = d3.svg.axis()
.scale(xScale)
.orient("bottom")
.tickFormat(d3.format('$s'));
var yAxis = d3.svg.axis()
.scale(yScale)
.orient("left")
.tickFormat(d3.format('s'));
var cash = d3.format('$0,000');
var pop = d3.format('0,000');
chart.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr({
cx: function(d) { return xScale(d.income) },
cy: function(d) { return yScale(d.population) },
r: 5,
class: 'circle',
fill: '#7a9e00'
})
.append('title')
.text(function(d) { return d.county + ' has a median income of '+ cash(d.income) + ' and a population of ' + pop(d.population) })
chart.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + h + ")")
.call(xAxis);
chart.append("g")
.attr("class", "y axis")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")")
.call(yAxis);
});
</script>
</body>
</html>
oregon.csv
county,income,population
Baker County,41500,16059
Benton County,48604,86316
Clackamas County,64352,394972
Clatsop County,44683,37474
Columbia County,54968,49459
Coos County,37940,62475
Crook County,38795,20998
Curry County,39516,22335
Deschutes County,50209,170388
Douglas County,40524,106972
Gilliam County,44743,1932
Grant County,35051,7180
Harney County,38113,7126
Hood River County,56725,22885
Jackson County,44005,210287
Jefferson County,43373,22192
Josephine County,37733,83599
Klamath County,39627,65455
Lake County,33611,7838
Lane County,42931,358337
Lincoln County,42365,46406
Linn County,46939,119356
Malheur County,35578,30359
Marion County,46885,326110
Morrow County,49940,11187
Multnomah County,52511,776712
Polk County,52808,77916
Sherman County,42639,1710
Tillamook County,43676,25342
Umatilla County,48389,76705
Union County,42542,25691
Wallowa County,41994,6820
Wasco County,43765,25515
Washington County,64180,562998
Wheeler County,37974,1375
Yamhill County,54535,101758