D3 Examples - MapsWithoutNZ

xxxxxxxxxx
 
<!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 = "https://bl.ocks.org/../../data/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>
    