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

100%

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

✓ Published2🌍 Public

Last edited Feb 1, 2021

Created on Jan 30, 2021

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.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

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

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

91% match

Loading thumbnail…

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

This example uses D3.js to render a world map with dynamic geographic projections. It displays country boundaries from the World Atlas TopoJSON dataset, styled as light green polygons with dark blue oceans on an SVG canvas. The code creates four different projections—Natural Earth, Mercator, Orthographic, and Bottomley—using `d3.geoNaturalEarth1`, `d3.geoMercator`, `d3.geoOrthographic`, and `d3.geoBottomley`, then applies `d3.geoPath` to draw the shapes. While the title references a smiley face, the actual visualization only shows the map, loading data asynchronously via `d3.json`.

XXenos Panagiotis

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

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

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

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

89% match

Loading thumbnail…

Let's make a face with D3.js!

The visualization displays a world map rendered with SVG paths, where each country is filled in green with black borders against a dark blue background. It demonstrates fundamental DOM manipulation by using D3.js to load GeoJSON data from the `world-atlas` package, project it with `d3.geoMercator()`, and generate paths via `d3.geoPath()`. The code also imports `topojson` for feature extraction, but the interactive smiley face with moving eyebrows described in the README is not present in the visible implementation.

Jjay

87% match