Skip to main content
SimilarExport ZIP
100%

Let's make cheap tricks with D3.js!

✓ Published0🌍 Public
JJefferson Abreu
Last edited Jul 25, 2019
Created on Jul 25, 2019

This example displays a zoomable, equal-earth projection of the world with countries rendered as colored SVG paths and names revealed on hover. It uses D3.js v5 with the `d3.geoPath` and `d3.geoEqualEarth` projections, plus the `d3.zoom` module for interactive pan and zoom. Country boundaries come from the world-atlas TopoJSON dataset, while names are joined from a TSV file, and a hover effect changes country fill to red.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Cheap tricks for interaction with D3.js!

This example shows a zoomable world map rendered with SVG paths, using a natural Earth projection and hover highlighting to change each country’s fill color. It demonstrates simple interaction tricks in D3.js v5, combining `d3.geoNaturalEarth1`, `d3.geoPath`, and the `d3.zoom` API to apply transforms to a containing group. Country boundaries come from TopoJSON world-atlas data, merged with country names from a TSV file, and the code uses `title` elements for basic tooltips.

CCarloWK1202
88% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays a world map using D3.js, rendering countries as interactive SVG paths with hover effects that turn them red. The visualization uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to draw the globe and country boundaries from TopoJSON data loaded from the World Atlas. A `d3.zoom` behavior enables pan and zoom, while country names are joined from TSV data using `Promise.all`. The map is styled with CSS classes, featuring a blue sphere and light green countries.

Rrcumani
88% match
Loading thumbnail…

Cheap Tricks for interaction

This example demonstrates a zoomable, hover-highlighted world map using D3 v5. It renders country boundaries and a blue sphere backdrop via `d3.geoPath` with a Natural Earth projection, pulling geometry from the world-atlas TopoJSON dataset. The visualization supports interactive pan and zoom through `d3.zoom`, applying transforms to an SVG group, and changes country fill to red on hover via CSS. Country names are joined from a TSV file using ISO numeric IDs.

CClara Hu
88% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows an interactive world map rendered as SVG, where each country is colored light green and turns red on hover, with a dark blue sphere backdrop. Built with D3.js v5 and TopoJSON, it uses `d3.geoNaturalEarth1` for projection and `d3.geoPath` to draw country boundaries from the World Atlas 50m dataset. Zoom and pan are enabled via `d3.zoom`, while country names are loaded from a TSV file and attached as SVG title tooltips.

IIgor Borzunov
87% match
Loading thumbnail…

Cheap tricks with interaction with a map with D3.js!

This example displays a natural Earth projection of the world map, rendered as SVG paths filled with light green and hover effects that turn countries red. It loads country boundaries from the world-atlas TopoJSON and TSV data on unpkg, joining IDs to names. The visualization implements zooming and panning through the `d3.zoom` API, applying the interaction transform to all country paths. Code uses `d3.geoPath` with the `geoNaturalEarth1` projection, the `topojson` feature extraction library, and React-style imports from `d3` and `topojson`.

Fforcox43
87% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows an interactive world map built with D3.js, displaying country boundaries as SVG paths colored light green, with a blue sphere background. The map supports zooming and panning through a d3.zoom behavior, and hovering over a country turns it red. It uses d3.geoNaturalEarth1 for projection and d3.geoPath for generating paths from TopoJSON data loaded from the world-atlas package, with country names joined from a TSV file and displayed as tooltips via SVG `<title>` elements.

Ggcappadaniel
87% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows an interactive world map built with D3.js v5, displaying countries as green SVG paths with black borders that turn red on hover. The map uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath`, with country boundaries loaded from a TopoJSON file (world-atlas 50m) and country names from a matching TSV file. Zooming is enabled through d3.zoom, which applies a transform to the map group. The sphere background is rendered as a blue path, and each country includes a tooltip title showing its name.

YYoram
87% match
Loading thumbnail…

Cheap Tricks for interaction!

This example shows an interactive world map where hovering over a country turns it red and zooming with the mouse repositions the map. It uses D3.js v5 with `d3.geoNaturalEarth1` for the projection, `d3.geoPath` for rendering, and `d3.zoom` to handle pan and zoom transforms on the SVG group. Country boundaries come from the `world-atlas` TopoJSON file, with names joined from a TSV file. The visualization demonstrates fundamental DOM selection and data binding, alongside simple CSS hover styling.

Mmeihaoming
87% match