Skip to content

Instantly share code, notes, and snippets.

@nygeog

nygeog/index.html

Forked from dwtkns/index.html
Created August 12, 2014 18:31
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save nygeog/21b8df190cde8ddea51f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save nygeog/21b8df190cde8ddea51f to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @dwtkns dwtkns created this gist Aug 7, 2014.
    110 changes: 110 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,110 @@
    <!DOCTYPE html>
    <meta charset="utf-8">
    <style>

    .counties {
    fill: none;
    stroke: black;
    opacity:0.2;
    }

    .states {
    fill: none;
    stroke: black;
    stroke-linejoin: round;
    }

    .make-it-red {
    fill: red;
    stroke: yellow;
    stroke-width: 2px;
    }


    </style>
    <body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://d3js.org/queue.v1.min.js"></script>
    <script src="http://d3js.org/topojson.v1.min.js"></script>
    <script>
    var maptype = 'topojson';


    var width = 960,
    height = 600;


    var projection = d3.geo.albersUsa()
    .scale(1280)
    .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);


    queue()
    .defer(d3.json, "us-states.geojson")
    .defer(d3.json, "us-states.topojson")
    .await(ready);


    function ready(error, us_geojson,us_topojson) {

    // GEOJSON
    if (maptype === 'geojson') {
    var us = us_geojson;


    svg.append("g")
    .attr("class", "states")
    .selectAll("path")
    .data(us.features)
    .enter().append("path")
    .attr("d", path)
    // the three commented lines below are a longer version of the line above
    /*
    .attr("d", function(d) {
    return path(d);
    })
    */
    .classed('make-it-red', function(d) {
    if (d.properties.name === "Mississippi" || d.properties.name === "Oregon") {
    return true;
    }
    else {
    return false;
    }
    })


    }


    // TOPOJSON
    else if (maptype === 'topojson') {
    var us = us_topojson;

    svg.append("g")
    .attr("class", "counties")
    .selectAll("path")
    .data(topojson.feature(us, us.objects.counties).features)
    .enter().append("path")
    .attr("d", path);

    svg.append("path")
    .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
    .attr("class", "states")
    .attr("d", path);

    }


    }

    </script>
    53 changes: 53 additions & 0 deletions us.geojson
    View file
    53 additions, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
    1 change: 1 addition & 0 deletions us.topojson
    View file
    1 addition, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.