Median household income vs. overall population 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: 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>

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

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