MapsWithoutNZ by aubergene

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 = "//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>