d3 map experiment with NZTM

100%

d3 map experiment with NZTM

✓ Published0🌍 Public

Last edited May 21, 2017

Created on May 20, 2017

This experiment uses D3 v4 to render New Zealand’s census ward boundaries as a static SVG map. The geographic data is sourced from Stats NZ, converted from the NZTM projection (EPSG:2193) into a quantized TopoJSON format via a Makefile-driven pipeline, then displayed with a null projection so coordinates are used as-is. The map uses a light grey fill for land areas and omits internal boundaries, showing only the outer ward outlines. The code includes a commented-out geoTransform for potential scaling/zooming and a commented-out boundary mesh, suggesting the visualization focuses on the raw spatial layout of New Zealand's wards.

AI-generated description

ISC Licensed

Similar vizzes

Loading thumbnail…

Fork of NEW ZEALAND Country

This interactive map displays Japan’s districts, rendered as colored SVG paths that highlight region names on hover via tooltips. Built with D3 v4 and TopoJSON, it uses a Mercator projection and a custom `d3.geoTransform` to apply topology-preserving simplification controlled by a range slider, redrawing the map dynamically. The initial data comes from the deldersveld TopoJSON repository, with fill colors changing from LightSkyBlue to Maroon on mouseout.

SSheela2930

75% match

Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map rendered as SVG paths, with countries filled in teal against a blue sphere backdrop using an equal-earth projection. It loads geographic data from the world-atlas TopoJSON dataset, converts it to GeoJSON with the `feature` function from Topojson, and projects it through `d3.geoPath` combined with the `geoEqualEarth` projection from d3-geo-projection. The visualization demonstrates a minimal, clean map-making workflow using D3 v5.

KKurt J Nilsen

73% match

Loading thumbnail…

Let's make a map with D3.js!

This example renders a world map showing country boundaries as light green filled paths on a steel blue sphere, using a geographic equal Earth projection. The map is drawn entirely as SVG with D3 v5 and TopoJSON, loading the world-atlas 110m dataset from unpkg. The code defines a path generator via d3.geoPath and d3.geoEqualEarth, appends a spherical outline, then converts the TopoJSON topology to GeoJSON features using topojson.feature before binding them to path elements.

JJefferson Abreu

73% match

Loading thumbnail…

D3 World Map

A world map rendered in black with white borders, built with D3.js and TopoJSON. The visualization displays country boundaries as SVG paths using a Mercator projection, loading geographic data from a world-110m2.json TopoJSON file. Interactive zoom and pan are implemented via D3's zoom behavior, allowing users to explore the map by scaling and translating the rendered countries. The minimal black-and-white styling keeps the focus on geography while the zoom functionality adds basic interactivity.

Aangelferro

73% match

Loading thumbnail…

Let's make a MAP with D3.js!

This example displays a world map rendered as an SVG, with countries filled in light green and the ocean depicted as a sky-blue sphere. It uses D3 v5 and TopoJSON to load world-atlas data at 110m resolution, then applies the `d3.geoNaturalEarth1` projection and `d3.geoPath` to generate country boundaries. The map also draws a background sphere path, and country strokes are semi-transparent black. The code relies on `topojson.feature` to convert TopoJSON topology into GeoJSON features for rendering.

Ccledevoute

73% match

Loading thumbnail…

Let's make a map with D3.js!

This example renders a world map using D3.js and TopoJSON. It draws country boundaries as SVG paths projected with a Mercator projection using `d3.geoMercator` and `d3.geoPath`. The map loads geographic data from the world-atlas countries-110m JSON file, converts TopoJSON to GeoJSON with the `feature` function, and appends each country path to the SVG. The visualization demonstrates a basic choropleth-free mapping workflow with styled countries and a blue sphere background.

TTrustPaul

73% match

Loading thumbnail…

Let's make a map with D3.js!

This example uses D3.js and TopoJSON to generate an orthographic projection map of the world. It loads world country boundaries from a JSON file hosted on unpkg, converts the TopoJSON data into geographic features, and renders each country as a green SVG path with a subtle black stroke. The visualization employs `d3.geoOrthographic` and `d3.geoPath` to create the projection, with the dark blue background and minimal styling coming from the linked CSS.

Nnouralkhoury

73% match

Loading thumbnail…

Let's make a map with D3.js!

A world map rendered in SVG shows country boundaries as light green paths against a dark blue sphere, using a Natural Earth projection. The code loads world-atlas TopoJSON data from unpkg, converts it to GeoJSON with `topojson.feature`, and draws each country with `d3.geoPath`. The sphere outline is generated from a projected GeoJSON sphere object. D3 v5 handles the asynchronous JSON loading and DOM selection.

NNecklessCage

73% match