Skip to main content
SimilarExport ZIP
100%

first viz

✓ Published1🌍 Public
GGuitong Li
Last edited Jan 31, 2022
Created on Jan 30, 2022
Forked from HTML Starter

This example renders a simple face on an SVG canvas using D3.js. A large circle forms the head, and an arc path creates the mouth, which animates downward in two sequential transitions, each lasting two seconds. The visualization uses D3’s `arc` generator, `select`, `append`, and `transition` methods, applying transforms to shift the mouth’s position over time. The SVG background is set to a muted olive color via D3’s style method, with no external data source.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

1. face

A stylized face rendered as a single circle uses D3.js v7 to draw a smiling mouth with an animated arc path. The circle is centered within an SVG, while the mouth transitions its transform over two sequential 2,000-millisecond animations, shifting downward. The code employs `d3.arc`, `d3.select`, and SVG attributes, with a background color set via `styles.css`. The animation uses chained `.transition()` calls, and the static header metadata lists React as the framework, though the visible code is plain JavaScript with D3.

GGuitong Li
84% match
Loading thumbnail…

SVG and CSS

This example creates an animated SVG face using React and D3 v5. The visualization shows two large eyes and eyebrows rendered as circles and rectangles within a yellow circle on a black stroke, with a smile drawn using an arc path. The eyebrows animate upward and back down over two seconds via chained `transition()` calls that modify the group’s transform attribute. The code imports `select` and `arc` from D3 to manipulate SVG elements and generate the mouth shape, all within a fixed 960x500 canvas.

PPraneeth Varma
84% match
Loading thumbnail…

Let's make a face with D3.js

This example builds a simple cartoon face from basic SVG shapes, including circles for the head and eyes, rectangles for eyebrows, and a path for the mouth. The face is grouped and centered within the SVG canvas. The animation is driven by D3 transitions, which sequentially move the eyebrows downward over two-second intervals. The code uses D3 v5's selection, arc, and transition APIs to construct and animate the elements, with the mouth generated using the `d3.arc` geometry generator to create a curved path.

Ssingularity6033
84% match
Loading thumbnail…

Let's make a face with D3 and SVG

This example demonstrates how to build an animated cartoon face using D3 and SVG, with a yellow circle for the head, black-outlined eyes, and an arc-based mouth centered on a 960x500 canvas. The eyebrows are rectangles that bounce up and down using chained `transition().duration(2000)` calls. The code imports `select` and `arc` from D3 v5 and uses React for the framework. SVG elements are constructed programmatically, with the mouth path generated via the `arc()` API using inner and outer radii and angular ranges.

Pp4pravin
83% match
Loading thumbnail…

Hello VizHub

This example renders a stylized smiling face in an SVG canvas using D3 v5. The visualization animates the eyebrows in a looping vertical motion via chained `transition().duration()` calls. The face is constructed with basic shapes: a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a D3 `arc()` path for the mouth. The code reads the SVG dimensions directly from the DOM attributes to position elements around a central group.

VVijay
83% match
Loading thumbnail…

Hello VizHub

This example renders a stylized smiling face in an SVG canvas using D3 v5. The visualization animates the eyebrows in a looping vertical motion via chained `transition().duration()` calls. The face is constructed with basic shapes: a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a D3 `arc()` path for the mouth. The code reads the SVG dimensions directly from the DOM attributes to position elements around a central group.

VVijay
83% match
Loading thumbnail…

Hello VizHub

This example renders a stylized smiling face in an SVG canvas using D3 v5. The visualization animates the eyebrows in a looping vertical motion via chained `transition().duration()` calls. The face is constructed with basic shapes: a yellow circle for the head, two circles for eyes, rectangles for eyebrows, and a D3 `arc()` path for the mouth. The code reads the SVG dimensions directly from the DOM attributes to position elements around a central group.

VVijay
83% match
Loading thumbnail…

Let's Make a Face with D3.js

A smiling face built from SVG circles and an arc appears on a blue background. The left eye is static, while the right eye slides downward over two seconds using a D3 transition on the `y` attribute. The mouth is drawn with `d3.arc()` inside a `<g>` element, positioned via a translate transform. The example uses D3 v3 selections and appends shapes to an SVG canvas with explicit width and height attributes, rendering entirely through animated vector graphics.

AAaron Guillen
83% match