D3 Examples - guns from chicago

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="spinner.css">
<style type="text/css">
    div.container {
        width:960px;
        height: 320px;
        margin: 20px auto;
    }
​
    h1 {
        font-size:30px;
        font-family: serif;
        text-align:center;
        margin-top:25px;
    }
​
    h2 {
        font-family: sans-serif;
        font-size:16px;
        text-align:center;
        font-weight:100;
        margin-top: -10px;
    }
​
    a {
        color: #f58c5e;
    }
​
​
    body {
        background: #fff;
    }
​
    path.county {
        fill: #efefef;
        stroke: #efefef;
    }
​
    path.gun {
        fill: #ddd;
        stroke: #ddd;
    }
​
    circle {
        fill: #f58c5e;
        opacity: .75;
        stroke: #eee;
    }
​
    path.state {
        fill:none;
        stroke:#fff;
    }
​
    text.state-name {
        text-transform: uppercase;
        font-family: sans-serif;
        font-weight: 300;
        font-size:10px;
    }
</style>
​
<body>
    <h1>Where 50,000 Guns Recovered in Chicago Came From</h1>
    <h2>A recreation of <a href="https://www.nytimes.com/interactive/2013/01/29/us/where-50000-guns-in-chicago-came-from.html?_r=0" target="_blank">this</a> NY Time's visualization created by Kevin Quely and Tim Wallace</h2>
    <div class="container">
        <div id="cssload-pgloading">
            <div class="cssload-loading"></div>
        </div>
    </div>
    <script src="d3.min.js" charset="utf-8"></script>
    <script src="queue.min.js"></script>
    <script src="topojson.min.js"></script>
    <script src="chroma.js"></script>
    <script>
​
        var width = 960,
            height = 520;
        
        var container = d3.select('div.container');
​
        var svg = container.append('svg')
            .attr('width', width)
            .attr('height', height);
​
        var path = d3.geo.path();
​
        ready = function(err, us, guns, stateFips) {
            var stateData = topojson.feature(us, us.objects.states).features;
            var countyData = topojson.feature(us, us.objects.counties).features;
​
            var gunsByFips = {};
            var maxCount = 0;
            var minCount = Infinity;
            var stateByFips = {};
            guns.forEach(function(d){
                d.count3 = +d.count3;
                d.FIPS = +d.FIPS;
                gunsByFips[d.FIPS] = d.count3;
                stateByFips[d.FIPS] = d.STATE;
                if( d.count3 > maxCount ) {
                    maxCount = d.count3;
                }
                if( d.count3 > 0 && d.count3 < minCount ) {
                    minCount = d.count3;
                }
            });
​
            var stateMap = {};
            stateFips.forEach(function(d){
                stateMap[+d.numeric_Code] = d.usps_Code;
            });
​
            var rScale = d3.scale.log().base(Math.E).domain([minCount, maxCount]).range([0,10]);
            svg.selectAll('path.county')
                .data(countyData)
                .enter()
                .append('path')
                .attr('class', 'county')
                .classed('gun', function(d) {
                    return gunsByFips[d.id] > 0;
                })
                .attr('d', path);
​
            svg.selectAll('path.state')
                .data(stateData)
                .enter()
                .append('path')
                    .attr('class', 'state')
                    .attr('d', path)
                    .attr('id', function(d) { return d.id; });
​
            countyData = countyData.filter(function(d){
                return !isNaN(rScale(gunsByFips[d.id]));
            });
​
            svg.selectAll('circle')
                .data(countyData)
                .enter()
                .append('circle')
                .attr("transform", function(d) { return path.centroid(d) !="NaN,NaN" ? "translate(" + path.centroid(d) + ")" : ""; })
                .attr('r', function(d){
                    var r = rScale(gunsByFips[d.id]);
                    if( gunsByFips[d.id]==maxCount ) {
                        r *=7;
                    }
                    return r;
                });
​
            svg.selectAll('text.state-name')
                .data(stateData)
                .enter()
                .append('text')
                    .attr("transform", function(d) { 
                        var center = path.centroid(d);
                        return center !="NaN,NaN" ? "translate(" + center + ")" : ""; 
                    })
                    .attr('class', 'state-name')
                    .text(function(d){
                        return stateMap[d.id];
                    });
            d3.select("#cssload-pgloading").remove();
        };
​
        queue()
            .defer(d3.json, 'us.json')
            .defer(d3.csv, 'guns-history.csv')
            .defer(d3.tsv, 'state-fips.tsv')
            .await(ready);
​
    </script>
</body>
​
​
    