Skip to main content
SimilarExport ZIP
100%

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

✓ Published0🌍 Public
TTomoyukiEguchi
Last edited Jan 28, 2021
Created on Jan 28, 2021

This example demonstrates how to visualize daily COVID-19 case data from the covid19india.org API as an animated smiley face, with eyebrows that move in response to changes in case counts. The chart renders as an SVG using D3.js v5, where the face and its features are constructed from data-driven DOM manipulation. The code fetches the JSON data, processes it with custom logic, and plots the result by binding data to SVG elements, showing how D3 can create playful, data-responsive visualizations.

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 Let's make a face with D3.js!

This fork of “Let's make a face with D3.js!” demonstrates fundamental DOM manipulation by rendering a static smiley face with movable eyebrows. The example loads a CSV file containing country population data, parsing and scaling the population values by 1000 using the `d3.csv` method. The visualization uses D3 v5 to select an SVG element and bind data, though the face itself is constructed with basic SVG shapes rather than data-driven elements. The code highlights asynchronous data loading and console logging before any visual update occurs.

Bbyiringirodalio
87% match
Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by constructing a smiley face whose eyebrows move, driven by loading population data from a CSV file. The visualization uses d3.select to target an SVG element and d3.csv to fetch and parse data.csv, logging the parsed rows to the console. The page is rendered as SVG within a fixed-size viewport, with D3 v5 handling the asynchronous data loading. The code currently only reads the data and does not yet apply it to animate the face.

Llizard1111
86% match
Loading thumbnail…

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

This animated D3.js visualization demonstrates fundamental DOM manipulation by constructing a smiley face with yellow circular face, black-outlined features, and animated eyebrows. Using SVG selections and transitions, the eyebrows move up and down in a repeating two-second cycle, while the face is built from basic geometric shapes—circles for eyes, rectangles for brows, and an arc for the mouth. The code showcases D3's data-agnostic DOM methods, including `select`, `append`, `attr`, and `transition`, all centered around a fixed coordinate system. The result is a clean, playful example of how D3 can create simple yet expressive animations entirely through code.

Ppavan vasamsetti
85% match
Loading thumbnail…

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

A D3.js visualization draws an animated smiley face using SVG shapes. The face consists of a yellow circle, two eyes, movable eyebrows, and a mouth created with the `d3.arc` path generator. Eyebrows animate vertically through chained `transition` calls, moving down and back up over two seconds each. The code imports `select` and `arc` from D3 v5 and manipulates SVG elements directly, with data from `data.csv` displayed as an accompanying table.

YYang Shun Yu
85% match
Loading thumbnail…

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

This visualization demonstrates fundamental D3.js DOM manipulation by rendering a smiley face with animated eyebrows. The code uses D3 v5 to select an SVG element and append geometric shapes—circles for the face and eyes, rectangles for eyebrows, and a path generated with the `d3.arc` function for the mouth. A chained `transition` with a two-second duration repeatedly moves the eyebrows upward and back down, creating a subtle expressive animation. The example relies entirely on D3’s selection, attribute, and transition APIs, with no external data sources.

Jjasondmelloprogrammer
85% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation by rendering a smiley face with animated eyebrows, built using D3.js v5. The visualization uses `d3.select` to target an SVG element and `d3.scaleLinear` to map data, though the code also includes a CSV loading attempt with `d3.csv` that references a population dataset. The face is drawn through SVG rect elements appended to the chart, with the eyebrow movement implied by the code's structural setup. The example relies on raw SVG attribute manipulation rather than higher-level layout or force simulation APIs.

Llisacaligagan
85% match
Loading thumbnail…

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

This example demonstrates a smiley face created with SVG, whose eyebrows move to express different emotions. The visualization starts by selecting the SVG element with `d3.select` and styling its background, then relies on D3.js v5’s DOM manipulation methods to construct the face’s features. It uses fundamental D3 selections and attribute operations to build the shapes, with the eyebrow movement driven by a simple update pattern, though no explicit animation API is shown. The rendering is purely SVG-based within a 960×500 canvas.

Kkaruppuraja
85% match
Loading thumbnail…

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

This example creates a smiley face in an SVG canvas, with animated eyebrows that move to express different emotions. It demonstrates fundamental DOM manipulation and data binding using D3.js v5, specifically leveraging the `select` method to target SVG elements and update their attributes. The face is constructed entirely in code rather than from external data, and the animation is achieved by repeatedly setting position attributes on the eyebrow shapes.

Ggabcee
85% match