D3 Examples - TOPOJSON points

TOPOJSON points - OK Prisons

Latitude and longitude projection of Oklahoma prisons. Blues are public prisons ranging from community corrections (light) to maximum security (dark). Yellow are private prisons. Radius is proportional to the occupancy of the prison. Timeline, more prisons and data fields will be added shortly. Fixed the data from being killed thanks to the help of Mike Bostock.

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
        <title>Oklahoma prisons</title>
        <script src="https://d3js.org/d3.v3.min.js"></script>
        <script src="https://d3js.org/topojson.v1.min.js"></script>
        <script src="https://d3js.org/queue.v1.min.js"></script>
        <style type="text/css">
            
            
            html    {
                font-family: Georgia, 'Times New Roman', Times, serif;
            }
​
            .state {
                fill: #E5E5E5;
            }
            
            .county-border{
                fill: none;
                stroke: #333;
            }
            
            .state-border {
                fill: none;
                stroke: #333;
            }
            
            .prison {
                fill: #ebebeb;
                fill-opacity: 0.8;
                stroke: #828282;
            }
​
​
        </style>
    </head>
    <body>
        
        <script type="text/javascript">
​
            var width = Math.max(960, window.innerWidth),
                height = Math.max(500, window.innerHeight);
                
            var color = d3.scale.ordinal().domain([1,2,3,4,5]).range(["#6BaED6", "#3182BD", "#08519C", "#BDD7E7", "FFFFCC"]);
​
            //https://www.ngs.noaa.gov/PUBS_LIB/ManualNOSNGS5.pdf
            var projection = d3.geo.conicConformal()
                .parallels([35 + 34 / 60, 36 + 46 / 60])
                .rotate([98 + 00 / 60, -35 - 00 / 60])
                .translate([width / 2, height / 2]);
    
            var path = d3.geo.path()
                .projection(projection);
​
            var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);
            
            projection.scale(6500);
            
            queue()
            .defer(d3.json, "ok-counties.json")
            .defer(d3.json, "corrections.json")
            .await(ready);
            
            function ready(error, ok, corrections){
                
                //state
                svg.append("path")
                    .attr("class", "state")
                    .datum(topojson.feature(ok, ok.objects.counties))
                    .attr("d", path);
                    
                //county border
                svg.append("path")
                    .attr("class", "county-border")
                    .datum(topojson.mesh(ok, ok.objects.counties, function(a, b) { return a !== b; }))
                    .attr("d", path);
                    
                //state border
                svg.append("path")
                    .attr("class", "state-border")
                    .datum(topojson.mesh(ok, ok.objects.counties, function(a, b) { return a===b; }))
                    .attr("d", path);
                    
                var corrections = topojson.feature(corrections, corrections.objects.corrections);
                    
                //prisons
                 svg.selectAll(".prison")
                     .data(corrections.features.sort( function(a,b) { return a.properties.opened - b.properties.opened;} ))
                     .enter().append("path")
                     .attr("class", "prison")
                     .attr("d", path.pointRadius( function(d) { return 1;}))
                     .transition().duration(1500)
                     .delay(function(d, i) { return i * 100; })
                     .attr("d", path.pointRadius( function(d) { return 3.4 + d.properties.capacity * 0.005;}))
                     .style("fill", function (d) { return color(d.properties.levelno);} );
            }           
​
        </script>
        
​
    