Skip to main content
SimilarExport ZIP
100%

Cheap Tricks for Interaction

✓ Published1🌍 Public
EEdoardoRegini
Last edited Apr 9, 2020
Created on Apr 9, 2020

This example visualizes a world map using a natural Earth projection, where each country is rendered as a light green SVG path with a black stroke. Hovering over a country changes its fill color to red, and a tooltip displays the country name loaded from a TSV data file. The visualization uses `d3.geoPath` and `d3.geoNaturalEarth1` for map projection, `topojson.feature` for geographic data conversion, and `d3.zoom` with an event transform to enable interactive pan and zoom. The map data comes from the world-atlas package, with the sphere filled in dark blue.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Cheap tricks for interaction

This example displays a world map using a natural Earth projection, with countries rendered as green SVG paths with black strokes against a dark blue sphere. Hovering over any country turns it red, providing a simple interaction cue. The visualization is built with D3 v5, using `d3.geoPath` and `d3.geoNaturalEarth1` for geographic projection, while geographic data comes from the TopoJSON world-atlas countries-110m dataset, which is parsed with `topojson.feature` and loaded via `d3.json`.

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

Cheap Tricks for interaction

This visualization displays a world map using a natural Earth projection, with countries rendered as light green SVG paths that turn red on hover, accompanied by tooltips showing country names. The map is built with D3 v5, using `d3.geoPath` and `d3.geoNaturalEarth1` for projection, and TopoJSON for converting geographic data into features. It loads country boundaries and names from the world-atlas package (50m TSV and JSON files), and the rendering is done entirely in SVG. The zoom interaction is handled by `d3.zoom`, which applies a transform to the map group when the user presses and drags.

DDaniel García
95% match
Loading thumbnail…

Cheap Tricks for Interaction

This interactive map displays world countries as light-green SVG paths on a blue sphere, using a natural Earth projection and a 50m resolution TopoJSON dataset from the world-atlas package, with country names loaded from a matching TSV file. Tooltips reveal country names via SVG title elements, while hovering turns countries red. The visualization supports pan and zoom through d3.zoom, which applies an SVG transform to a group containing all country paths. The implementation uses d3.geoPath, d3.geoNaturalEarth1, and topojson.feature for map generation.

Zzlastefcia
95% match
Loading thumbnail…

Cheap Tricks for Interaction

This example shows a natural Earth projection world map with country boundaries rendered as SVG paths, featuring hover highlighting and zoom/pan interaction. The visualization loads world-atlas TopoJSON data and TSV country names, using d3.geoNaturalEarth1 and d3.geoPath to project and draw the geography. A d3.zoom behavior applies transform events to the map group, while CSS hover styles change country fill to red. Each country path includes a title element that displays the region name on mouseover, combining simple styling with d3’s event-driven transforms for an interactive globe.

OOliver Wills
95% match
Loading thumbnail…

Cheap tricks interactions _ example!

This example displays an interactive world map using a natural Earth projection, with countries rendered as SVG paths and colored light green. The visualization supports zooming and panning via d3.zoom, and hovering over a country highlights it in red. It loads geographic data from the world-atlas TopoJSON and TSV files, merging country names via a reduce operation. The code uses d3.geoPath, d3.geoNaturalEarth1, and topojson.feature to project and draw the map.

KKumhee
95% match
Loading thumbnail…

cheap tricks for interaction

This example displays a world map using a natural Earth projection, where each country is rendered as a light green SVG path and the ocean appears as a blue sphere. Hovering over a country highlights it in red. The visualization loads geographic data from the world-atlas TopoJSON file, converts it to GeoJSON with topojson.feature, and draws it using d3.geoPath and d3.geoNaturalEarth1. Interaction is implemented via a CSS :hover rule on the country paths, which changes their fill color without any JavaScript event handlers.

Jjlspangl
95% match
Loading thumbnail…

Cheap Tricks for Interaction

This example shows an interactive world map rendered with SVG, where country boundaries appear in light green and turn red on hover, with a blue sphere background. It uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to draw geographic features from TopoJSON data loaded via `d3.json`. Country names come from a TSV file accessed with `d3.tsv`. The map supports pan and zoom through `d3.zoom`, applying the current transform to a group element containing all countries.

RRubens
94% match