Created
September 12, 2015 00:09
-
-
Save ajzeigert/73e96c8b160d2422b5bf to your computer and use it in GitHub Desktop.
Chart of median household income by Oregon county, 2013
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| county | income | |
|---|---|---|
| Oregon | 50229 | |
| Baker County | 41500 | |
| Benton County | 48604 | |
| Clackamas County | 64352 | |
| Clatsop County | 44683 | |
| Columbia County | 54968 | |
| Coos County | 37940 | |
| Crook County | 38795 | |
| Curry County | 39516 | |
| Deschutes County | 50209 | |
| Douglas County | 40524 | |
| Gilliam County | 44743 | |
| Grant County | 35051 | |
| Harney County | 38113 | |
| Hood River County | 56725 | |
| Jackson County | 44005 | |
| Jefferson County | 43373 | |
| Josephine County | 37733 | |
| Klamath County | 39627 | |
| Lake County | 33611 | |
| Lane County | 42931 | |
| Lincoln County | 42365 | |
| Linn County | 46939 | |
| Malheur County | 35578 | |
| Marion County | 46885 | |
| Morrow County | 49940 | |
| Multnomah County | 52511 | |
| Polk County | 52808 | |
| Sherman County | 42639 | |
| Tillamook County | 43676 | |
| Umatilla County | 48389 | |
| Union County | 42542 | |
| Wallowa County | 41994 | |
| Wasco County | 43765 | |
| Washington County | 64180 | |
| Wheeler County | 37974 | |
| Yamhill County | 54535 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>CPI change</title> | |
| <script type="text/javascript" src="http://d3js.org/d3.v3.js"></script> | |
| </head> | |
| <style> | |
| body { | |
| font-family: 'Helvetica', Arial, sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| #container { | |
| width: 420px; | |
| 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; | |
| } | |
| /* SVG styles below */ | |
| rect.bar: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 by Oregon county, 2013</h1> | |
| <p>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("income.csv", function(data) { | |
| console.log(data); | |
| data.sort(function(a, b) { | |
| return d3.descending(+a.income, +b.income); | |
| }); | |
| var h = 600; | |
| var w = 400 | |
| var barPadding = 2; | |
| var margin = { top: 10, right: 10, bottom: 10, left: 80 }; | |
| var chart = d3.select("#chart").append("svg").attr({ width: w + margin.left + margin.right, height: h + margin.bottom + margin.top }); | |
| var yScale = d3.scale.ordinal() | |
| .rangeRoundBands([0, h], 0.1) | |
| .domain(d3.range(data.length)); | |
| var xScale = d3.scale.linear() | |
| .range([0, w - margin.left - margin.right]) | |
| .domain([0, d3.max(data, function(d) { | |
| return +d.income; })]); | |
| var xAxis = d3.svg.axis() | |
| .scale(xScale) | |
| .orient("bottom") | |
| .tickFormat(d3.format('s')); | |
| var cash = d3.format('$0,000'); | |
| chart.selectAll("rect") | |
| .data(data) | |
| .enter() | |
| .append("rect") | |
| .attr({ | |
| height: yScale.rangeBand(), | |
| width: function(d) { return xScale(+d.income) }, | |
| x: margin.left + 10, | |
| y: function(d, i) { return yScale(i) }, | |
| class: 'bar', | |
| fill: function(d) { | |
| if (d.county === 'Oregon') { | |
| return '#595959'; | |
| } else { | |
| return '#7a9e00'; | |
| } | |
| } | |
| }) | |
| .append('title') | |
| .text(function(d) { return d.county + ' has a median income of '+ cash(d.income) }) | |
| chart.selectAll("text") | |
| .data(data) | |
| .enter() | |
| .append("text") | |
| .attr({ | |
| 'text-anchor': 'end', | |
| 'font-size': '9px', | |
| 'font-family': 'sans-serif', | |
| x: margin.left, | |
| y: function(d, i) { return yScale(i) + ( yScale.rangeBand() / 2 ) + 4 } | |
| }) | |
| .text(function(d) { | |
| return d.county }); | |
| chart.selectAll("text2") | |
| .data(data) | |
| .enter() | |
| .append("text") | |
| .attr({ | |
| 'text-anchor': 'start', | |
| 'font-size': '9px', | |
| 'font-weight': 'bold', | |
| 'font-family': 'sans-serif', | |
| x: function(d) { return xScale(+d.income) + margin.left + margin.right + 5 }, | |
| y: function(d, i) { return yScale(i) + ( yScale.rangeBand() / 2 ) + 4 } | |
| }) | |
| .text(function(d) { | |
| return cash(d.income) }); | |
| chart.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(" + (margin.left + 10) + "," + h + ")") | |
| .call(xAxis); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment