Skip to main content
SimilarExport ZIP
100%

Cheap tricks for interaction

✓ Published0🌍 Public
RRoger Yu-Hsiang Lo
Last edited Feb 7, 2020
Created on Feb 7, 2020

This example shows an interactive world map built with D3 v5 and TopoJSON, using a Natural Earth projection. Users can pan and zoom the map via the `d3.zoom` API, with the viewport transform applied to a group element. Country boundaries are rendered as SVG paths via `d3.geoPath`, with hover highlighting controlled by CSS. The map loads world-atlas data from unpkg, joining TopoJSON features to TSV country names for tooltips.

AI-generated description
MIT Licensed

Similar vizzes

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
96% match
Loading thumbnail…

Cheap Tricks for Interaction

This example shows a zoomable world map rendered with D3 v5 and TopoJSON, where hovering over any country highlights it in red. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to draw country boundaries from the world-atlas 50m dataset, with country names added as tooltips using `<title>` elements. Interaction combines `d3.zoom` on the SVG for pan and zoom transformations, plus CSS `:hover` styling for the highlight effect. The base map and sphere are drawn as SVG paths, with data joined from TSV metadata and JSON topology.

YYF
95% 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
95% match
Loading thumbnail…

Cheap Tricks for Interaction

This example shows a world map rendered with D3 v5, using Natural Earth projection and TopoJSON data. Users can pan and zoom the map via d3.zoom. Hovering over a country turns it red, with country names available as tooltips via SVG `<title>` elements. The code uses d3.geoNaturalEarth1, d3.geoPath, and d3.event for interactions.

KKumhee
94% match
Loading thumbnail…

Cheap Tricks for Interaction

This example shows a world map rendered with D3 v5 using the `geoNaturalEarth1` projection and `geoPath` to draw country boundaries from TopoJSON data. The visualization highlights how simple CSS hover effects can create interactivity, with countries turning red on mouseover. Pan and zoom interaction is implemented via `d3.zoom`, which applies a transform to the map group. The map uses data from the World Atlas TopoJSON and TSV files, with country names added as tooltips through SVG `title` elements.

NNitin Vadhiya
94% 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
94% match
Loading thumbnail…

Cheap tricks for interactions

This example shows an interactive world map with country boundaries, rendered using the Natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`. Users can zoom and pan the map with the mouse, as the code applies `d3.zoom` to the SVG container and updates a group’s `transform` attribute on each zoom event. Country names appear as tooltips when hovering, populated from a TSV file that maps ISO numeric codes to names, while the underlying geometry comes from a TopoJSON file loaded via `topojson.feature`. The map uses filled paths with hover color changes defined in CSS.

ZZ-Richard
94% match
Loading thumbnail…

Cheap Tricks for Interaction

This example shows an interactive world map with zoom and pan capabilities, displaying country boundaries and names using natural Earth projection. The user can explore the map by dragging to pan and scrolling to zoom, which is implemented through d3.zoom. Countries are rendered as SVG paths using d3.geoPath, with hover effects highlighting regions in red. The visualization uses TopoJSON data from world-atlas and TSV country names, combining d3.json and d3.tsv for data loading within a Promise.all.

CCurran Kelleher
94% match