Skip to main content
SimilarExport ZIP
100%

Fork of Cheap Tricks for Interaction

✓ Published0🌍 Public
Kklumng
Last edited Feb 11, 2023
Created on Feb 11, 2023

This example shows a zoomable world map with country boundaries, where hovering over any country highlights it in red. It renders the map as SVG paths using `d3.geoPath` with a `geoNaturalEarth1` projection, and enables pan-and-zoom interaction through `d3.zoom`. Country names come from a TSV file joined to TopoJSON geometry from the world-atlas dataset, while hover styling relies on CSS.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Cheap Tricks for Interaction

This map demonstrates interactive pan and zoom on a Natural Earth projection of the world, with country boundaries rendered as SVG paths and tooltips showing country names on hover. The visualization loads world-atlas TopoJSON data and a TSV file mapping ISO country codes to names, then draws countries using `d3.geoPath` with a `geoNaturalEarth1` projection. The zoom behavior is implemented via `d3.zoom`, which applies a transform to the SVG group, while hover styling changes country fill to red.

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

Fork of Cheap Tricks for Interaction

This fork demonstrates interactive map exploration using a zoomable, hover-highlighted world map rendered with SVG. It visualizes country boundaries from the World Atlas TopoJSON dataset, projected using d3.geoNaturalEarth1 and drawn with d3.geoPath. The code uses d3.zoom to enable pan and zoom transformations, and CSS :hover styling turns countries red. A title tooltip displays each country’s name, sourced from the accompanying TSV file and matched by ISO numeric ID.

Ccristian-media-animation
94% match
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
94% 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
94% match
Loading thumbnail…

Fork of Cheap Tricks for Interaction

This example shows a natural Earth projection world map rendered with SVG, where individual countries appear in light green and turn red on hover. A zoom interaction lets the viewer pan and scale the entire map using the mouse. The code uses d3.geoPath with d3.geoNaturalEarth1 for projections, d3.zoom for interactive transforms, and topojson.feature to convert TopoJSON country boundaries. Country names come from a TSV file joined by ISO numeric codes, and the map background sphere fills blue.

Bbideckerz
93% 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
93% match