D3 Examples - Median household income vs. overall population by Oregon county, 2013

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