Chart of median household income by Oregon county, 2013

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>CPI change</title>
        <script type="text/javascript" src="https://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>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js