lets make a shape

100%

lets make a shape

✓ Published1🌍 Public

Last edited Mar 22, 2019

Created on Aug 27, 2018

This example constructs a simple face from basic SVG shapes, including a yellow circle head, eyes, eyebrows, nose, and a mouth. The eyebrows animate, moving up and down over time, while the data used comes from a hardcoded JavaScript array of car objects. The visualization uses D3 v5 for SVG manipulation and transitions, with the shape built by appending elements to an SVG group. The code also includes a car-report generator that filters and formats car data asynchronously.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

lets make a map!

This example displays a simple yellow smiley face constructed entirely with SVG shapes, including eyes, a nose, and a mouth, with animated eyebrows that bounce up and down. D3 v5 selections append and style the SVG elements, while the `arc` generator creates the mouth path. The eyebrows use chained `transition` calls to repeatedly shift their vertical position. The page loads a static dataset of three cars via a simulated asynchronous `getCars` promise, though the visualization itself does not reference that data.

SShane Carey

85% match

Loading thumbnail…

lets make a face

A cartoon face built from SVG shapes animates its right eyebrow while displaying a filtered car report. Yellow face circle, eyes, and an arc-based mouth are constructed with D3 selections, with transitions driving the eyebrow motion. A hardcoded JSON dataset of used cars loads asynchronously, and a report listing affordable cars is generated and rendered in a `<pre>` element.

PPeter S

84% match

Loading thumbnail…

Shapes with SVG

This example uses D3 v5 to draw a simple, cheerful face entirely with SVG shapes. It creates a yellow circle for the head, two smaller black circles for eyes, and a semi-circular path for a mouth, all positioned precisely within the SVG canvas. The code directly uses the D3 `select` API to append shapes to the SVG and the `d3.arc` function to generate the mouth's path data. The visualization demonstrates fundamental SVG drawing capabilities with D3.

Rralevine

84% match

Loading thumbnail…

Shapes with SVG and CSS

This example shows a stylized face constructed from a yellow circular head, black eyes, rectangular eyebrows, and a curved mouth. The visualization demonstrates the animation of SVG shapes using D3.js and CSS. The eyebrows are animated with a D3 transition, moving up and down over a two-second duration. The mouth is created using D3’s `arc` function with specified inner and outer radii and angular sweep. The SVG canvas is 960 by 500 pixels, and the scene is centered using a group transform.

EEkundayo Blessing

83% match

Loading thumbnail…

Let's make a face with D3.js

This example constructs a cartoon face out of basic SVG shapes, including a yellow circle for the head, two eyes, eyebrows, and an arc-based mouth. It demonstrates how to build and position SVG elements using D3.js v5, selecting the `<svg>` element and appending groups and shapes with transformation attributes. The code uses the `arc` generator from D3 to create the mouth path, while circles and rectangles are placed manually via coordinate offsets. The dataset is a static, hardcoded set of shape definitions rather than external data, emphasizing SVG drawing techniques over data binding.

Jjeffko18

83% match

Loading thumbnail…

let's make a face

This example displays a simple yellow circle with a black outline centered inside an SVG canvas, accompanied by a static list of cars below it. The visualization uses D3 v6’s `select` function to locate the SVG element and `append` a circle, with its radius and position derived from the viewport’s height and width. The circle’s fill and stroke are set via attribute chaining, while the page’s layout and typography are styled through standard CSS. The underlying data is hardcoded list items shown in plain HTML.

Sshb02192

83% match

Loading thumbnail…

Let's make a face with D3.js

This example builds a cartoon face from basic SVG shapes using D3.js v5. A yellow circle forms the head, while smaller circles, rectangles, and an arc path create the eyes, eyebrows, and mouth. The code uses d3.select to manipulate the SVG, and d3.arc to generate the mouth’s path with specified angles. All elements are positioned relative to a central translation, with fixed pixel offsets for facial features. The result demonstrates how D3’s shape generators and selections can construct simple compound graphics declaratively.

YYedrup

83% match

Loading thumbnail…

Shapes and Colors with SVG and CSS

This example shows a simple yellow face built from SVG shapes, including a circular head, eyes, eyebrows, and a mouth formed by a curved path. The SVG elements are positioned and styled using D3 v6 methods such as `select`, `append`, and `attr`. A CSS transition animates the eyebrows upward and back downward over two seconds, while the mouth is drawn using the `d3.arc` generator with specified angles. The data is generated procedurally within the code rather than loaded from an external source, and the animation relies on D3’s built-in `transition` method.

KKateryna

83% match