Skip to main content
SimilarExport ZIP
100%

Fork of Cheap Tricks for Interaction

✓ Published0🌍 Public
Xxyang3672
Last edited Mar 10, 2021
Created on Mar 10, 2021

This example displays a world map of countries colored light green on a blue sphere, using CSV data from happiness rankings to label each country. It demonstrates pan and zoom interactions built with D3 v5’s `zoom` API and `event.transform`, which applies transforms to the SVG group containing the map. Country boundaries are rendered via `d3.geoPath` with a `geoNaturalEarth1` projection, and topojson data from the world-atlas package supplies the geographic features. Hovering over a country turns it red through CSS `:hover` styling, while tooltips show the country name from the happiness dataset.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Cheap Tricks for Interaction

This example shows a world map rendered with D3 v5, displaying countries as light green shapes on a blue sphere. Users can pan and zoom the map with mouse or touch input. The map loads geographic data from a TopoJSON world-atlas file, then draws it using an SVG path generator with a natural Earth projection. Country names are matched from TSV metadata and shown as tooltips. The implementation uses `d3.zoom`, `d3.geoPath`, and `d3.geoNaturalEarth1`, with hover effects changing country fill color via CSS.

PPiotr Paszek
92% match
Loading thumbnail…

Fork of Cheap Tricks for Interaction

This example shows an interactive world map that highlights countries in red on hover, with a blue ocean background. The visualization uses the `d3.geoNaturalEarth1` projection and `d3.geoPath` to render country boundaries from TopoJSON data, while a separate TSV file provides country names for tooltips. The map supports zooming and panning through the `d3.zoom` interaction module, which applies transform updates to the SVG group containing the paths. Countries are styled with CSS classes, and hover effects change their fill color using the `.country:hover` selector.

IIan Mac Moore
92% match
Loading thumbnail…

Fork of Cheap Tricks for Interaction

This example shows an interactive world map that highlights countries in red on hover and displays country names as tooltips, with zoom and pan capabilities through the d3.zoom behavior. The visualization uses d3.geoNaturalEarth1 projection with d3.geoPath to render geographic features, sourcing country boundaries from the world-atlas TopoJSON dataset and matching names via TSV data. The SVG rendering includes a styled sphere background and country paths, with zoom transforms applied to a group element. Country names appear through SVG title elements appended to each path.

NNikkko1
92% match
Loading thumbnail…

Fork of Cheap Tricks for Interaction

This example shows a world map with countries rendered in light green, where clicking a country turns it red, and users can zoom and pan the view. It uses an equirectangular-like natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to draw SVG paths from TopoJSON data loaded from the world-atlas package. Country names come from a TSV file, and a `d3.zoom` handler applies transforms to the map group. A spherical background and active-state styling complete the interactive visualization.

Ffrozengem397
92% match
Loading thumbnail…

Fork of Cheap Tricks for Interaction

This example shows an interactive world map built with D3.js, where hovering over any country turns it red and displays its name as a tooltip. The visualization renders a geo-projection sphere and country boundaries as SVG paths, using the `d3.geoNaturalEarth1` projection and `d3.geoPath` to generate the map geometry. The globe can be zoomed and panned via the `d3.zoom` API, which applies a transform to the grouped map elements. Country names come from a TSV data file joined with GeoJSON topology from the world-atlas package, processed with the topojson `feature` function.

Kkindermannhannah
92% match
Loading thumbnail…

Fork of Cheap Tricks for Interaction

This example shows an interactive world map with natural-earth projection, where countries appear as light green regions on a blue sphere and turn red on hover. Users can pan and zoom the map using mouse or touch gestures. Built with D3 v5 and TopoJSON, the visualization loads geographic data from the world-atlas repository, uses `d3.geoNaturalEarth1` for projection, `d3.geoPath` for rendering, and implements zoom via `d3.zoom`. Country names are matched from a TSV file using ISO numeric codes.

LLeiHuang-statistician
92% match
Loading thumbnail…

Fork of Cheap Tricks for Interaction

This interactive map visualizes the world’s countries, color-coded in light green against a blue sphere, with country names displayed as tooltips on hover. The visualization supports pan and zoom interactions, which are implemented using the `d3.zoom` event and applied to the SVG group’s transform. The map is rendered using `d3.geoPath` with the `geoNaturalEarth1` projection, and country boundaries come from the `world-atlas` TopoJSON and TSV files, which provide both geometry and names. Hovering changes each country’s fill to red via CSS.

NNacirGithub
92% match
Loading thumbnail…

Fork of Cheap Tricks for Interaction

This example presents an interactive world map using a natural Earth projection, with countries colored light green and the sphere filled blue. Hovering over a country turns it red and reveals its name via a tooltip, while users can zoom and pan by dragging. The visualization is built with D3 v5, using `d3.geoPath` and `d3.geoNaturalEarth1` for rendering the map, and `d3.zoom` for interaction. It loads geographic data from the world-atlas package (JSON and TSV files) and leverages the TopoJSON library to convert topology into features.

MMatthew Talty Colvard
91% match