Skip to content

Instantly share code, notes, and snippets.

@aubergene

aubergene/index.html

Last active December 2, 2016 13:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save aubergene/43a071c46a3413e6bca76edd84e6e63e to your computer and use it in GitHub Desktop.
Save aubergene/43a071c46a3413e6bca76edd84e6e63e to your computer and use it in GitHub Desktop.
Download ZIP
MapsWithoutNZ
Raw
index.html
<!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>
Display the source blob
Display the rendered blob
Raw
world-50m.json
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment