Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js!

✓ Published0🌍 Public
IIgor Chernega
Last edited Mar 29, 2020
Created on Mar 29, 2020

A red ball scales down and moves upward along a road drawn as a black trapezoidal path, creating the illusion of perspective. The animated transition uses D3.js v5's `transition.attr` to change the circle's radius and y-coordinate over two seconds. The SVG rendering includes a static road path defined with a template literal, while the ball's animation is the sole dynamic element. No data source is used; the example demonstrates basic D3 shape and transition APIs.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

This example creates a smiling face from basic SVG shapes, including a red circle head, two eyes, rectangular eyebrows, and a mouth drawn with an arc path. The main visual behavior is an animated eyebrow movement, achieved by applying a two-stage D3 transition to the eyebrow group's transform attribute over four seconds. The code demonstrates fundamental D3.js v5 DOM manipulation by using the selection, append, and attr methods to build the SVG structure, while the transition method handles the animation loop.

RRafiul Ahmed
81% match
Loading thumbnail…

Let's make a rolling ball with D3.js

This example demonstrates how to build a rolling ball animation using D3.js v5 with SVG rendering. The code constructs a circular graphic with alternating black and orange arc segments using the `d3.arc` generator, then applies transitions to rotate the entire group element. While the primary ball design is commented out, the active code adds a simple paragraph element styled with red text, showing basic SVG selection and manipulation. The implementation imports `select` and `arc` from D3 and includes a custom text measurement utility for calculating string dimensions.

AArnaud Gbaguidi
81% match
Loading thumbnail…

Let's make a face with D3.js!

A smiling face is drawn with D3.js, rendered as SVG shapes and animated with the transition API. The code uses D3 v5 to construct a yellow circle head with eyes and a path-based mouth, generated via the `arc` function with specified inner and outer radii. Eyebrows move up and down over two seconds using chained `transition` calls, showcasing animation of SVG attributes. The example relies on D3's `select` and `append` for DOM manipulation, with geometry defined by variables for spacing and offsets.

YYunLing
80% match
Loading thumbnail…

Let's make a face with D3.js!

A stylized face constructed from SVG primitives animates through a sequence of mood shifts. D3.js v5 selects the SVG canvas and uses chained `transition().duration()` calls to tween the circle's fill, reposition the eyes with translate transforms, drop and raise the eyebrows, and rotate the mouth path. The face is drawn with geometric shapes including circles, rectangles, and an arc path generated via `d3.arc()`.

Ssrrajendran
80% match
Loading thumbnail…

Let's make a face with d3.js

This example builds a cartoon face from a red circle with a black stroke, two animated eyes, an arc-shaped patch of hair, and a mouth created with d3.arc(). The left and right eyes use chained transition() calls to shift their cx attributes over two seconds each, creating a subtle side-to-side movement. The SVG is centered within a 960×500 viewport, and the face is grouped and translated to the middle of the canvas. The code imports select and arc from the d3 library and uses v5.

BBoyan Petrov
80% match
Loading thumbnail…

Let's make a face with D3.js!

A playful D3.js example builds a cartoon face from basic SVG shapes, including a red circle for the head, eyes, eyebrows, a mouth, and a beard. The code uses d3.arc to generate the mouth and beard paths, and d3.transition with a repeating loop to animate the eyebrows up and down while rotating them slightly. All elements are positioned relative to the SVG center using transform attributes, and the animation runs continuously via a recursive repeat function.

DDaniel Prevoznik
80% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face rendered as an SVG animation demonstrates core D3.js DOM manipulation. The code appends geometric elements—circles for the face and eyes, rectangles for eyebrows, and a path built with `d3.arc` for the mouth—onto an SVG canvas. Chained `transition().duration()` calls animate the eyebrow group’s vertical position, moving them up and down over four seconds. Using `d3.select` to create and transform elements, this example highlights how D3 binds data-independent shapes and drives simple timeline-based motion without external data sources.

Ggcappadaniel
79% match
Loading thumbnail…

Let's make a face with D3.js!

A smiley face rendered as an SVG animation demonstrates core D3.js DOM manipulation. The code appends geometric elements—circles for the face and eyes, rectangles for eyebrows, and a path built with `d3.arc` for the mouth—onto an SVG canvas. Chained `transition().duration()` calls animate the eyebrow group’s vertical position, moving them up and down over four seconds. Using `d3.select` to create and transform elements, this example highlights how D3 binds data-independent shapes and drives simple timeline-based motion without external data sources.

Ggcappadaniel
79% match