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

100%

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

✓ Published0🌍 Public

Last edited Mar 9, 2023

Created on Mar 8, 2023

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

This example displays an interactive orthographic globe populated with country boundaries. Users can pan and zoom the map using mouse gestures. The visualization loads world topology from the World Atlas TopoJSON dataset and joins it with ISO country names from a TSV file. Country paths are rendered as SVG elements using `d3.geoPath` with a `d3.geoOrthographic` projection, while `d3.zoom` handles the interactive transforms on the containing group. Hovering over a country changes its fill color to grey.

AI-generated description

MIT Licensed

Similar vizzes

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 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

90% match

Loading thumbnail…

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

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.

Llinyyyyyyyyy

89% match

Loading thumbnail…

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

This example renders an interactive world map in SVG using D3.js and TopoJSON. It displays country boundaries and population data loaded from the world-atlas package, showing each country's population in a tooltip on hover. The map uses a Mercator projection created with `d3.geoMercator` and draws paths with `d3.geoPath`. The visualization supports pan and zoom through D3's `zoom` event, which applies a transform to the map's group element.

MMohammed Nijim

88% match

Loading thumbnail…

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

This example displays a world map using an orthographic projection, rendering countries as light green SVG paths on a blue sphere with subtle black borders. It loads geographic data from the world-atlas TopoJSON file and converts it to GeoJSON using topojson’s feature method. The visualization uses d3.json to fetch data, d3.geoOrthographic for projection, and d3.geoPath to generate the SVG path data. The sphere is drawn first as a separate path, with all country features appended dynamically once the data loads.

CCaminaur

88% match

Loading thumbnail…

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

This example uses D3.js version 6 to render a world map from the World Atlas TopoJSON dataset, displaying countries as black-filled paths with light gray strokes against a light gray sphere (the globe). The code utilizes `d3.geoPath` with the `geoNaturalEarth1` projection to transform geographic coordinates into SVG paths, and the `topojson` library’s `feature` function to extract country boundaries from the TopoJSON topology. The SVG output shows the full Earth sphere with country outlines, demonstrating basic geographic data mapping and SVG DOM manipulation with `select` and `append` methods.

Aannadehtiarova

88% 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

88% 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

88% match