Skip to content

Instantly share code, notes, and snippets.

@tobi

tobi/index.html

Created May 17, 2013 21:34
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save tobi/5602134 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save tobi/5602134 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. tobi created this gist May 17, 2013.
    3 changes: 3 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,3 @@
    <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>
    72 changes: 72 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,72 @@

    // NYC 40.7142° N, 74.0064° W

    var nyc = [40.718119,-73.991547]
    var sf = [37.76678,-122.423916]
    var tokyo = [35.682956,139.703522]

    var places = [nyc, sf, tokyo]

    var width = 960,
    height = 480;


    var projection = d3.geo.kavrayskiy7()
    .scale(153)
    //.translate([width / 2, height / 2])
    .precision(.1);

    console.log(projection(nyc))

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

    var graticule = d3.geo.graticule();

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

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

    d3.json("https://raw.github.com/mbostock/topojson/master/examples/world-50m.json", function(error, world) {
    svg.insert("path", ".graticule")
    .datum(topojson.feature(world, world.objects.land))
    .attr("class", "land")
    .attr("d", path);

    svg.insert("path", ".graticule")
    .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
    .attr("class", "boundary")
    .attr("d", path);
    });

    translate = function(d) {
    return "translate(" + projection([d[1], d[0]]) + ")";
    }

    var place = svg.selectAll("circle").data(places).enter().append("circle")

    place.attr("transform", translate)
    .attr("class", "marker")
    .attr("r", 3)
    .transition()
    .attr("r", 5)
    .duration(750)

    place.append("circle")
    .style("fill", "none")
    .attr("r", 20)
    .style("fill", "none")
    .style("stroke", "red")
    .style("stroke-opacity", 1e-6)
    .style("stroke-width", 3)





    d3.select(self.frameElement).style("height", height + "px");
    21 changes: 21 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,21 @@

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

    .land {
    fill: #222;
    }

    .marker {
    fill: rbg(242, 247, 250);
    }

    .boundary {
    fill: none;
    stroke: #fff;
    stroke-width: .5px;
    }