Skip to main content
SimilarExport ZIP
100%

Cheap tricks for interaction

✓ Published0🌍 Public
Eestulo
Last edited Oct 22, 2020
Created on Oct 19, 2020

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`.

AI-generated description
MIT Licensed

Similar vizzes

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
96% 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
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 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.

RRoger Yu-Hsiang Lo
95% 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
95% match
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 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
95% 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