D3 Examples - Chart of median household income 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: 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>
    