Last active
December 2, 2016 13:13
-
-
Save aubergene/43a071c46a3413e6bca76edd84e6e63e to your computer and use it in GitHub Desktop.
Revisions
-
aubergene revised this gist
Dec 2, 2016 . 2 changed files with 0 additions and 0 deletions.There are no files selected for viewing
LoadingSorry, something went wrong. Reload?Sorry, we cannot display this file.Sorry, this file is invalid so it cannot be displayed.LoadingSorry, something went wrong. Reload?Sorry, we cannot display this file.Sorry, this file is invalid so it cannot be displayed. -
Dec 2, 2016 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -0,0 +1,169 @@ <!DOCTYPE html> <html> <head> <title>MapsWithoutNZ</title> <style type="text/css"> .map { margin: 16px; border: 1px solid #eee; position: relative; width: 450px; } a { position: absolute; top: 10px; right: 10px; font-size: 10px; font-family: sans-serif; } .nz { opacity: 0; fill: #c00; } svg:hover .nz { opacity: 1; } </style> </head> <body> <script src="https://d3js.org/d3.v4.min.js"></script> <script src="https://d3js.org/d3-geo-projection.v1.min.js"></script> <script src="//d3js.org/topojson.v1.min.js"></script> <script type="text/javascript"> var projections = [ { name: 'Airy', p: d3.geoAiry() }, { name: 'Aitoff', p: d3.geoAitoff() }, { name: 'Albers', p: d3.geoAlbers() }, { name: 'August', p: d3.geoAugust() }, { name: 'AzimuthalEqualArea', p: d3.geoAzimuthalEqualArea() }, { name: 'AzimuthalEquidistant', p: d3.geoAzimuthalEquidistant() }, { name: 'Baker', p: d3.geoBaker() }, { name: 'Boggs', p: d3.geoBoggs() }, { name: 'Bonne', p: d3.geoBonne() }, { name: 'Bottomley', p: d3.geoBottomley() }, { name: 'Bromley', p: d3.geoBromley() }, { name: 'ChamberlinAfrica', p: d3.geoChamberlinAfrica() }, { name: 'Collignon', p: d3.geoCollignon() }, { name: 'ConicEqualArea', p: d3.geoConicEqualArea() }, { name: 'ConicEquidistant', p: d3.geoConicEquidistant() }, { name: 'Craster', p: d3.geoCraster() }, { name: 'CylindricalEqualArea', p: d3.geoCylindricalEqualArea() }, { name: 'CylindricalStereographic', p: d3.geoCylindricalStereographic() }, { name: 'Eckert1', p: d3.geoEckert1() }, // { name: 'Eckert2', p: d3.geoEckert2() }, // { name: 'Eckert3', p: d3.geoEckert3() }, // { name: 'Eckert4', p: d3.geoEckert4() }, // { name: 'Eckert5', p: d3.geoEckert5() }, // { name: 'Eckert6', p: d3.geoEckert6() }, { name: 'Eisenlohr', p: d3.geoEisenlohr() }, { name: 'Equirectangular', p: d3.geoEquirectangular() }, { name: 'Fahey', p: d3.geoFahey() }, { name: 'Foucaut', p: d3.geoFoucaut() }, { name: 'Ginzburg4', p: d3.geoGinzburg4() }, // { name: 'Ginzburg5', p: d3.geoGinzburg5() }, // { name: 'Ginzburg6', p: d3.geoGinzburg6() }, // { name: 'Ginzburg8', p: d3.geoGinzburg8() }, // { name: 'Ginzburg9', p: d3.geoGinzburg9() }, { name: 'Gringorten', p: d3.geoGringorten() }, { name: 'Guyou', p: d3.geoGuyou() }, { name: 'Hammer', p: d3.geoHammer() }, { name: 'Hill', p: d3.geoHill() }, { name: 'Homolosine', p: d3.geoHomolosine() }, { name: 'Kavrayskiy7', p: d3.geoKavrayskiy7() }, { name: 'Lagrange', p: d3.geoLagrange() }, { name: 'Larrivee', p: d3.geoLarrivee() }, { name: 'Laskowski', p: d3.geoLaskowski() }, { name: 'Loximuthal', p: d3.geoLoximuthal() }, { name: 'Mercator', p: d3.geoMercator() }, { name: 'Miller', p: d3.geoMiller() }, { name: 'Mollweide', p: d3.geoMollweide() }, { name: 'MtFlatPolarParabolic', p: d3.geoMtFlatPolarParabolic() }, { name: 'MtFlatPolarQuartic', p: d3.geoMtFlatPolarQuartic() }, { name: 'MtFlatPolarSinusoidal', p: d3.geoMtFlatPolarSinusoidal() }, { name: 'NaturalEarth', p: d3.geoNaturalEarth() }, { name: 'NellHammer', p: d3.geoNellHammer() }, { name: 'Patterson', p: d3.geoPatterson() }, { name: 'Polyconic', p: d3.geoPolyconic() }, { name: 'RectangularPolyconic', p: d3.geoRectangularPolyconic() }, { name: 'Robinson', p: d3.geoRobinson() }, { name: 'Sinusoidal', p: d3.geoSinusoidal() }, { name: 'SinuMollweide', p: d3.geoSinuMollweide() }, { name: 'Stereographic', p: d3.geoStereographic() }, { name: 'Times', p: d3.geoTimes() }, { name: 'TransverseMercator', p: d3.geoTransverseMercator() }, { name: 'VanDerGrinten', p: d3.geoVanDerGrinten() }, // { name: 'VanDerGrinten2', p: d3.geoVanDerGrinten2() }, // { name: 'VanDerGrinten3', p: d3.geoVanDerGrinten3() }, // { name: 'VanDerGrinten4', p: d3.geoVanDerGrinten4() }, { name: 'Wagner4', p: d3.geoWagner4() }, // { name: 'Wagner6', p: d3.geoWagner6() }, // { name: 'Wagner7', p: d3.geoWagner7() }, { name: 'Wiechel', p: d3.geoWiechel() }, { name: 'Winkel3', p: d3.geoWinkel3() } ] projections = projections.slice(0, 3) var width = 450, height = 250, margin = 4 var path = d3.geoPath() var url = "http://bl.ocks.org/mbostock/raw/4090846/world-50m.json" // var url = "world-50m.json" d3.json(url, function(error, world) { console.log(world) var land = topojson.feature(world, world.objects.land) var notNZ = topojson.merge(world, world.objects.countries.geometries.filter(function(d) { return d.id !== 554 })) var NZ = topojson.merge(world, world.objects.countries.geometries.filter(function(d) { return d.id == 554 })) var maps = d3.select('body').selectAll('div') .data(projections) .enter() .append('div') .attr('class', 'map') var svg = maps.append('svg') .attr('width', width) .attr('height', height) maps.append('a') .attr('href', function(d) { return 'https://github.com/d3/d3-geo-projection#geo' + d.name }) .attr('target', '_blank') .text(function(d) { return d.name }) svg.append('path') .attr('d', function(d, i) { d.p.fitExtent([[10, 10], [width-margin*2, height-margin*2]], land) path.projection(d.p) return path(notNZ) }) svg.append('path') .attr('class', 'nz') .attr('d', function(d) { path.projection(d.p) return path(NZ) }) }) </script> </body> </html>