Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
Yylzami40
Last edited Nov 28, 2019
Created on Nov 28, 2019

This example uses D3.js to render a world map on an SVG canvas, with each country filled in light green and the globe projected using a Natural Earth projection. It displays country names as tooltips by merging data from the World Atlas TopoJSON and TSV files. The map supports zoom interaction through D3's zoom behavior, and hover states highlight countries in red. The code relies on d3.geoPath, d3.geoNaturalEarth1, topojson.feature, and d3.json/tsv for data loading.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

This example visualizes the world map as a set of orange countries on a steel-blue spherical background, with hover states that turn a country red. The shape data comes from the world-atlas TopoJSON and TSV files, which are joined to label each country with its name. The visualization uses the D3.js `geoPath` and `geoNaturalEarth1` projection to render the map, and the topojson `feature` function to convert TopoJSON topology into GeoJSON features. A zoom interaction is enabled through D3’s `zoom` event, which transforms the map group.

DDifan Gu
93% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays an interactive world map using a natural Earth projection, with countries rendered as green SVG paths that turn red on hover. The map supports zooming and panning through a D3 zoom behavior applied to the SVG group. The visualization uses d3.geoNaturalEarth1, d3.geoPath, and topojson.feature to parse geographic data from the world-atlas dataset. A semi-transparent blue sphere outlines the globe, while country names appear as tooltips via appended title elements.

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

Let's make a map with D3.js!

This example uses D3.js to render an interactive world map from TopoJSON and TSV data loaded from the world-atlas package. Countries are drawn as SVG paths using the d3.geoNaturalEarth1 projection and d3.geoPath, with hover effects changing their fill color. The visualization incorporates d3.zoom to enable pan and zoom transformations on the map group, while a sphere background is rendered from a GeoJSON Sphere object. Country names are joined to features via ISO numeric codes and displayed as SVG title tooltips.

AAaron Goebel
91% match
Loading thumbnail…

Let's make a map with D3.js!

This example displays an interactive world map using D3.js, with countries rendered as SVG paths filled in green and a blue sphere background. Hovering over a country turns it red, and users can zoom and pan the map via mouse interactions enabled by d3.zoom. The map uses d3.geoNaturalEarth1 projection and d3.geoPath to draw country boundaries from TopoJSON data, while country names are loaded from a TSV file and added as SVG `<title>` tooltips.

Lliyaxuanliyaxuan
91% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows an interactive world map rendered with D3.js, displaying country boundaries colored light green that turn red on hover. The visualization uses a natural Earth projection via `d3.geoNaturalEarth1` and `d3.geoPath` to draw geographic features, with zoom support through `d3.zoom`. It loads world-atlas TopoJSON data and a companion TSV file to map country names, appending tooltips with each country’s name. The map is drawn as SVG paths, including a dark blue sphere background.

Ss-janibekova
91% match
Loading thumbnail…

Let's make a map with D3.js!

This example creates an interactive map of the world using a Natural Earth projection and SVG rendering. It loads geographic data from the world-atlas TopoJSON and TSV datasets, then uses d3.geoPath and d3.geoNaturalEarth1 to draw country boundaries and fill them with white. Hovering over a country highlights it in light grey, and each country displays its name as a tooltip via a title element. The code also applies a light blue background to the page.

ZZhengyan Yu
91% match
Loading thumbnail…

Let's make a map with D3.js!

This example shows an interactive world map rendered in SVG, with countries displayed in dark green against a dark blue sphere. Hovering highlights each country in red, and users can zoom and pan using the mouse. It uses D3 v5 with `d3.geoPath` and `d3.geoNaturalEarth1` for geographic projection, `d3.zoom` for interaction, and TopoJSON to load world boundaries. The map pulls country names from a TSV file paired with the world-atlas 50m JSON dataset.

Ffahmijaafar
91% match