Uploading data

100%

Uploading data

✓ Published0🌍 Public

Last edited Jul 12, 2019

Created on Jul 12, 2019

Forked from Let's make a face with D3.js!

A smiling face composed of SVG shapes is displayed, and its eyebrows animate up and down in a repeating cycle. The animation is created with D3.js version 5, using chained `transition()` calls to alternate the eyebrows’ vertical position over 2000-millisecond intervals. The face itself is constructed from basic SVG elements: circles for the eyes, rectangles for the eyebrows, and a path for the mouth, generated with the `d3.arc` helper. The code also demonstrates asynchronous data loading by attempting to fetch a CSV file via `d3.csv`, though the loaded data is only logged to the console and not visualized.

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!

A smiling face built entirely with D3.js SVG elements animates its eyebrows upward and downward in a repeating loop. The example demonstrates fundamental DOM manipulation through D3 selections, appending circles for the face and eyes, rectangles for eyebrows, and an arc-generated path for the mouth. Using `d3.select`, `transition().duration()`, and the `arc()` generator, it shows how to bind data from a CSV file and apply chained transitions to transform SVG attributes. The face is centered via a group transform, with the population dataset loaded from `data.csv` though not visually mapped to the graphic.

Ssourcebox-bug

86% match

Loading thumbnail…

Members

A smiley face rendered in SVG displays animated eyebrows that move up and down in a looping transition. The face is built entirely with D3.js v5 selections, appending a yellow circle, two eye circles, rectangular eyebrows, and an arc-shaped mouth onto an SVG canvas. The animation uses chained `transition.duration` calls to translate the eyebrow group, while the static elements remain fixed. Data from a CSV file is loaded but not visualized in this example, which focuses on fundamental DOM manipulation and SVG shape construction.

Lliujunchao

86% match

Loading thumbnail…

This is a test page.

A smiling face is drawn with D3.js and its eyebrows animate up and down. The face is built by appending SVG shapes—a yellow circle, two eye circles, rectangular eyebrows, and an arc-based mouth—to a central group. The eyebrows move via chained `transition().duration()` calls that toggle their vertical position. The code uses D3 v5 and imports `select` and `arc` from the `d3` module, with the entire animation rendered directly in SVG.

BBrian Merchant

85% match

Loading thumbnail…

Face with D3.js!

A smiling face drawn with SVG shapes animates its eyebrows and mouth in a looping transition. The code builds the face using D3.js v5 selection and append methods to create circles, rectangles, lines, and an arc-based path, all positioned with hardcoded coordinates. The eyebrows shift upward and the mouth changes thickness through chained `transition().duration(3000)` calls, demonstrating basic DOM manipulation and attribute updating without data binding.

Nnikeshkv

85% match

Loading thumbnail…

Let's make a face with D3.js!

This visualization demonstrates a smiley face whose eyebrows move, created through fundamental DOM manipulation with D3.js. The face is rendered as SVG elements, with the eyebrow animation driven by data mapping. The code uses D3's `select`, `scaleLinear`, and `max` functions to process population data from a CSV file, which controls the width of rectangles representing the face’s features. The project relies on D3 v5 and is embedded in a simple HTML page with inline styles, showcasing basic data binding and SVG attribute updates.

SSkye-milu

85% match

Loading thumbnail…

Let's make a face with D3.js!

A smiling face rendered in SVG animates its eyebrows up and down via D3 transitions. The visualization uses `d3.select` to manipulate the SVG, `d3.arc` to construct the mouth path, and chained `transition.attr` calls to move the eyebrow rectangles over two-second durations. The code demonstrates fundamental DOM manipulation with D3 v5, importing `select` and `arc` via ES6 modules, and lays out the face using hardcoded pixel offsets for the eyes, eyebrows, and mouth within a 960×500 viewport.

Ssfloyd11

85% match

Loading thumbnail…

Let's make a face with D3.js!

A smiling face rendered as SVG animates its eyebrows through a repeating two-second cycle. The code uses D3 v5 selections and transitions to manipulate SVG elements, building the face from circles, rectangles, and an arc-generated path for the mouth. The `transition().duration()` calls sequentially shift the eyebrow group up and down, demonstrating fundamental DOM manipulation with D3's data-binding and animation APIs.

Hhsrashmi

85% match

Loading thumbnail…

Let's make a face with D3.js!

A smiling face is drawn with SVG shapes, and its eyebrows animate upward and downward in a loop. The face is constructed using D3.js v5’s `select` and `append` to create circles for eyes, rectangles for eyebrows, and a `path` for the mouth via the `arc` shape generator. The eyebrows’ movement is driven by chained `transition().duration()` calls that alter the group’s `transform` attribute. The code relies on D3’s DOM manipulation and transition APIs, with all rendering occurring in an SVG viewport.

JJuan Carlos

85% match