Skip to main content
SimilarExport ZIP
100%

Fork of Cheap Tricks for Interaction

✓ Published0🌍 Public
YYeeleng Scott Vang
Last edited Jul 7, 2023
Created on Jul 7, 2023

This example shows an interactive world map built with D3.js that uses a natural Earth projection to display country boundaries. The map supports zooming and panning through D3’s zoom behavior, while hovering over any country highlights it in red. The visualization loads geographic data from the world-atlas TopoJSON dataset, pairing it with a TSV file to map country names via ISO numeric codes. Tooltips appear on hover, generated by appending SVG title elements. The rendering uses d3.geoPath, d3.geoNaturalEarth1, and d3.zoom for interaction.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Cheap Tricks for Interaction

This example presents an interactive world map using a natural Earth projection, with countries colored light green and the sphere filled blue. Hovering over a country turns it red and reveals its name via a tooltip, while users can zoom and pan by dragging. The visualization is built with D3 v5, using `d3.geoPath` and `d3.geoNaturalEarth1` for rendering the map, and `d3.zoom` for interaction. It loads geographic data from the world-atlas package (JSON and TSV files) and leverages the TopoJSON library to convert topology into features.

MMatthew Talty Colvard
95% match
Loading thumbnail…

Fork of Cheap Tricks for Interaction

This example shows an interactive world map built with D3.js, where hovering over any country turns it red and displays its name as a tooltip. The visualization renders a geo-projection sphere and country boundaries as SVG paths, using the `d3.geoNaturalEarth1` projection and `d3.geoPath` to generate the map geometry. The globe can be zoomed and panned via the `d3.zoom` API, which applies a transform to the grouped map elements. Country names come from a TSV data file joined with GeoJSON topology from the world-atlas package, processed with the topojson `feature` function.

Kkindermannhannah
94% match
Loading thumbnail…

Fork of Cheap Tricks for Interaction

This example shows an interactive world map with selectable countries, where hovering over a country reveals its name as a tooltip and highlights it in red. The map uses a natural Earth projection rendered as SVG paths, with a blue sphere background. It loads geographic data from the World Atlas TopoJSON and TSV files, joining country names by ID. The implementation relies on D3 v5 APIs including d3.geoPath, d3.geoNaturalEarth1, d3.zoom, and d3.json, along with a zoom transform applied to the map group for panning and scaling.

Llinyyyyyyyyy
94% match
Loading thumbnail…

Fork of Cheap Tricks for Interaction

This example shows an interactive world map with natural-earth projection, where countries appear as light green regions on a blue sphere and turn red on hover. Users can pan and zoom the map using mouse or touch gestures. Built with D3 v5 and TopoJSON, the visualization loads geographic data from the world-atlas repository, uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` for rendering, and implements zoom via `d3.zoom`. Country names are matched from a TSV file using ISO numeric codes.

LLeiHuang-statistician
94% match
Loading thumbnail…

Fork of Cheap Tricks for Interaction

This example shows an interactive world map that highlights countries in red on hover and displays country names as tooltips, with zoom and pan capabilities through the d3.zoom behavior. The visualization uses d3.geoNaturalEarth1 projection with d3.geoPath to render geographic features, sourcing country boundaries from the world-atlas TopoJSON dataset and matching names via TSV data. The SVG rendering includes a styled sphere background and country paths, with zoom transforms applied to a group element. Country names appear through SVG title elements appended to each path.

NNikkko1
94% match
Loading thumbnail…

Fork of Cheap Tricks for Interaction

This example shows a world map with interactive pan and zoom capabilities, using a natural Earth projection rendered as SVG paths. The map displays country boundaries with light green fill, which turns red on hover, and includes tooltips showing country names from the world-atlas TSV data. The code uses d3.geoNaturalEarth1, d3.geoPath, and d3.zoom to handle the projection and view transforms, while d3.json and d3.tsv load the TopoJSON geometry and name mappings. The sphere background is styled blue, and the map supports fluid zooming through the d3.zoom event handler.

SSg2041
94% match
Loading thumbnail…

Fork of Cheap Tricks for Interaction

This example shows a world map with interactive pan and zoom capabilities, using a natural Earth projection rendered as SVG paths. The map displays country boundaries with light green fill, which turns red on hover, and includes tooltips showing country names from the world-atlas TSV data. The code uses d3.geoNaturalEarth1, d3.geoPath, and d3.zoom to handle the projection and view transforms, while d3.json and d3.tsv load the TopoJSON geometry and name mappings. The sphere background is styled blue, and the map supports fluid zooming through the d3.zoom event handler.

SSg2041
94% match
Loading thumbnail…

Fork of Cheap Tricks for Interaction

This interactive map displays world countries on a natural Earth projection, with a blue sphere background and light green landmasses that turn red on hover. Built with d3.geoPath and d3.geoNaturalEarth1, it loads geographic data from the world-atlas package, combining TopoJSON country boundaries with TSV names. The visualization implements pan and zoom functionality through d3.zoom, updating the SVG group’s transform on zoom events. Country names appear as tooltips via SVG title elements.

Mmavercikalvin
94% match