One of the few cases where you want a counterclockwise polygon because the ocean covers greater than one hemisphere. The example demonstrates improved antimeridian stitching in TopoJSON 1.4.1.
| build | |
| node_modules |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| background: #fcfcfa; | |
| } | |
| </style> | |
| <body> | |
| <script src="//d3js.org/d3.v3.min.js"></script> | |
| <script src="//d3js.org/topojson.v1.min.js"></script> | |
| <script> | |
| var width = 960, | |
| height = 960, | |
| speed = 1e-2, | |
| start = Date.now(); | |
| var sphere = {type: "Sphere"}; | |
| var projection = d3.geo.orthographic() | |
| .scale(width / 2.2) | |
| .clipAngle(90) | |
| .translate([width / 2, height / 2]) | |
| .precision(.5); | |
| var graticule = d3.geo.graticule(); | |
| var canvas = d3.select("body").append("canvas") | |
| .attr("width", width) | |
| .attr("height", height); | |
| var context = canvas.node().getContext("2d"); | |
| var path = d3.geo.path() | |
| .projection(projection) | |
| .context(context); | |
| d3.json("topo.json", function(error, topo) { | |
| if (error) throw error; | |
| var ocean = topojson.feature(topo, topo.objects.ocean), | |
| grid = graticule(); | |
| d3.timer(function() { | |
| projection.rotate([speed * (Date.now() - start), -15]); | |
| context.clearRect(0, 0, width, height); | |
| context.beginPath(); | |
| path(sphere); | |
| context.fillStyle = "#fff"; | |
| context.fill(); | |
| context.beginPath(); | |
| path(grid); | |
| context.lineWidth = .5; | |
| context.strokeStyle = "#ddd"; | |
| context.stroke(); | |
| context.beginPath(); | |
| path(ocean); | |
| context.fillStyle = "rgba(70,130,180,.5)"; | |
| context.fill(); | |
| context.beginPath(); | |
| path(sphere); | |
| context.lineWidth = 1.5; | |
| context.strokeStyle = "#000"; | |
| context.stroke(); | |
| }); | |
| }); | |
| d3.select(self.frameElement).style("height", height + "px"); | |
| </script> |
| all: topo.json | |
| build/ne_%_ocean.zip: | |
| mkdir -p build | |
| curl -o $@ --raw 'http://www.nacis.org/naturalearth/$*/physical/ne_$*_ocean.zip' | |
| build/ne_%.shp: build/ne_%.zip | |
| unzip -d build $< | |
| touch $@ | |
| topo.json: build/ne_110m_ocean.shp | |
| node_modules/.bin/topojson \ | |
| --no-force-clockwise \ | |
| -q 1e5 \ | |
| -- \ | |
| ocean=build/ne_110m_ocean.shp \ | |
| > $@ |
| { | |
| "name": "anonymous", | |
| "version": "0.0.1", | |
| "private": true, | |
| "devDependencies": { | |
| "topojson": "1" | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment