Skip to main content
SimilarExport ZIP
100%

Simple face with D3js

✓ Published2🌍 Public
RRodolfo Viana
Last edited Jan 2, 2021
Created on Dec 22, 2020

A yellow circle represents a simple face, with two black eyes and a mouth drawn using an arc path, all centered within an SVG canvas. The code uses D3.js v6 to select the SVG element and append shapes, including circles for the face and eyes and a path for the mouth. The arc generator from D3 creates the mouth shape, while the SVG attributes control positioning and styling, with a transform applied to center the entire group. The visualization is static, rendering directly in the browser via a bundled JavaScript file.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Let's make a face with D3.js!

A simple yellow circle face is drawn with D3.js, featuring two black eyes and an arc-based mouth. The visualization demonstrates basic SVG shape creation using D3 selections, appending circles and a path element. The mouth is generated with the `d3.arc()` generator, using specified inner and outer radii and angles to form a curved smile. The face is centered on a 960x500 SVG canvas, with eye positions offset horizontally and vertically from the center.

DDemi Johnson
91% match
Loading thumbnail…

Let's make a face with D3.js

A yellow circle with black outline and two black eyes forms a simple face using D3.js v5. The mouth is drawn as an arc path using the `d3.arc` generator, positioned within a centered `<g>` group. The SVG canvas is 960 by 480 pixels, with elements placed via absolute coordinates and the group's transform. The code selects the `svg` element and appends circles and a path, demonstrating basic SVG shape creation and coordinate positioning in D3.

DDavideSanto
91% match
Loading thumbnail…

D3.js

This example uses SVG and D3.js v5 to render a simple face composed of a yellow circle, two black eye circles, and a mouth drawn with an arc path. The circle is centered using a translated group element, while the eyes are positioned relative to the SVG’s width and height. The mouth is generated with D3’s `arc()` helper, specifying inner and outer radii and start and end angles. The code relies on d3-selection and d3-shape APIs, with data-driven attributes set explicitly rather than bound to a dataset.

Bbilalaamer
90% match
Loading thumbnail…

let's make a face with d3.js

A yellow circle with black eyes and an arc-based mouth forms a simple cartoon face in an SVG canvas. The code uses d3-selection to append and position the circles, while the mouth is drawn with d3.arc() using inner and outer radii plus start and end angles. All shapes are rendered directly as SVG elements, with dimensions derived from the SVG attributes. The face is centered within a 680×500 viewport, demonstrating basic geometric composition without data binding or interaction.

RRoque Luís Pina
90% match
Loading thumbnail…

Let´s make a face with D3.js!

A yellow circle with a black outline forms a face, two black circles serve as eyes, and an arc-shaped path creates a mouth. The SVG elements are centered using a translation transform, with eyes positioned at fixed offsets and the mouth drawn via D3's `arc` generator with specified inner and outer radii. The example uses D3 v7’s `select` and `append` methods to build the static composition.

JJpcofre
90% match
Loading thumbnail…

Lets make a face with with D3.JS

A yellow circle face rendered in SVG uses D3.js v6 to assemble eyes, eyebrows, and a smiling arc mouth from basic shapes. The code imports `select` and `arc` from D3, positioning features relative to the SVG’s width and height through translation. It draws two black eye circles with fixed spacing, rotated rectangles as eyebrows, and a mouth path generated by D3’s `arc` generator with specified inner and outer radii. The example demonstrates composing a recognizable figure from primitive geometric elements.

Yyvesponcon
90% match
Loading thumbnail…

Let's make a face with D3.js!

A yellow circle with two black eyes and an arc-shaped smile forms a simple cartoon face. The example uses D3.js v5 to append SVG circles for the head and eyes, and an `arc` generator to draw the mouth as a path. The face is centered within a 960×500 SVG canvas, with the mouth positioned using a translated group. The code relies on D3's `select` and `arc` imports, reading the SVG dimensions directly from its attributes.

LLex
90% match
Loading thumbnail…

make a face with d3.js

A simple face built from SVG shapes using D3 v5. The code creates a yellow circle with a red stroke for the head, two eyes with white pupils, and a mouth drawn as an arc path. It uses `d3.select` and `d3.arc` to position elements at fixed coordinates on a 960×500 SVG canvas. The example demonstrates basic D3 shape generation and attribute manipulation without data binding.

DDominika Modzelewska
90% match