D3 Examples - TOPOJSON from shapefile

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
    <style>
        .schooldistrict {
            fill: #bbb;
            stroke: #777;
        }
​
        .schooldistrict:hover {
            fill: blue;
        }
​
        .schooldistrict-border {
            fill: none;
            pointer-events: none;
        }
​
    </style>
    <title>Oklahoma Census Tracts</title>
    <body>
        
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
​
<script>
    var width = 800, height = 400;
​
    var projection = d3.geo.conicConformal()
        .parallels([37 + 34 / 60, 90 + 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);
​
    d3.json("ok-censustract.json", function(error, ok) 
    {
        var tract = topojson
            .feature(ok, ok.objects.tract);
​
        projection.scale(1).translate([0, 0]);
​
        var b = path.bounds(tract), s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height), t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];
​
        projection.scale(s).translate(t);
​
        svg.selectAll("path")
        .data(tract.features.filter(
            function(d) 
                {
                    return d.type;
                }))
                .enter()
                .append("path")
                .attr("class", "schooldistrict")
                .attr("d", path)
                .append("title")
                .text(function(d) 
                {
                    return d.type;
                });
​
        svg.append("path")
            .datum(topojson.mesh(ok, ok.objects.tract, function(a, b) 
            {
                return a !== b;
            }))
            .attr("class", "schooldistrict-border")
            .attr("d", path);
    });
​
    d3.select(self.frameElement).style("height", height + "px");
​
</script>
    