Skip to main content
SimilarExport ZIP
100%

Let's make a face with D3.js

✓ Published2🌍 Public
RResl411
Last edited Nov 6, 2019
Created on Nov 6, 2019

A yellow smiley face drawn with D3.js appears centered on a dark background, with circular eyes, rectangular eyebrows, and a curved mouth built from an arc path. The example demonstrates SVG shape creation and animation using d3-selection and d3-arc, as the eyebrows transition vertically twice via chained `transition().duration()` calls. The face is constructed from fixed numeric constants for spacing and dimensions, rendered inside an SVG element sized 960 by 500 pixels.

AI-generated description

import { select } from 'd3';

const svg = select('svg');

const circle = +svg.append('circle');

const width = +svg.attr('width');

const height = +svg.attr('height');

console.log(width);

circle.attr('r', height / 2);

circle.attr('cx', width / 2);

circle.attr('cy', height / 2);

MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas using D3.js, with two eyes, eyebrows, and a mouth created via basic shapes and an arc path. The entire face is centered with a group translation, and the eyebrows animate upward and back down over four seconds using chained `transition` calls. The code imports `select` and `arc` from D3 v5, sets circle, rectangle, and path attributes programmatically, and relies on SVG for rendering.

Ddbidwai
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face, rendered as SVG primitives, appears centered on a dark background. D3.js code appends a circle, eyes, eyebrows, and a mouth path created with the `arc` function. The animation uses chained `transition().duration()` calls to move the eyebrows down and back up over two seconds, demonstrating fundamental DOM manipulation. The example uses d3.v5 with the `select` and `append` APIs to build the figure.

Ggorfoula
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face drawn with SVG shapes—a circle for the head, two circles for eyes, and a path generated by the arc function for the mouth—appears centered in a 960×500 viewport. The code imports select and arc from D3 v5, using SVG groups to position features. The eyebrows, rendered as rectangles, animate by moving up and down through chained transition().duration() calls, while the static face elements remain fixed.

Ssemopz
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face is drawn on an SVG canvas with D3.js, featuring eyes, eyebrows, and a mouth. The eyebrows transition up and down repeatedly over two-second intervals using D3's `transition()` and `attr()` methods. The face is built from basic SVG shapes—circles for the eyes and a path generated with `d3.arc()` for the mouth. All elements are positioned dynamically based on the SVG's width and height attributes.

MMathias Brem
96% 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
96% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with a black outline and three eyes is drawn using D3.js. The shape is assembled from SVG circles, rectangles, and arc-generated paths for the nose and mouth. The code uses d3.select, d3.arc, and chained transitions to animate the eyebrows, which move upward and then back down over a two-second duration. The example demonstrates basic DOM manipulation and SVG rendering with D3 v5.

DDimitarDraganov
96% match
Loading thumbnail…

Let's make a face with D3.js

A yellow circle with black facial features forms a smiley face on an SVG canvas. Two eyes and a mouth are drawn using D3 shapes, while a pair of dark eyebrows animate vertically in a looping transition, moving up and then back down. The face is centered via a group transform, with the mouth created using the d3.arc path generator. The animation uses chained transition calls on an SVG group element to shift the eyebrows repeatedly.

HHasideluxe
95% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow smiley face with black outlines is drawn on an SVG canvas, centered in the viewport. Its eyes, eyebrows, and mouth are all composed of basic geometric shapes. Using D3.js v5, the code builds the face by appending circles, paths, and rectangles to SVG groups. An animation sequence uses chained `.transition()` calls to shift the eyebrows up and down, with each movement lasting two seconds. The mouth is created using the `arc()` API, while the overall structure demonstrates fundamental SVG DOM manipulation via D3 selection and attribute methods.

AAndrey Chergik
95% match