Skip to main content
SimilarExport ZIP
100%

Rabbitface with D3.js

✓ Published2🌍 Public
Ddaanasma
Last edited Apr 28, 2020
Created on Apr 28, 2020

This example shows a rabbit-like smiley face built with D3.js, featuring a yellow circular head, eyes, buck teeth, and raised eyebrows. The code demonstrates fundamental DOM manipulation by appending SVG shapes and applying chained transitions that animate the eyebrows upward and change their fill to red, then return them to their original position and color. It uses D3 v5 selections and the `arc` generator for the mouth, with a static SVG canvas and no external data source.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.

MIT Licensed

Similar vizzes

Loading thumbnail…

Rabbitface with D3.js

A smiley face rendered as SVG with D3.js v5 demonstrates fundamental DOM manipulation by animating its eyebrows. The face is constructed using D3 selections and the `arc` generator for the mouth and left eyebrow, with circles for eyes and rectangles for teeth and the right eyebrow. A chained `transition` over two seconds moves the eyebrows downward, changes their fill to red, then returns them to their original position and color. The code imports `select` and `arc` from the D3 module and appends elements to an SVG canvas.

KKnightCrawler3
95% match
Loading thumbnail…

Fork of Rabbitface with D3.js

This visualization shows a smiling rabbit face with animated eyebrows. The face is constructed using basic SVG shapes—circles for the head and eyes, rectangles for eyebrows and teeth, and a D3 arc path for the mouth. Using d3-selection, the code appends these elements to an SVG canvas. A chained `transition()` with a two-second duration moves the eyebrows upward, changes their fill color to red, then moves them back to their original position with black fill. The D3 library version is v5, and all shapes are centered within a 960x500 SVG.

SShishiraRudrabhatla
91% match
Loading thumbnail…

face with D3.js!

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation with D3.js. The code selects an SVG element and builds the face using basic shapes, including circles for the eyes and a path generated with the `d3.arc` function for the mouth. Eyebrows are rectangle elements that move up and down using chained `transition` calls, each lasting three seconds. The example relies on D3 v5’s `select`, `arc`, and transition methods, rendering in SVG with only a script and stylesheet, without external data sources.

AArthurFJ
88% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn in the center of an SVG canvas, with a black-outlined circle, two eyes, a nose, arched mouth, and pair of rectangular eyebrows. The eyebrows animate upward and then back down in a looping sequence. Built with D3.js v5, the example demonstrates fundamental DOM manipulation using selection and append methods, along with the `arc` generator to create the mouth and nose, and `transition` with `duration` to move the eyebrow group. No external data is used; all shapes are coded directly.

LLinn
86% match
Loading thumbnail…

Let's make a face with D3.js!

This example shows a yellow smiley face drawn in SVG, with eyebrows that animate upward and then return to their original position. The face is constructed through fundamental D3.js DOM manipulation, using `select` and `append` to build circles, rectangles, and a path. The mouth is created with the `d3.arc` generator, while eyebrow movement relies on chained `transition().duration()` calls that modify a `transform` attribute. All shapes are centered within an SVG element sized 960 by 500 pixels.

DDan Mihaila
86% 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
86% match
Loading thumbnail…

Let's make a face with D3.js!

This example draws a yellow smiley face in SVG using D3.js, with circular eyes, rectangular eyebrows, and an arc-based mouth composed via the `d3.arc` helper. The face is centered by translating a group element to the middle of the viewport. The primary behavior is an animated eyebrow raise: the eyebrow group undergoes two sequential 2-second transitions using `transition.duration`, moving upward and then returning to its original vertical offset. The code demonstrates fundamental DOM selection, attribute setting, and chained transitions through D3's select and append methods.

VVincent Ko
86% match
Loading thumbnail…

Let's make a face with D3.js!

This example uses D3.js to build an animated smiley face with SVG elements, demonstrating fundamental DOM manipulation and transitions. Circles form the yellow head and eyes, while rectangles serve as eyebrows that move via chained `transition` calls. A black mouth is drawn using `d3.arc`, with its shape morphing between smile and frown through `attrTween` and an interpolator. The code relies on D3 v5’s selection methods, `arc`, and transition API to animate the facial features in sequence.

KKrister
86% match