Skip to main content
SimilarExport ZIP
100%

Fork of Cheap Tricks for Interaction

✓ Published0🌍 Public
IIan Mac Moore
Last edited Jan 7, 2024
Created on Jan 7, 2024

This example shows an interactive world map that highlights countries in red on hover, with a blue ocean background. The visualization uses the `d3.geoNaturalEarth1` projection and `d3.geoPath` to render country boundaries from TopoJSON data, while a separate TSV file provides country names for tooltips. The map supports zooming and panning through the `d3.zoom` interaction module, which applies transform updates to the SVG group containing the paths. Countries are styled with CSS classes, and hover effects change their fill color using the `.country:hover` selector.

AI-generated description
MIT Licensed

Similar vizzes

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

Fork of Cheap Tricks for Interaction

This interactive world map displays country names as tooltips and highlights nations in red on hover. The visualization uses a Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to render SVG paths from TopoJSON world-atlas data, with country names joined from a TSV file. Zooming and panning are enabled through `d3.zoom`, which applies transforms to the map group. The styling, including the blue ocean sphere and green countries, is defined in CSS with hover effects.

Aaruna-rajeswari
95% 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
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 a zoomable world map with country boundaries, where hovering over any country highlights it in red. It renders the map as SVG paths using `d3.geoPath` with a `geoNaturalEarth1` projection, and enables pan-and-zoom interaction through `d3.zoom`. Country names come from a TSV file joined to TopoJSON geometry from the world-atlas dataset, while hover styling relies on CSS.

Kklumng
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 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.

EErico Vasconcelos
94% match