Skip to main content
SimilarExport ZIP
100%

19_ cheap tricks for interaction D3.js!

✓ Published0🌍 Public
FFMajid-ops
Last edited Dec 18, 2020
Created on Dec 18, 2020

The example shows a yellow SVG smiley face with two eyes and a mouth, rendered using D3.js shape generators and SVG primitives. The code builds the face by appending circles, rectangles, and a path created with the `arc` generator to an `<svg>` element. It demonstrates simple animation where the eyebrows, drawn as rectangles, move upward and then return to their original position using chained `transition` calls with a duration of 2000 milliseconds each. The face is centered by translating a group element, with fixed numeric values controlling eye spacing, eyebrow size, and mouth radius.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face, rendered with SVG shapes, demonstrates fundamental DOM manipulation and animated transitions in D3.js. The example builds the face using appended `circle`, `rect`, and `path` elements, with the mouth generated via the `d3.arc` generator. Both eyebrows, created as rectangles, move up and down through chained `transition()` calls on their containing group, each lasting two seconds and alternating between two vertical offsets. The code uses D3 v5 selection methods and `attr` to position elements, with no external data source, purely illustrating programmatic shape creation and animation.

JJordan Chiu
89% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in SVG with D3.js, featuring circular eyes, a mouth created using the `d3.arc` shape generator, and animated rectangular eyebrows. The eyebrows transition vertically over two seconds up and then back down using D3’s `.transition().duration()`. The code demonstrates basic DOM manipulation by selecting the SVG element, appending groups and shapes, and setting attributes like radius, position, and fill. All rendering is SVG-based, with no external data source.

DD0no
89% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn and animated entirely in SVG using D3.js v5. The code selects the svg element and appends a group, then positions circles for the eyes, rectangles for the eyebrows, and an arc-based path for the mouth. The eyebrows animate upward and back via chained `transition().duration(2000)` calls on the group’s `transform` attribute. The example demonstrates basic DOM manipulation, shape creation, and transition sequencing with d3-selection and d3-shape’s `arc` generator.

Ggcappadaniel
89% match
Loading thumbnail…

Let's make a face with D3.js!

This example builds a smiley face from basic SVG shapes using D3.js, demonstrating core DOM manipulation and selection techniques. The code appends a yellow circle for the head, two eyes, rectangular eyebrows, and an arc-based mouth inside a centered group element. The eyebrows animate by chaining `transition` calls with a two-second duration, moving them upward and back down in an infinite loop. The implementation uses D3’s `select`, `append`, `attr`, and `arc` APIs to construct and position all elements.

LLinkous
89% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face with eyes, eyebrows, and a mouth, rendered as SVG shapes. The eyebrows animate by moving up and down through a sequence of d3.transition() calls, each lasting 2000 milliseconds. The code builds the face by appending circle, rect, and path elements to the SVG, using D3.js v5 selection and arc() to define the mouth’s curved shape. The animation demonstrates fundamental DOM manipulation with D3’s append and attr methods.

Bbilibili
89% match
Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how D3.js can build an animated smiley face from SVG primitives, showing a yellow circle head with black eyes, arched eyebrows, and a mouth. The eyebrows transition up and down repeatedly over two-second intervals using chained `transition().duration()` calls. The code uses D3 v5 selections, the `arc` generator to create the mouth path, and SVG attribute binding for positioning. All elements are centered dynamically using the SVG’s width and height, with facial features offset by fixed pixel values.

JJishen Xu
89% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face rendered in SVG demonstrates core D3.js DOM manipulation and transitions. The code builds the face from basic shapes—circles for the eyes and head, a rectangular eyebrow, and an arc-generated mouth—anchored within a centered group. Using d3-selection and d3-transition, the eyebrows animate upward and back down over two sequential two-second intervals. The example shows how D3’s select, append, attr, and transition methods compose to create dynamic, interactive-style visuals without external data, relying purely on hardcoded geometry and SVG coordinates.

DDy-Diana
89% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow SVG smiley face with black facial features demonstrates D3.js’s core DOM manipulation and transition APIs. The head, eyes, eyebrows, nose, and mouth are built by appending SVG circles, rectangles, and arcs via `d3.select` and `d3.arc`. Concurrent two-second `transition` chains animate the eyebrow group upward, eyeballs sideways, nose sideways, and mouth downward before returning all groups to their original positions. The example is rendered entirely in SVG and uses D3 v5 from a CDN.

Bbukbukbukka
89% match