bideckerz

@bideckerz·3 public vizzes

Fork of Cheap Tricks for Interaction

This example shows a natural Earth projection world map rendered with SVG, where individual countries appear in light green and turn red on hover. A zoom interaction lets the viewer pan and scale the entire map using the mouse. The code uses d3.geoPath with d3.geoNaturalEarth1 for projections, d3.zoom for interactive transforms, and topojson.feature to convert TopoJSON country boundaries. Country names come from a TSV file joined by ISO numeric codes, and the map background sphere fills blue.

May 19, 2021

Loading thumbnail…

StartOfMap

This example displays a world map using the equirectangular projection, with countries rendered as dark red polygons outlined in black against a light blue ocean sphere. The visualization uses d3.geoPath and d3.geoEquirectangular to project geographic data, while topojson.feature converts the TopoJSON from the world-atlas countries-110m dataset into GeoJSON features. Each country path is appended dynamically to an SVG container as the data loads asynchronously via d3.json.

May 19, 2021

Loading thumbnail…

Map

This example displays a world map rendered as SVG paths, with countries filled in light green against a blue sphere representing the Earth. It uses the `geoNaturalEarth1` projection and `geoPath` from D3 v5 to generate the map geometry, while TopoJSON’s `feature` method extracts country boundaries from the world-atlas 110m dataset. The visualization highlights the geographic layout without interactive features, focusing on static rendering of global landmasses.

May 19, 2021