ajzeigert · September 19, 2015 00:11
diff --git a/index.html b/index.html
 <!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: 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;
 			}
 			
 			/* SVG styles below */
 			
 			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>
diff --git a/oregon.csv b/oregon.csv
	<!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: 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;
	}

	/* SVG styles below */

	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>
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