Skip to main content
SimilarExport ZIP
100%

Cheap tricks for interaction

✓ Published0🌍 Public
BbeauMarko
Last edited Aug 17, 2020
Created on Aug 17, 2020

A world map rendered with D3's geoNaturalEarth1 projection and SVG paths shows country boundaries as light green shapes over a dark blue sphere. Interactive tooltips appear when hovering over a country, and the fill color changes to red on hover via CSS. The example demonstrates how simple CSS hover effects and SVG title elements provide low-cost interaction, using d3.geoPath for map geometry, topojson for feature extraction, and a TSV file for country name lookup.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Cheap Tricks for Interaction

A world map rendered with SVG paths displays countries in light green against a blue sphere, with red highlighting on hover. The visualization uses D3 v5’s geoNaturalEarth1 projection and geoPath to draw geographic features from TopoJSON world-atlas data, while country names come from a TSV file. Pan and zoom interaction is implemented via d3.zoom, applying transforms to a group element. Tooltips are provided by SVG `<title>` elements showing each country’s name.

Ggcappadaniel
94% 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
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 example shows an interactive world map rendered in SVG, where each country appears in light green with a black outline and displays its name via a tooltip on hover. Users can pan and zoom the map using mouse interactions, which transforms the entire map group. The visualization uses D3 v5 with `d3.geoNaturalEarth1` for projection, `d3.geoPath` for drawing country boundaries, and `d3.zoom` for interaction. Country geometries come from the world-atlas TopoJSON dataset, with country names loaded from a matching TSV file, while CSS hover effects turn countries red under the cursor.

Bbhargav83
94% match
Loading thumbnail…

Cheap Tricks for Interaction

This interactive map displays world countries on a natural Earth projection using SVG paths, with hover highlighting that changes country fill colors and zoom-and-pan capabilities via d3.zoom. The visualization loads geographic data from world-atlas TopoJSON and TSV files, using d3.geoPath and geoNaturalEarth1 to generate the map geometry. Country names are provided as tooltips through SVG title elements, with the sphere background filled blue and countries rendered in light green. The code demonstrates simple user interaction tricks like CSS hover effects and zoom transforms to enhance map exploration.

Yyejichun@naver.com
94% 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
Loading thumbnail…

Cheap tricks for interaction

A world map rendered with D3's geoNaturalEarth1 projection and geoPath displays country boundaries in green on a dark blue sphere. Zooming is enabled through D3's zoom module, which applies an SVG transform to the map group. Hovering highlights individual countries. Country names come from a TSV file joined to TopoJSON geographic data, with tooltips provided by SVG title elements.

Jjlongwellchc
94% match
Loading thumbnail…

Cheap tricks for interaction

A world map rendered with SVG paths uses d3.geoNaturalEarth1 and d3.geoPath to project country boundaries from TopoJSON data. A zoom behavior enables pan and zoom interactions that transform the map group. Country names from a TSV file are joined to features via an ID lookup, displayed as native SVG title tooltips on hover, while a CSS rule changes hovered countries to red.

Ssherryyx
94% match