ajzeigert/index.html

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

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