Skip to main content
SimilarExport ZIP
100%

Fork of Cheap Tricks for Interaction

✓ Published0🌍 Public
EErico Vasconcelos
Last edited Apr 3, 2021
Created on Apr 3, 2021

This example shows an interactive world map rendered with SVG paths. It presents countries in light green against a blue spherical background, and hovering over a country turns it red. The visualization uses a D3 geoNaturalEarth1 projection with a geoPath generator to draw continents from a world-atlas TopoJSON dataset. The code imports from d3.js v5 and TopoJSON, and it handles zooming and panning through D3’s zoom interaction, which applies a transform to the map group on zoom events.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Cheap Tricks for Interaction

This example shows an interactive world map rendered in SVG using the natural Earth projection. Users can pan and zoom by dragging or scrolling, with the viewport transform applied to a group element. Country boundaries and names come from world-atlas TopoJSON and TSV data. The visualization uses d3.geoPath for geographic paths, d3.zoom for interaction, and CSS hover states that turn countries red. A sphere outline and background fill complete the globe-like appearance.

Lleongtini
96% match
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
96% 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
95% 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
95% match
Loading thumbnail…

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.

Bbideckerz
95% match
Loading thumbnail…

Fork of Cheap Tricks for Interraction

This example displays an interactive world map where each country is rendered as a green, stroked SVG path and highlighted in red on hover. The map uses a natural Earth projection and loads country boundaries and ISO ID-to-name mappings from the world-atlas package. It implements scroll-wheel zooming via d3.zoom, with the zoom transform applied to a group element. The visualization demonstrates the d3.geoPath generator, TopoJSON feature extraction, and event-driven hover styling through CSS.

Ooptimizeresume
95% match
Loading thumbnail…

Fork of Cheap Tricks for Interaction

This example shows a world map with countries rendered in light green, where clicking a country turns it red, and users can zoom and pan the view. It uses an equirectangular-like natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to draw SVG paths from TopoJSON data loaded from the world-atlas package. Country names come from a TSV file, and a `d3.zoom` handler applies transforms to the map group. A spherical background and active-state styling complete the interactive visualization.

Ffrozengem397
95% 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
95% match