Cheap MAAAAAP

100%

✓ Published1🌍 Public

Last edited Oct 14, 2019

Created on Sep 3, 2019

Forked from MAAAAAP

This example displays an interactive world map rendered in SVG, with each country filled in dark green and a natural Earth projection. The visualization uses D3 v5's `geoNaturalEarth1` and `geoPath` to project geographic data from the world-atlas TopoJSON, retrieved via `json()`. Users can pan and zoom the map using D3's `zoom` behavior, which applies transform attributes to the map group. Hovering over a country turns it red, and a tooltip showing the country name uses D3's `title` element.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

MAAAAAP

This example shows a world map rendered with a natural Earth projection. Countries are drawn as individual paths filled in dark green, with a blue sphere representing the globe and black, semi-transparent country borders. The visualization uses D3 v5’s `geoNaturalEarth1` and `geoPath` to project and trace geographic features, while TopoJSON’s `feature` API extracts country boundaries from the world-atlas dataset. Data loads asynchronously from a CDN, and the final SVG is rendered with no interactivity.

Vvladvaculin

88% match

Loading thumbnail…

Make a Map: Adding Cheap Tricks

This example displays a world map using the Natural Earth projection, with countries rendered as green SVG paths with black borders that turn red on hover. It loads geographic data from the world-atlas package—a TopoJSON file for country boundaries and a TSV file for country names, which are merged into a lookup object. The visualization uses D3’s `geoPath` and `geoNaturalEarth1` to generate the map’s geometry, complemented by a dark blue background sphere. Pan and zoom interactions are enabled through D3’s `zoom` event, which transforms the map group accordingly.

Bbprokopowicz

86% match

Loading thumbnail…

Cheap Tricks for World Map

This example demonstrates a world map rendered with D3's geo projections, using the `d3.geoNaturalEarth1` projection and `d3.geoPath` to draw country polygons. The map displays landmasses in light green with a dark blue ocean sphere, and countries highlight red on hover via a CSS `:hover` rule. The code loads geographic data from the `world-atlas` package, processes it with the `topojson` library's `feature` function, and applies `d3.zoom` to allow interactive pan and zoom through SVG transforms. The visualization is built with D3 v7 and rendered as SVG, with styling defined in a separate `styles.css` file.

EEngine194

85% match

Loading thumbnail…

Cheap tricks interactions _ example!

This example displays an interactive world map using a natural Earth projection, with countries rendered as SVG paths and colored light green. The visualization supports zooming and panning via d3.zoom, and hovering over a country highlights it in red. It loads geographic data from the world-atlas TopoJSON and TSV files, merging country names via a reduce operation. The code uses d3.geoPath, d3.geoNaturalEarth1, and topojson.feature to project and draw the map.

KKumhee

85% match

Loading thumbnail…

Cheap tricks for interaction

This example displays a world map using a natural Earth projection, with countries rendered as green SVG paths with black strokes against a dark blue sphere. Hovering over any country turns it red, providing a simple interaction cue. The visualization is built with D3 v5, using `d3.geoPath` and `d3.geoNaturalEarth1` for geographic projection, while geographic data comes from the TopoJSON world-atlas countries-110m dataset, which is parsed with `topojson.feature` and loaded via `d3.json`.

Eestulo

84% match

Loading thumbnail…

Cheap tricks for interaction

This example shows a world map where hovering over a country turns it red, with country names available as tooltips. The map uses a Natural Earth projection and renders with SVG paths. The code loads world-atlas TopoJSON and TSV data, then uses `d3.geoPath` and `d3.geoNaturalEarth1` to draw countries. It also demonstrates a rudimentary zoom interaction via `d3.zoom`, though the zoom handler only logs to the console. The visualization relies on d3 v5 and d3-geo-projection for the projection.

YYifei Liu

84% match

Loading thumbnail…

Cheap Tricks for Interaction

This example shows a world map rendered with D3’s `geoNaturalEarth1` projection and `geoPath`, where each country is colored green and turns yellow on hover. Users can pan and zoom the entire map via D3’s `zoom` behavior, which applies an SVG transform to a group element. The map data comes from World Atlas TopoJSON (50m), with country names matched from a TSV file and displayed as native SVG `<title>` tooltips. Styling is handled through CSS classes, with the sphere filled in blue.

Ttharanitaran

84% match

Loading thumbnail…

Cheap Tricks

This visualization displays a world map using a natural Earth projection, with countries filled in light green and ocean areas in blue. Hovering over a country turns it red. The map is rendered as SVG paths generated from TopoJSON world-atlas data, with country names loaded from a TSV file. The implementation uses d3.geoPath and d3.geoNaturalEarth1 for the projection, d3.zoom for panning and zooming, and the topojson library to convert geographic data into features.

Ccpsshan

84% match