Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
VVineel Gannu
Last edited Jul 16, 2020
Created on Jul 15, 2020

A face is drawn using the country shape of Canada, loaded as TopoJSON and projected with `d3.geoMercator`. The code filters the country features by ID and renders the path with `d3.geoPath`, applying a transform to position and scale it. Clicking or hovering logs the geometry coordinates. The example demonstrates fundamental SVG DOM manipulation with D3.js v5 by appending paths and styling them directly.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to build a smiley face with D3.js, highlighting the library’s fundamental DOM manipulation capabilities. The code uses D3 selections and the `enter()` method to append SVG `path` elements, which are projected using `geoMercator` and `geoPath` based on TopoJSON country data from the World Atlas. While the face itself is not fully implemented in the visible code, the example lays the groundwork by rendering geographic country shapes as green paths with black outlines. The page loads D3 v5 and TopoJSON from a CDN, with a stylesheet styling all paths.

AAbhi
85% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to draw a smiley face on an SVG canvas, with interactive eyebrows that move based on user input. It demonstrates fundamental DOM manipulation by selecting SVG elements and appending paths for the face’s features. The code loads country boundaries from the World Atlas TopoJSON dataset, projects them using a Mercator projection via `d3.geoMercator` and `d3.geoPath`, and renders them as SVG paths. A video tutorial embedded in the README explains the step-by-step construction, while the live example focuses on simple, playful visualization with D3 v5.

Vvmoharir
83% 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
83% match
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.

吴吴昊
83% match
Loading thumbnail…

Let's make a face with D3.js!

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.

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

Let's make a face with D3.js!

This example displays a natural Earth projection of the world map, with countries rendered as orange paths on a steel-blue sphere. It uses D3.js v5’s `geoNaturalEarth1` and `geoPath` to generate the geographic outlines, while TopoJSON’s `feature` extracts country boundaries from the world-atlas dataset. The SVG paths are appended asynchronously after fetching the 110m resolution TopoJSON file. A black stroke with low opacity outlines each country, and the page sets no margins to let the visualization fill the entire viewport.

DDifan Gu
82% 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
82% match