Making a scatterplot!

100%

Making a scatterplot!

✓ Published1🌍 Public

Last edited Jul 6, 2020

Created on Jul 3, 2020

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

This example draws a yellow, smiling face with eyes, eyebrows, and a mouth inside an SVG canvas. The face is built from D3 primitives, starting with a circle for the head, separate circles for the eyes, rectangles for the brows, and paths created via the `d3.arc()` function for the mouth. The eyebrows use a chained `transition()` with a two-second duration to animate their position up and down, creating a subtle bouncing effect; the rest of the face remains static. The code relies on D3 v5 and SVG rendering, with the visual elements positioned using absolute coordinates relative to the SVG’s width and height.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

This example draws a smiling yellow face out of SVG shapes using D3.js v5. It constructs a circle for the head, two circles for eyes, rectangles for eyebrows, and an arc path for the mouth, all centered on an SVG canvas. The eyebrows animate upward and back down over four seconds using chained `transition` calls with a two-second duration each. The code relies on D3’s `select` and `arc` functions to build the scene entirely from static attributes, with no external data source.

Fforcox43

87% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face drawn with SVG circles, rectangles, and an arc path, with animated eyebrows that rise and fall in a looping transition. The code uses D3.js v5 selections to append elements to an SVG canvas and `transition().duration()` to move the eyebrow group vertically. Using `d3.arc` for the mouth and fixed pixel offsets for features, it demonstrates fundamental DOM manipulation and chained transitions without external data.

Rranger

87% match

Loading thumbnail…

Let's make a face with D3.js!

This example draws a smiling face using SVG shapes built with D3.js selections and the `d3.arc` path generator for the mouth. A yellow circle forms the head, with two dark eyes and rectangular eyebrows positioned via coordinate offsets. The eyebrows animate upward and back down over four seconds using chained `transition` calls with `attr` updates on the group’s transform. All elements are centered by translating a parent `<g>` based on the SVG’s dimensions, demonstrating fundamental DOM manipulation and data-driven styling without external data or force simulation.

Ssourcebox-bug

87% match

Loading thumbnail…

Let'd make a face with D3.js!

A yellow SVG face built with D3 v5 displays a simple smiley with two eyes, animated eyebrows, and a curved mouth. The code draws the face using SVG shapes such as circles, a rect, and a path generated with the `d3.arc()` helper. Transitions animate the eyebrows by shifting their vertical position over two seconds, while the mouth delays before changing its radius. The face is centered within a 960×500 SVG canvas using a transform, with static features defined by constants for spacing and dimensions.

885TT58

87% match

Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face rendered in SVG, with its eyebrows moving up and down in a looping animation. The face is built entirely through D3.js v5 selections, using `append` to create circle, rectangle, and path elements, and `arc()` to generate the mouth shape. Eye spacing, eyebrow dimensions, and positions are defined as constants, while the eyebrow motion is driven by chained `transition().duration()` calls that shift the group’s `transform` attribute. The code runs in a standalone HTML page with a 960x500 SVG canvas.

SShengjie-Sun

87% match

Loading thumbnail…

Let's make a face with D3.js!

This example builds a smiling face in SVG using D3.js v5, with a yellow circle for the head, two eyes, and an arc-shaped mouth drawn via `d3.arc()`. The eyebrows are rectangles that animate up and down repeatedly using chained `transition().duration()` calls, creating a winking or surprised effect. The entire face is centered by translating a group element to the middle of an 800×400 SVG canvas, with dimensions read from the SVG attributes and hard-coded offsets for facial features.

Mmwhiten

87% match

Loading thumbnail…

Let's make a face with D3.js!

This example displays a cheerful face composed of SVG shapes, including a yellow circle, two eyes, eyebrows, and an arc-based mouth. The eyebrows animate by moving downward and returning upward over two sequential 2-second transitions. The visualization is built with D3.js v5, using selections, the `arc` generator for the mouth, and `transition` methods to create the movement. All elements are centered within an SVG canvas sized 960 by 500 pixels.

Lleandermaerkisch

87% match

Loading thumbnail…

Let's Make a face with D3.js!

This example uses D3.js to draw a smiling face entirely with SVG shapes: a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a path generated with the `arc` function for the mouth. The code employs ES6 imports, selections, and attribute setters to construct the face, centered within a 960x500 SVG. The eyebrows feature an animated loop using chained `transition` calls with `.duration(2000)`, moving them up and down over two seconds each way. The visualization demonstrates basic SVG composition and D3’s transition API for simple motion.

Rreo440

87% match