Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active February 9, 2016 02:00

Revisions

  1. mbostock revised this gist Feb 9, 2016. 1 changed file with 1 addition and 0 deletions.
    1 change: 1 addition & 0 deletions .block
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    license: gpl-3.0
  2. mbostock revised this gist Oct 31, 2015. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -16,9 +16,9 @@

    </style>
    <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-geo-projection/0.2.9/d3.geo.projection.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
    <script src="//d3js.org/d3.v3.min.js"></script>
    <script src="//d3js.org/d3.geo.projection.v0.min.js"></script>
    <script src="//d3js.org/topojson.v1.min.js"></script>
    <script>

    var width = 960,
  3. mbostock revised this gist Jun 11, 2015. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    Original file line number Diff line number Diff line change
    @@ -38,7 +38,7 @@
    .attr("height", height);

    d3.json("va-counties.json", function(error, topo) {
    if (error) return console.error(error);
    if (error) throw error;

    var state = topojson.feature(topo, topo.objects.states),
    bounds = path.bounds(state);
  4. mbostock revised this gist Jun 11, 2015. 1 changed file with 5 additions and 3 deletions.
    8 changes: 5 additions & 3 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -16,9 +16,9 @@

    </style>
    <body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
    <script src="http://d3js.org/topojson.v1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-geo-projection/0.2.9/d3.geo.projection.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
    <script>

    var width = 960,
    @@ -38,6 +38,8 @@
    .attr("height", height);

    d3.json("va-counties.json", function(error, topo) {
    if (error) return console.error(error);

    var state = topojson.feature(topo, topo.objects.states),
    bounds = path.bounds(state);

  5. mbostock revised this gist Oct 19, 2013. 1 changed file with 0 additions and 0 deletions.
    Binary file added thumbnail.png
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  6. mbostock created this gist Oct 19, 2013.
    1 change: 1 addition & 0 deletions README.md
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    Make with `make topo/va-counties.json` in the [U.S. Atlas project](https://github.com/mbostock/us-atlas).
    58 changes: 58 additions & 0 deletions index.html
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,58 @@
    <!DOCTYPE html>
    <meta charset="utf-8">
    <style>

    .state {
    fill: #ccc;
    }

    .county-border {
    fill: none;
    stroke: #fff;
    stroke-width: 1.01px;
    stroke-linejoin: round;
    stroke-linecap: round;
    }

    </style>
    <body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script src="http://d3js.org/d3.geo.projection.v0.min.js"></script>
    <script src="http://d3js.org/topojson.v1.min.js"></script>
    <script>

    var width = 960,
    height = 500;

    var projection = d3.geo.conicConformal()
    .parallels([38 + 02 / 60, 39 + 12 / 60])
    .rotate([78 + 30 / 60, 0])
    .scale(8000)
    .translate([0, 0]);

    var path = d3.geo.path()
    .projection(projection);

    var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

    d3.json("va-counties.json", function(error, topo) {
    var state = topojson.feature(topo, topo.objects.states),
    bounds = path.bounds(state);

    projection
    .translate([width / 2 - (bounds[0][0] + bounds[1][0]) / 2, height / 2 - (bounds[0][1] + bounds[1][1]) / 2]);

    svg.append("path")
    .datum(state)
    .attr("class", "state")
    .attr("d", path);

    svg.append("path")
    .datum(topojson.mesh(topo, topo.objects.counties, function(a, b) { return a !== b; }))
    .attr("class", "county-border")
    .attr("d", path);
    });

    </script>
    1 change: 1 addition & 0 deletions va-counties.json
    1 addition, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.