Skip to content

Instantly share code, notes, and snippets.

@tomstove

tomstove/aus.topo.json

Created May 6, 2013 01:31
Download ZIP

Revisions

  1. tomstove created this gist May 6, 2013.
    1 change: 1 addition & 0 deletions aus.topo.json
    View file
    1 addition, 0 deletions not shown because the diff is too large. Please use a local Git client to view these changes.
    76 changes: 76 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,76 @@
    <!DOCTYPE html>
    <head>
    <style>

    .land {
    fill: #ccc;
    fill-opacity: 0.8;
    stroke: #3b3b3b;
    stroke-width: 0.3px;
    }

    .graticule {
    fill: none;
    stroke: #777;
    stroke-width: 0.3px;
    }

    .cities {
    fill: red;
    fill-opacity: 0.;
    }

    </style>
    </head>
    <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.v0.min.js"></script>
    <script>

    // 110.7421875 -46.5588603031 159.08203125 -10.8333059836

    var width = 960,
    height = 500;

    var projection = d3.geo.satellite()
    .translate([width/2, 200])
    .distance(1.2)
    .scale(1500)
    .rotate([-147.348821675, 37.5050318, 23])
    .tilt(34)
    .clipAngle(Math.acos(1 / 1.1) * 180 / Math.PI - 1e-6);

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

    var graticule = d3.geo.graticule()
    .step([5, 5]);

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

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

    var land = svg.append("g");
    var cities = svg.append("g");

    d3.json('aus.topo.json', function(err, data) {
    land.append("path")
    .datum(topojson.object(data, data.objects.land))
    .attr("class", "land")
    .attr("d", path);

    cities.append("path")
    .datum(topojson.object(data, data.objects.cities))
    .attr("class", "cities")
    .attr("d", path);
    });

    </script>
    </body>
    </html>