Skip to main content
SimilarExport ZIP
100%

Tricks for Interaction

✓ Published1🌍 Public
MMukund Khandelwal
Last edited Sep 25, 2018
Created on Sep 25, 2018

This visualization displays a world map with countries colored light green on a blue sphere, using D3 v5 and topojson. It shows geographic boundaries and continent information from the World Atlas dataset. The map supports zooming and panning through D3’s zoom and event APIs. Hovering a country triggers a CSS hover effect turning it red and displaying a tooltip with the country name and continent, built using d3.geoPath and d3.geoNaturalEarth1 projections.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Tricks for Interaction

This visualization displays a zoomable, natural Earth projection map with countries colored light green. Users can pan and zoom the map using the d3.zoom behavior, which applies a transform to the SVG group containing all geographic paths. The map data comes from the world-atlas TopoJSON files, with country names joined from TSV data. Hovering over any country turns it red, implemented through CSS :hover rules. The visualization uses d3.geoPath, d3.geoNaturalEarth1, and the topojson.feature API to render the geographic features.

Mmla341
93% match
Loading thumbnail…

Cheap tricks for interaction

This visualization shows a world map where individual countries appear in light green against a blue ocean sphere, with hover interactions highlighting each country in red. Built with D3 v6 and TopoJSON, it uses a natural Earth projection to render geographic features from the World Atlas countries dataset. The map supports pan and zoom through D3’s zoom behavior, which applies SVG transforms to the grouped country paths. Tooltips display country names via SVG title elements, while CSS hover rules trigger the color change.

OOleg
91% match
Loading thumbnail…

Cheap Tricks for Interaction

This interactive map displays world countries colored in light green against a blue sphere, with hover highlighting in red. Built with D3.js v5 and topojson, it uses `d3.geoPath` with the `geoNaturalEarth1` projection to render geographic features. The map background includes a graticule sphere, and zooming is handled through `d3.zoom` with a transform event. Country names are loaded from a world-atlas TSV file and displayed as tooltips via SVG `<title>` elements.

JJuyeonee
91% 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
91% 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
90% 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
90% match
Loading thumbnail…

Tricks for Interaction

This example shows an interactive world map that supports pan and zoom navigation. The visualization renders a natural Earth projection using SVG paths, with each country drawn in light green and outlined in black. Hovering over a country changes its fill color to red, while a tooltip displaying the country name appears. The implementation uses D3 v5 APIs including `d3.geoNaturalEarth1`, `d3.geoPath`, and `d3.zoom`. Country boundaries come from the world-atlas TopoJSON dataset, joined with names from a TSV file. User interactions are handled by the zoom behavior, which applies SVG transform attributes to the map group.

AAntonino Praxedes
90% match
Loading thumbnail…

Cheap Tricks for Interaction

This interactive map shows world countries colored in light green on a blue sphere, with countries highlighted in red on hover. It uses d3.geoPath and d3.geoNaturalEarth1 for geographic projections and d3.zoom for pan/zoom interaction, rendering in SVG. Country names appear as tooltips via appended title elements, with data sourced from the world-atlas 50m TSV and TopoJSON files. The code imports from the d3 and topojson libraries.

Iianleekq
90% match