Skip to main content
SimilarExport ZIP
100%

Cheap tricks for interaction

✓ Published1🌍 Public
RRoger Yu-Hsiang Lo
Last edited Feb 7, 2020
Created on Feb 7, 2020
Forked from Let's make a map!

This example displays a world map using a natural Earth projection with countries filled in light green on a blue sphere. It demonstrates a simple interaction technique where hovering over any country changes its fill to red, implemented entirely through CSS `:hover` rules. The visualization loads geographic data from the World Atlas TopoJSON collection and renders it using D3 v5’s `geoPath` and `geoNaturalEarth1` projection.

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 filled in light green and oceans in blue. It uses the D3 library’s geoPath and geoNaturalEarth1 projection to render the map, and TopoJSON’s feature function to convert geographic data from world-atlas TSV and JSON files. The interaction is a simple hover effect that turns countries red when the mouse passes over them, demonstrating a "cheap trick" for user feedback.

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 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 presents an interactive world map built with D3.js and the TopoJSON library, using the `d3.geoPath` and `d3.geoNaturalEarth1` projection to render countries from the World Atlas dataset. Hovering over a country highlights it in red, and a click permanently changes its fill to brown while increasing the stroke width, demonstrating simple CSS-based interaction tricks for selection feedback. The SVG rendering employs a light blue sphere background and light green countries with black borders.

Ssrrajendran
94% match
Loading thumbnail…

Cheap Tricks for Interaction

This example presents an interactive world map built with D3.js and the TopoJSON library, using the `d3.geoPath` and `d3.geoNaturalEarth1` projection to render countries from the World Atlas dataset. Hovering over a country highlights it in red, and a click permanently changes its fill to brown while increasing the stroke width, demonstrating simple CSS-based interaction tricks for selection feedback. The SVG rendering employs a light blue sphere background and light green countries with black borders.

Ssrrajendran
94% match
Loading thumbnail…

Cheap Tricks for Interaction

This example displays a world map with countries colored blue and outlined in black, rendered using the Natural Earth projection. Hovering over a country turns it red, providing visual feedback. The map uses D3’s `geoPath` with a `geoNaturalEarth1` projection, loading country boundaries as TopoJSON and names from a TSV file. A CSS `:hover` rule triggers the color change, and a `<title>` element shows the country name on hover.

NNita
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 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