Skip to main content
SimilarExport ZIP
100%

Cheap tricks for interaction: reduce instead of forEach

✓ Published0🌍 Public
CChristine Lanser
Last edited Oct 7, 2020
Created on Oct 6, 2020

This example displays an interactive world map using D3.js with a Natural Earth projection. The visualization renders country boundaries as SVG paths, with hover effects that change country fill colors from light green to red. It uses d3.json and d3.tsv to load TopoJSON world map data and country names, with a lookup table created via JavaScript's reduce method to associate country IDs with names. The map supports zooming through d3.zoom, and each country includes a title element for tooltip display.

AI-generated description

Hover over and title elements for map

MIT Licensed

Similar vizzes

Loading thumbnail…

Cheap Tricks for Interaction

This example shows an interactive world map where hovering highlights countries in red against a light green base, with zoom and pan enabled for exploration. The visualization uses D3 v5 with a Natural Earth projection (d3.geoNaturalEarth1) and d3.geoPath to render country boundaries from TopoJSON world atlas data, linked to country names via TSV metadata. Interactions rely on d3.zoom for panning and zooming, while CSS :hover rules change country fill colors. The SVG-based map includes a blue sphere background, and the code loads data using Promise.all with d3.json and d3.tsv.

HHelenaShu
92% match
Loading thumbnail…

Cheap Tricks for Interaction

This example presents an interactive world map built with D3.js version 5 and TopoJSON, using a natural Earth projection rendered as SVG. It displays country boundaries from the world-atlas dataset, with hover states that highlight each nation in red and tooltips showing country names via SVG title elements. The visualization implements d3.zoom for pan and zoom interactions, applying transformations to a group element containing all geographic paths. The sphere background uses a distinct blue fill, while the code loads both TSV metadata for country names and TopoJSON geometry through Promise.all.

Jjay
91% match
Loading thumbnail…

Cheap tricks for interaction

This example shows an interactive world map rendered in SVG using D3 v5, where countries appear in light green against a dark blue spherical background. Users can zoom and pan the map via a d3.zoom handler that applies SVG transforms to the map group. Natural Earth projection is applied through d3.geoNaturalEarth1, with country boundaries drawn via d3.geoPath. Country names come from a TSV file joined to TopoJSON geometry using topojson.feature, and hovering highlights a country in red via a CSS :hover rule.

JJason-Manbodh
91% match
Loading thumbnail…

Cheap tricks for interaction

This example shows an interactive world map rendered in SVG using D3 v5, where countries appear in light green against a dark blue spherical background. Users can zoom and pan the map via a d3.zoom handler that applies SVG transforms to the map group. Natural Earth projection is applied through d3.geoNaturalEarth1, with country boundaries drawn via d3.geoPath. Country names come from a TSV file joined to TopoJSON geometry using topojson.feature, and hovering highlights a country in red via a CSS :hover rule.

JJason-Manbodh
91% match
Loading thumbnail…

Cheap tricks for interaction.js

This example shows an interactive world map where individual countries are highlighted in red on hover, with a zoomable natural Earth projection. The visualization loads geographic data from the world-atlas package, including both topojson geometry and a TSV file containing country names. Using D3’s geoPath and geoNaturalEarth1 projection, it renders countries as SVG paths; the zoom feature relies on D3’s zoom event handler to adjust the group’s transform. Country names are joined from the TSV data based on ISO numeric codes.

NNeepaB
91% match
Loading thumbnail…

Cheap Tricks for Interaction

This example presents an interactive world map using D3.js and TopoJSON. It displays country boundaries from the world-atlas 50m dataset, rendered as SVG paths using the `geoNaturalEarth1` projection and `geoPath`. The map supports zooming via the `zoom` function, which applies a transform to the grouped elements. Hovering over a country highlights it in red through CSS, and clicking the sphere logs an event to the console, while country names appear as tooltips from a TSV lookup file.

Vveagy
91% match
Loading thumbnail…

Cheap Tricks for Interaction

This example displays an interactive world map using a Natural Earth projection, rendered as SVG paths with d3.geoPath. It shows country boundaries filled in light green, with a hover effect that turns them red, and supports zooming and panning through d3.zoom. Geographic data comes from the world-atlas TopoJSON and TSV files, merged via Promise.all. A sphere outline is drawn first, and country names appear as tooltips using appended title elements.

Mmohdabidali
91% match
Loading thumbnail…

Cheap Tricks for Interaction

This example displays an interactive world map using D3.js to visualize countries with a graticule sphere. It loads geographic data from the world-atlas TopoJSON and TSV files, rendering country boundaries through `d3.geoPath` with a `d3.geoNaturalEarth1` projection. Hovering highlights countries in red, while the `d3.zoom` API enables pan and zoom interactions. The SVG output uses CSS for styling, with tooltips showing country names via D3's `select` and `append` methods.

AArriannePandaraoan
91% match