Rabbitface with D3.js

100%

Rabbitface with D3.js

✓ Published0🌍 Public

Last edited Apr 28, 2020

Created on Apr 28, 2020

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.

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

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.

Ddaanasma

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

92% 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

89% match

Loading thumbnail…

A Face with D3.js!

A smiley face drawn with D3.js features animated eyebrows that move up and down. The example demonstrates fundamental DOM manipulation by building the face from SVG primitives: circles for eyes, a rectangle for the nose, a path from `d3.arc` for the mouth, and rectangles for eyebrows. The animation uses chained `transition().duration(2000)` calls to shift the entire eyebrow group's `transform`, showing how D3 manipulates SVG attributes over time. The SVG canvas is set to 960×500 with an orange background.

YYoung Song

88% match

Loading thumbnail…

face with D3.js!

This example demonstrates how to build an animated smiley face using D3.js, manipulating SVG elements such as circles, rectangles, and paths. The face has two eyes and eyebrows that move up and down in a looping transition, while a fixed mouth is drawn using a D3 arc generator. The code uses D3 selections and the `transition` API with `duration` to animate the eyebrow group’s transform attribute, showcasing fundamental DOM manipulation. Rendered entirely in SVG, the face is centered within a 960×500 viewport, with styling defined in a separate CSS file.

RRena Patel

88% match

Loading thumbnail…

Let's make a face with D3.js!

A smiley face drawn in SVG animates as its eyebrows bounce upward and settle back down. The example demonstrates fundamental D3.js DOM manipulation by constructing the face from appended shapes—circles for the eyes and head, rectangles for the eyebrows, and a path generated with the `arc` helper for the mouth. A chained `transition` with a two-second duration moves the eyebrow group twice, creating the animation. The code uses D3 v5 selections and attributes on a static SVG canvas.

Eevesshaw

88% match

Loading thumbnail…

Let's make a face with D3.js!

A smiley face rendered in SVG demonstrates basic D3.js DOM manipulation, with animated eyebrows that move to change the expression. The example uses D3 v5's `select` and `arc` functions to construct the facial features, building circles and arcs for the eyes, mouth, and brows within an SVG canvas. The code shows how D3 can directly create and update SVG elements through its data-binding and selection APIs, while the accompanying stylesheet hides page overflow for a clean, focused presentation.

MMarian

88% match

Loading thumbnail…

Let's make a face with D3.js!

A smiley face rendered as SVG elements animates its eyebrows in a continuous loop. The example demonstrates fundamental D3.js DOM manipulation by selecting an SVG canvas, appending a centered group, and building the face from circles, rectangles, and an arc path. Eyebrows transition vertically using chained `transition().duration()` calls, moving down 50 pixels then returning. The code imports `select` and `arc` from D3 v5, constructing the mouth with the arc generator’s inner and outer radii and angle parameters.

MMunTatt Yap

87% match