Let's make a face with D3.js!

100%

Let's make a face with D3.js!

✓ Published0🌍 Public

Last edited Jan 31, 2020

Created on Jan 31, 2020

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

This example shows a smiley face created with D3.js, where circles are dynamically added to an SVG canvas based on an array of values passed to an `updateVis` function. The circles change color—red for values under 30 and blue for values above—demonstrating data-driven styling. Using D3 v5’s `select`, `selectAll`, `data`, and `enter` methods, the code appends `<circle>` elements with attributes for radius, position, and fill. The included `q3.csv` file provides a year-based running total dataset, though it is not referenced in the JavaScript logic shown.

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 create an interactive smiley face using D3.js, with eyebrows that move in response to data. It shows fundamental DOM manipulation and data-binding techniques by loading a CSV file and mapping its values to visual attributes. The code uses `d3.select` to target the SVG element, `d3.csv` to load the data, and then implicitly drives the face’s dynamic features. The rendering is done as inline SVG, with the face drawn directly through D3’s selection and attribute methods.

Iiascchwen

89% match

Loading thumbnail…

Let's make a face with D3.js!

A D3.js example demonstrates fundamental DOM manipulation by rendering a smiley face with movable eyebrows, using SVG elements. The code loads population data from a CSV file and appends rectangle shapes to the SVG canvas via `d3.select` and `d3.csv`, though the data is only logged to the console. The visualization relies on D3 v5’s selection and data-binding methods, with the face constructed through chained attribute calls on SVG elements.

Lleothimoteo

88% match

Loading thumbnail…

Let's make a face with D3.js!

This example builds a simple smiley face in an SVG canvas using D3.js version 5, focusing on fundamental DOM manipulation. It appends a red circle with a stroke to the SVG element via `select` and `append`, then applies attributes for radius and position. The code also styles the SVG with a red border through CSS, while a linked video demonstrates animated eyebrows. The visualization highlights basic D3 selection, element creation, and attribute setting without data inputs.

Ppa1raju

88% match

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

87% match

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental D3.js DOM manipulation by building a smiley face from circles whose eyebrows shift. It shows how the data-join pattern works step by step: first, five red apples are appended as circles using `selectAll`, `data`, and `enter`, then the array is mutated and re-joined to reveal how `exit` selects and recolors removed elements. The code uses D3 v5’s `select`, `range`, and the SVG coordinate system, rendering into an inline SVG canvas. It provides a hands-on introduction to enter, update, and exit selections without any real dataset.

ZZhi Guangda

87% match

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to construct a smiley face using D3.js version 5, focusing on fundamental DOM manipulation with SVG elements. The code explicitly appends a group and a circle element to the SVG canvas, positioning them at the center of a 960×500 viewport. It uses the `select` and `append` methods from the `d3` namespace to build the geometric face outline, with a transparent fill and black stroke. The visualization is purely programmatic, with no external data source, and includes a static smile path defined directly in the HTML markup.

TTheRoadSign

87% 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

87% match

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates fundamental DOM manipulation with D3.js by building a smiley face whose eyebrows animate. The visualization loads population data from a CSV file using `d3.csv`, though the data itself does not drive the face’s rendering. The face is drawn entirely with SVG elements selected and appended via `d3.select` and standard DOM methods. The eyebrows move through D3’s selection and transition APIs, highlighting how D3 can directly manipulate existing SVG nodes without data joins or scales. The page uses D3 v5 and renders all graphics in a single SVG container.

TTheRoadSign

87% match