Fork of D3 Starter

100%

Fork of D3 Starter

✓ Published3🌍 Public

Last edited May 12, 2023

Created on Mar 14, 2023

A cheerful SVG face, drawn with D3 v7, blinks its eyes and grows pink blush marks before settling into a steady stare. The example uses basic D3 selections and transitions to animate circle positions and radii over timed intervals, while CSS keyframes control the blush fill. Rendering relies on SVG shapes and an arc-generated mouth, all orchestrated through D3's `transition` API.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of D3 Starter

This example renders a simple animated face using D3 v6 with SVG. The code draws a yellow circle as the head, two black eyes, and a mouth created with the `d3.arc` path generator. The eyebrows, implemented as rectangles, animate up and down using `d3.interval` and chained `transition.attr` calls to shift their vertical position every 1.5 seconds. The visualization demonstrates basic D3 selection, SVG shape creation, and transition-based animation in a minimal starter template.

JJaemin Ahn

88% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates a simple animated smiley face built with D3 v6 and rendered as SVG. It shows how to structure a basic D3 project using ES6 imports and a separate bundle file, with the page loading from an HTML shell and stylesheet. The visualization uses `d3.select` and `d3.arc` to construct the face, eyes, and a mouth, while a chained `transition().duration()` animates the left eyebrow rising and falling. The fixed SVG canvas is 960 by 500 pixels, and all elements are positioned via explicit width and height attributes.

XXavier Bost

87% match

Loading thumbnail…

Fork of D3 Starter

This example uses D3 v7 to render a simple yellow smiley face on an SVG canvas. The code builds the face from basic shapes: a circle for the head, two circles for eyes, rectangles for eyebrows, and a path created with the `arc()` function for the mouth. An animation sequence, driven by chained `transition()` calls with a 2000-millisecond duration, moves the eyebrows down and back up. The underlying data is positional, defined by hard-coded constants like `eyeSpacing` and `eyeRadius`, directly set as SVG attributes through D3's selection and append methods.

CChris Beaumont

87% match

Loading thumbnail…

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

A smiling face built with SVG elements appears on a pink circle with a yellow stroke, featuring eyes, nostrils, teeth, and a mole. Using D3.js v5, the code constructs the face with `select` and `arc`, positioning shapes via `attr` transforms. Eyebrows animate through chained `transition().duration(2000)` calls, moving and rotating independently in a looping motion. The example demonstrates fundamental DOM manipulation and SVG rendering with D3 transitions.

CChi Aghaizu

87% match

Loading thumbnail…

Fork of D3-1: Making a face

A yellow circle with blue eyes, animated eyebrows, and a curved mouth forms a stylized face rendered in SVG. The code uses D3 v7 selections to append SVG primitives, and a D3 arc path generator to create the mouth based on specified inner and outer radii and angles. Two rectangles represent eyebrows and use chained `transition().duration()` calls to move them vertically over two seconds before returning. The example demonstrates basic D3 shape generation, SVG group elements for shared eye styling, and timed attribute transitions.

AAsmitha-Sa

86% match

Loading thumbnail…

Fork of Intro D3

This example shows a cartoon face built from SVG shapes—a yellow circle head, eyes, eyebrows, and an arc-based mouth—centered and animated with D3 transitions. The code uses d3.arc to generate the mouth path, while d3.select and d3.transition animate the eyebrow group’s vertical offset over two alternating two-second phases, creating a blinking or winking effect. Rendered via d3.v6 in a React-free HTML page, it demonstrates basic shape composition and chained transition.attr methods.

MMar-99

86% match

Loading thumbnail…

Fork of D3 Starter

This example shows a simple, static smiley face drawn as vector shapes in an SVG canvas. It uses the D3.js library (v7) to select the SVG element and programmatically append a large yellow circle for the face, two smaller black circles for the eyes, and a path for the mouth. The mouth is created using the `d3.arc` API, which generates an SVG path based on specified inner and outer radii and start/end angles. The code demonstrates fundamental D3 techniques for creating and positioning graphical primitives within a coordinate system.

PPhillip Yoo

86% match

Loading thumbnail…

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

A smiling face is drawn with SVG shapes, with a yellow circle for the head, two eyes, and a mouth formed using the d3.arc path generator. The animated eyebrows, rendered as rectangles, repeatedly transition upward and back down over two-second intervals using D3's transition method. The example demonstrates fundamental DOM selection and manipulation through d3.select, attribute setting, and chained transitions, operating entirely within a 960×500 SVG canvas.

Ddheeraj1509

85% match