Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

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

This visualization uses D3.js to construct a stylized face from geographic map data. It renders a world map projected using a Mercator projection, with country boundaries drawn via `d3.geoPath`, and then overlays facial features on top. The data comes from the world-atlas TopoJSON and TSV files loaded from jsdelivr. The code sets up an SVG canvas and uses `d3.geoMercator` for projection, though the facial feature construction is incomplete in the provided snippet.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

This example builds a world map from TopoJSON data using D3 v5 and the geoMercator projection, rendering country boundaries as SVG paths via `d3.geoPath`. It loads the world-atlas 110m dataset, extracts country features with TopoJSON’s `feature` method, and appends each path to an SVG. The code demonstrates basic data join and shape generation, creating a static geographic visualization that reveals country outlines on a blank canvas. No interactivity or animation is present, focusing solely on spatial encoding through projection and path construction.

吴吴昊
88% 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
88% match
Loading thumbnail…

Let's make a face with D3.js!

This example visualizes a world map by loading geographic data from the world-atlas TopoJSON file and rendering country boundaries as SVG paths using `d3.geoPath` and `geoMercator`. The code imports `select`, `json`, and `geoPath` from D3 v5, along with `feature` from TopoJSON to convert the TopoJSON topology into GeoJSON features. The map is drawn inside an SVG canvas with a width of 960 pixels and height of 500 pixels, though the visible output is limited to the console log of the parsed data.

Eemntd
87% match
Loading thumbnail…

Let's make a face with D3.js!

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.

Yylzami40
87% 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
87% match
Loading thumbnail…

Let's make a face with D3.js!

This example displays a static world map with countries filled in tan against a deep blue ocean, rendered inside an SVG canvas. It uses D3.js version 5.9.2 with the topojson library to convert the world-atlas country boundaries into map features. The projection, d3.geoNaturalEarth1, and the path generator, d3.geoPath, define the map’s shape, while the countries’ geographic data comes from the online world-atlas JSON dataset. The visualization also draws a background sphere for the ocean using a simple path generator call.

AAnthony-coding
86% 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
86% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to project world countries onto a natural Earth projection, rendering them as orange SVG paths with a steel-blue sphere background. It loads GeoJSON data from the world-atlas TopoJSON file via `d3.json` and converts it with `topojson.feature`. The visualization then applies `d3.geoPath` with `geoNaturalEarth1` to draw each country, highlighting the geographic layout without interactive features.

DDifan Gu
86% match