Skip to content

Instantly share code, notes, and snippets.

@mbostock

mbostock/.block

Last active March 1, 2023 04:29
Show Gist options

  • Select an option

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

Select an option

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

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
    View file
    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 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -35,8 +35,8 @@

    </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/topojson/1.6.19/topojson.min.js"></script>
    <script src="//d3js.org/d3.v3.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 4 additions and 2 deletions.
    6 changes: 4 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -35,8 +35,8 @@

    </style>
    <body>
    <script src="http://d3js.org/d3.v3.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/topojson/1.6.19/topojson.min.js"></script>
    <script>

    var width = 960,
    @@ -79,6 +79,8 @@
    .attr("d", path);

    d3.json("/mbostock/raw/4090846/world-50m.json", function(error, world) {
    if (error) throw error;

    g.insert("path", ".graticule")
    .datum(topojson.feature(world, world.objects.land))
    .attr("class", "land")
  4. mbostock revised this gist Mar 20, 2014. 2 changed files with 18 additions and 16 deletions.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    A south polar azimuthal equidistant projection, oriented so that noon is as 12 o'clock, as in [xkcd:1335](http://xkcd.com/1335/). The map updates once a minute.
    A south polar azimuthal equidistant projection, oriented so that noon is as 12 o'clock, as in [xkcd:1335](http://xkcd.com/1335/). The map updates continuously.
    32 changes: 17 additions & 15 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -46,6 +46,7 @@
    .scale(150)
    .translate([width / 2, height / 2])
    .clipAngle(180 - 1e-3)
    .rotate([0, 90])
    .precision(.1);

    var path = d3.geo.path()
    @@ -70,29 +71,30 @@
    .attr("class", "fill")
    .attr("xlink:href", "#sphere");

    svg.append("path")
    var g = svg.append("g");

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

    d3.json("/mbostock/raw/4090846/world-50m.json", function(error, world) {
    svg.insert("path", ".graticule")
    g.insert("path", ".graticule")
    .datum(topojson.feature(world, world.objects.land))
    .attr("class", "land");
    .attr("class", "land")
    .attr("d", path);

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

    var feature = svg.selectAll("path");

    redraw();
    setInterval(redraw, 60000);
    .attr("class", "boundary")
    .attr("d", path);

    function redraw() {
    d3.timer(function() {
    var now = new Date, today = d3.time.day.utc(now);
    projection.rotate([(now - today) / (1000 * 60 * 60 * 24) * 360 - 180, 90]);
    feature.attr("d", path);
    }
    g.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"
    + "rotate(" + ((now - today) / (1000 * 60 * 60 * 24) * 360 - 180) + ")"
    + "translate(" + -width / 2 + "," + -height / 2 + ")");
    });
    });

    d3.select(self.frameElement).style("height", height + "px");
  5. mbostock revised this gist Mar 18, 2014. 2 changed files with 2 additions and 2 deletions.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    A south polar azimuthal equidistant projection, oriented so that noon is as 12 o'clock, as in [xkcd:1335](http://xkcd.com/1335/). The map updates once a second.
    A south polar azimuthal equidistant projection, oriented so that noon is as 12 o'clock, as in [xkcd:1335](http://xkcd.com/1335/). The map updates once a minute.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -86,7 +86,7 @@
    var feature = svg.selectAll("path");

    redraw();
    setInterval(redraw, 1000);
    setInterval(redraw, 60000);

    function redraw() {
    var now = new Date, today = d3.time.day.utc(now);
  6. mbostock revised this gist Feb 26, 2014. 1 changed file with 59 additions and 39 deletions.
    98 changes: 59 additions & 39 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -6,6 +6,33 @@
    background: #fcfcfa;
    }

    .stroke {
    fill: none;
    stroke: #000;
    stroke-width: 3px;
    }

    .fill {
    fill: #fff;
    }

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

    .land {
    fill: #222;
    }

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

    </style>
    <body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    @@ -21,57 +48,50 @@
    .clipAngle(180 - 1e-3)
    .precision(.1);

    var canvas = d3.select("body").append("canvas")
    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);

    var context = canvas.node().getContext("2d");
    svg.append("defs").append("path")
    .datum({type: "Sphere"})
    .attr("id", "sphere")
    .attr("d", path);

    var path = d3.geo.path()
    .projection(projection)
    .context(context);
    svg.append("use")
    .attr("class", "stroke")
    .attr("xlink:href", "#sphere");

    svg.append("use")
    .attr("class", "fill")
    .attr("xlink:href", "#sphere");

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

    d3.json("/mbostock/raw/4090846/world-50m.json", function(error, world) {
    var sphere = {type: "Sphere"},
    graticule = d3.geo.graticule()(),
    land = topojson.feature(world, world.objects.land),
    borders = topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; });
    svg.insert("path", ".graticule")
    .datum(topojson.feature(world, world.objects.land))
    .attr("class", "land");

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

    var feature = svg.selectAll("path");

    redraw();
    setInterval(redraw, 1000);

    function redraw() {
    var now = new Date,
    today = d3.time.day.utc(now);

    var now = new Date, today = d3.time.day.utc(now);
    projection.rotate([(now - today) / (1000 * 60 * 60 * 24) * 360 - 180, 90]);

    context.clearRect(0, 0, width, height);

    context.beginPath();
    path(sphere);
    context.lineWidth = 3;
    context.strokeStyle = "#000";
    context.stroke();
    context.fillStyle = "#fff";
    context.fill();

    context.beginPath();
    path(land);
    context.fillStyle = "#222";
    context.fill();

    context.beginPath();
    path(borders);
    context.lineWidth = .5;
    context.strokeStyle = "#fff";
    context.stroke();

    context.beginPath();
    path(graticule);
    context.lineWidth = .5;
    context.strokeStyle = "rgba(119,119,119,.5)";
    context.stroke();
    feature.attr("d", path);
    }
    });

  7. mbostock revised this gist Feb 26, 2014. 1 changed file with 39 additions and 59 deletions.
    98 changes: 39 additions & 59 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -6,33 +6,6 @@
    background: #fcfcfa;
    }

    .stroke {
    fill: none;
    stroke: #000;
    stroke-width: 3px;
    }

    .fill {
    fill: #fff;
    }

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

    .land {
    fill: #222;
    }

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

    </style>
    <body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    @@ -48,50 +21,57 @@
    .clipAngle(180 - 1e-3)
    .precision(.1);

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

    var graticule = d3.geo.graticule();

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

    svg.append("defs").append("path")
    .datum({type: "Sphere"})
    .attr("id", "sphere")
    .attr("d", path);

    svg.append("use")
    .attr("class", "stroke")
    .attr("xlink:href", "#sphere");

    svg.append("use")
    .attr("class", "fill")
    .attr("xlink:href", "#sphere");
    var context = canvas.node().getContext("2d");

    svg.append("path")
    .datum(graticule)
    .attr("class", "graticule");
    var path = d3.geo.path()
    .projection(projection)
    .context(context);

    d3.json("/mbostock/raw/4090846/world-50m.json", function(error, world) {
    svg.insert("path", ".graticule")
    .datum(topojson.feature(world, world.objects.land))
    .attr("class", "land");

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

    var feature = svg.selectAll("path");
    var sphere = {type: "Sphere"},
    graticule = d3.geo.graticule()(),
    land = topojson.feature(world, world.objects.land),
    borders = topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; });

    redraw();
    setInterval(redraw, 1000);

    function redraw() {
    var now = new Date, today = d3.time.day.utc(now);
    var now = new Date,
    today = d3.time.day.utc(now);

    projection.rotate([(now - today) / (1000 * 60 * 60 * 24) * 360 - 180, 90]);
    feature.attr("d", path);

    context.clearRect(0, 0, width, height);

    context.beginPath();
    path(sphere);
    context.lineWidth = 3;
    context.strokeStyle = "#000";
    context.stroke();
    context.fillStyle = "#fff";
    context.fill();

    context.beginPath();
    path(land);
    context.fillStyle = "#222";
    context.fill();

    context.beginPath();
    path(borders);
    context.lineWidth = .5;
    context.strokeStyle = "#fff";
    context.stroke();

    context.beginPath();
    path(graticule);
    context.lineWidth = .5;
    context.strokeStyle = "rgba(119,119,119,.5)";
    context.stroke();
    }
    });

  8. mbostock revised this gist Feb 26, 2014. 1 changed file with 0 additions and 0 deletions.
    Binary file added thumbnail.png
    View file
    Loading
    Sorry, something went wrong. Reload?
    Sorry, we cannot display this file.
    Sorry, this file is invalid so it cannot be displayed.
  9. mbostock revised this gist Feb 26, 2014. 2 changed files with 16 additions and 11 deletions.
    2 changes: 1 addition & 1 deletion README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1 +1 @@
    A south polar azimuthal equidistant projection, oriented so that noon is as 12 o'clock, as in [xkcd:1335](http://xkcd.com/1335/).
    A south polar azimuthal equidistant projection, oriented so that noon is as 12 o'clock, as in [xkcd:1335](http://xkcd.com/1335/). The map updates once a second.
    25 changes: 15 additions & 10 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -40,15 +40,12 @@
    <script>

    var width = 960,
    height = 960,
    now = new Date,
    today = d3.time.day.utc(now);
    height = 960;

    var projection = d3.geo.azimuthalEquidistant()
    .scale(150)
    .translate([width / 2, height / 2])
    .clipAngle(180 - 1e-3)
    .rotate([(now - today) / (1000 * 60 * 60 * 24) * 360 - 180, 90])
    .precision(.1);

    var path = d3.geo.path()
    @@ -75,19 +72,27 @@

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

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

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

    var feature = svg.selectAll("path");

    redraw();
    setInterval(redraw, 1000);

    function redraw() {
    var now = new Date, today = d3.time.day.utc(now);
    projection.rotate([(now - today) / (1000 * 60 * 60 * 24) * 360 - 180, 90]);
    feature.attr("d", path);
    }
    });

    d3.select(self.frameElement).style("height", height + "px");
  10. mbostock created this gist Feb 26, 2014.
    1 change: 1 addition & 0 deletions README.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    A south polar azimuthal equidistant projection, oriented so that noon is as 12 o'clock, as in [xkcd:1335](http://xkcd.com/1335/).
    95 changes: 95 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,95 @@
    <!DOCTYPE html>
    <meta charset="utf-8">
    <style>

    body {
    background: #fcfcfa;
    }

    .stroke {
    fill: none;
    stroke: #000;
    stroke-width: 3px;
    }

    .fill {
    fill: #fff;
    }

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

    .land {
    fill: #222;
    }

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

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

    var width = 960,
    height = 960,
    now = new Date,
    today = d3.time.day.utc(now);

    var projection = d3.geo.azimuthalEquidistant()
    .scale(150)
    .translate([width / 2, height / 2])
    .clipAngle(180 - 1e-3)
    .rotate([(now - today) / (1000 * 60 * 60 * 24) * 360 - 180, 90])
    .precision(.1);

    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("defs").append("path")
    .datum({type: "Sphere"})
    .attr("id", "sphere")
    .attr("d", path);

    svg.append("use")
    .attr("class", "stroke")
    .attr("xlink:href", "#sphere");

    svg.append("use")
    .attr("class", "fill")
    .attr("xlink:href", "#sphere");

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

    d3.json("/mbostock/raw/4090846/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);
    });

    d3.select(self.frameElement).style("height", height + "px");

    </script>