Skip to main content
SimilarExport ZIP
100%

Cheap Tricks for Interaction

✓ Published0🌍 Public
MMelina
Last edited Jun 15, 2020
Created on Jun 15, 2020

This example displays a world map using Natural Earth data via TopoJSON, projecting countries with the `geoNaturalEarth1` projection and rendering them as SVG paths through `d3.geoPath`. The map shows country names on hover through SVG `<title>` elements, populated from the world-atlas TSV file. The visualization implements cheap interaction by altering the fill color of countries when hovered, using a CSS `:hover` rule. The code loads data with `d3.tsv` and `d3.json`, and builds the map with `topojson.feature`.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Cheap Tricks for Interaction

This example shows a world map rendered with D3 v5 and TopoJSON, displaying country boundaries and names as tooltips. The map uses a natural Earth projection via `d3.geoPath` and `geoNaturalEarth1`, with countries filled in light green and a blue sphere background. Loading geographic data from the world-atlas package, the visualization adds a simple hover interaction: CSS changes the country fill to red on mouseover. Country names are joined to the geometry using ISO numeric codes from a TSV file and displayed via SVG `<title>` elements.

LLuce Liu
94% match
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
94% match
Loading thumbnail…

Cheap tricks for interaction

This example shows a world map where hovering over a country turns it red, with country names available as tooltips. The map uses a Natural Earth projection and renders with SVG paths. The code loads world-atlas TopoJSON and TSV data, then uses `d3.geoPath` and `d3.geoNaturalEarth1` to draw countries. It also demonstrates a rudimentary zoom interaction via `d3.zoom`, though the zoom handler only logs to the console. The visualization relies on d3 v5 and d3-geo-projection for the projection.

YYifei Liu
94% match
Loading thumbnail…

Cheap Tricks for Interaction

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.

EEdoardoRegini
94% match
Loading thumbnail…

Cheap Tricks for Interaction

This interactive map visualizes world countries using D3 v5 with a natural Earth projection, rendered as SVG paths with hover highlighting and zoom/pan capabilities. It loads geographic data from the world-atlas TopoJSON and country names from a TSV file, attaching tooltips via SVG `<title>` elements. The code uses `d3.geoPath`, `d3.geoNaturalEarth1`, `d3.zoom`, and `topojson.feature` to enable smooth interaction and clear country identification.

CCassie
94% 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
94% 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
94% 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
93% match