Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
Jjay
Last edited Feb 18, 2020
Created on Feb 18, 2020

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.

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

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

Let's make a face with D3.js!

This example visualizes the world map as a set of orange countries on a steel-blue spherical background, with hover states that turn a country red. The shape data comes from the world-atlas TopoJSON and TSV files, which are joined to label each country with its name. The visualization uses the D3.js `geoPath` and `geoNaturalEarth1` projection to render the map, and the topojson `feature` function to convert TopoJSON topology into GeoJSON features. A zoom interaction is enabled through D3’s `zoom` event, which transforms the map group.

DDifan Gu
87% match