Skip to main content
SimilarExport ZIP
100%

Cheap tricks for interaction

✓ Published0🌍 Public
Nntds12
Last edited Mar 24, 2020
Created on Mar 24, 2020

A geographic world map of countries in light green on a blue sphere uses D3’s `geoNaturalEarth1` projection and `geoPath` to render vector paths from the TopoJSON `world-atlas` dataset. The visualization shows how hover interaction (CSS `.country:hover`) and a D3 `zoom` behavior (with `event.transform`) provide simple pan and zoom controls. The `tsv` data joins ISO numeric codes to country names, which appear as tooltips via `append('title')`.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Cheap Tricks for Interaction

A world map rendered in SVG shows country borders in light green on a blue sphere, with hover highlighting in red and zoom-and-pan interaction via `d3.zoom`. The visualization uses `d3.geoNaturalEarth1` and `d3.geoPath` to project geographic data from TopoJSON, with country names from a TSV file. Hover tooltips appear through SVG `title` elements. The code loads data from the world-atlas dataset and applies a `g` transform on zoom events.

Ggabrielribeirob
95% match
Loading thumbnail…

Cheap tricks for interaction

This example shows a world map rendered with D3’s `geoNaturalEarth1` projection and `geoPath`, where hovering over any country turns it red. It uses TopoJSON data from the `world-atlas` package, joined with a TSV file to add country names via `iso_n3` IDs. The map includes a blue sphere background, and each country’s `<path>` element contains a `<title>` child for tooltips, enabling interaction through CSS `:hover` styling.

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

Cheap Tricks for Interaction

A world map rendered with SVG paths displays countries in light green against a blue sphere, with red highlighting on hover. The visualization uses D3 v5’s geoNaturalEarth1 projection and geoPath to draw geographic features from TopoJSON world-atlas data, while country names come from a TSV file. Pan and zoom interaction is implemented via d3.zoom, applying transforms to a group element. Tooltips are provided by SVG `<title>` elements showing each country’s name.

Ggcappadaniel
94% match
Loading thumbnail…

Cheap tricks for interaction

A world map rendered with D3's geoNaturalEarth1 projection presents countries in light green against a blue sphere. The visualization loads country boundaries from the world-atlas TopoJSON and TSV files, using d3.geoPath to generate SVG paths. Interaction is handled via D3's zoom function, which applies a scale and translate transform to the map group on zoom events, while a CSS :hover rule turns countries red when moused over.

RRiccardo Pressiani
94% match
Loading thumbnail…

Cheap Tricks for Interaction

This example shows a world map highlighting countries in light green on a blue sphere, with a red hover effect on individual countries and zoom-and-pan interaction. It uses D3 v5 with d3.geoNaturalEarth1 projection, d3.geoPath, and d3.zoom to enable the viewport transformations. Country boundaries come from the World Atlas TopoJSON dataset, while country names are matched via the accompanying TSV file. The map renders as SVG, with hover tooltips provided by native `<title>` elements.

Tthanhtrant219
94% match
Loading thumbnail…

Cheap Tricks for Interaction

This example displays a world map rendered as an SVG using a natural Earth projection, with countries colored light green on a blue sphere. Hovering over any country turns it red, and the entire map can be panned and zoomed. The visualization loads TopoJSON world data and a TSV file of country names from the world-atlas package, then creates map paths with `d3.geoPath`. Zoom interaction is handled through `d3.zoom` and event transforms, while hover styling is applied via CSS on the `.country` class, with tooltips provided by SVG `<title>` elements.

MMukund Khandelwal
94% match
Loading thumbnail…

Cheap Tricks for Interaction

This example shows a world map with country boundaries rendered in light green on a dark blue sphere, using d3.geoNaturalEarth1 and d3.geoPath. Hovering over a country turns it red, revealing its name via SVG title elements from world-atlas TSV data. Pan and zoom interactions are implemented with d3.zoom, which applies a transform to the map’s parent group element. The visualization uses topojson to parse the countries-50m.json TopoJSON file.

Ddaigokawabe
94% match