Skip to main content
SimilarExport ZIP
100%

Fork of Let's make a face with D3.js!

✓ Published0🌍 Public
Llinyyyyyyyyy
Last edited Dec 4, 2022
Created on Dec 4, 2022

A world map rendered with D3.js displays countries as dark green paths with gold outlines on a gold sphere, using a Natural Earth projection and SVG. Hovering highlights a country in red, and zooming is enabled. The code loads geographic data from TopoJSON and country names from TSV files via Promise.all, then generates paths with d3.geoPath and applies pan/zoom through d3.zoom.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Let's make a face with D3.js!

This example displays an interactive world map using a natural Earth projection, with country boundaries rendered as SVG paths on a spherical globe backdrop. The map supports panning and zooming through the D3 zoom behavior. It loads TopoJSON data from the world-atlas package, converts it to GeoJSON using the topojson feature method, and draws each country with geoPath while adding title tooltips showing country names. The code uses D3 v5 modules including geoNaturalEarth1, geoPath, and zoom.

DDonggov
93% match
Loading thumbnail…

Fork of Let's make a face with D3.js

This example displays a world map in a natural Earth projection, rendered as SVG paths with country boundaries. The visualization uses the `d3.geoPath` and `d3.geoNaturalEarth1` projections from D3 v6, and the `topojson` library’s `feature` function to extract country geometries from the world-atlas TopoJSON data. Country names are loaded from a TSV file and shown as tooltips on hover. The map highlights countries in light green, which turn red on mouse-over, with a blue sphere outline.

Vvkresha
93% match
Loading thumbnail…

Fork of Let's make a map with D3.js!

This map shows the countries of the world rendered with a natural Earth projection, where landmasses appear in light green against a blue sphere. The visualization uses d3.geoNaturalEarth1 for the projection and d3.geoPath to generate SVG paths from TopoJSON data loaded via d3.json from the world-atlas dataset. Country boundaries are drawn with a subtle black stroke, while the underlying sphere provides an ocean-colored backdrop.

Bbugfree55
90% match
Loading thumbnail…

Fork of Let's make a map with D3.js!

This map visualization displays world countries colored in light green on a blue sphere, with hover effects turning countries red. It uses D3 v5 and TopoJSON to load and render world geography from the world-atlas dataset. The code combines `d3.geoNaturalEarth1` for projection, `d3.geoPath` for drawing country boundaries, and `d3.zoom` for interactive panning and zooming. Country names are joined from a TSV file and shown as SVG `<title>` tooltips.

Ggharakhani1986
90% match
Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

This example renders a world map using D3.js and TopoJSON, projecting country boundaries with an orthographic projection via `d3.geoOrthographic` and drawing them as SVG paths with `d3.geoPath`. The code loads GeoJSON data from the world-atlas dataset using `d3.json`, then binds the country features to path elements. The map is displayed on a light gray background, with countries filled in black and strokes in light gray, creating a simple, high-contrast visualization of global landmasses.

Aannadehtiarova
90% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

This fork of “Let’s make a face with D3.js!” renders an interactive world map using a natural Earth projection. It displays country boundaries and labels sourced from the world-atlas TopoJSON dataset. Users can pan and zoom the map via the d3.zoom API, which applies transforms to the SVG chart group. The visualization demonstrates basic D3 selection, data binding, and path generation with d3.geoPath.

TTejaswi@3271
90% match
Loading thumbnail…

Fork of Let's make a map with D3.js!

This visualization displays a world map using a natural Earth projection, with countries filled in light green and oceans in blue. The map is rendered as SVG paths on a 960×500 canvas using D3.js version 5 and the TopoJSON library. The code loads country boundaries from a world-atlas JSON file and projects them with d3.geoNaturalEarth1 and d3.geoPath. Each country’s outline is drawn as a separate path with a subtle black stroke, while a sphere path fills the background before the country data arrives.

Mmaferayala
90% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

This fork of the classic D3.js face demo renders a world map using SVG paths instead of a smiley face. The map displays country boundaries as gray shapes with light gray strokes, projected using a Mercator projection. The code loads TopoJSON data from the world-atlas package and converts it to GeoJSON via the topojson `feature` method, then binds it to SVG path elements using `d3.geoPath` and `d3.geoMercator`. All drawing is handled in a single `json` promise callback with d3.v6.

Aannadehtiarova
90% match