Skip to main content
SimilarExport ZIP
100%

Fork of Blank Slate with Hot Reloading

✓ Published2🌍 Public
Ggurtberly@gmail.com
Last edited Aug 30, 2024
Created on Aug 30, 2024

This example uses D3.js to build a simple, animated face graphic. It renders a yellow circle with eyes and eyebrows that move up and down via a chained `transition().duration()` animation, while the mouth is drawn as an arc path using `arc()` with specified inner and outer radii. The code demonstrates SVG element creation and attribute manipulation, with a hot-reload-enabled development setup. The face’s static structure and animated eyebrows are generated procedurally, with no external data input.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This example shows a smiley face rendered as an SVG graphic composed of a yellow background circle, two eyes, and an arc-based mouth. The React components `Backgroundcircle`, `Eyes`, and `Mouth` assemble the face inside an SVG canvas, with the mouth path generated using `d3.arc()`. The code demonstrates VizHub V3’s hot reloading capability, where a blank slate scaffold is extended with modular components, all rendered through `ReactDOM.render` into a root element.

Kkhadarmoha53@gmail.com
85% match
Loading thumbnail…

Fork of D3 Starter

This example renders a simple animated face using D3 v6 with SVG. The code draws a yellow circle as the head, two black eyes, and a mouth created with the `d3.arc` path generator. The eyebrows, implemented as rectangles, animate up and down using `d3.interval` and chained `transition.attr` calls to shift their vertical position every 1.5 seconds. The visualization demonstrates basic D3 selection, SVG shape creation, and transition-based animation in a minimal starter template.

JJaemin Ahn
84% match
Loading thumbnail…

Fork of D3 face

This demo builds a cartoon face from basic SVG shapes—a yellow circle for the head, black circles for eyes, and an arc for the mouth—using D3 v7’s `select` and `arc` helpers. The eyebrows are rectangles that animate up and down via chained `transition().duration(2000)` calls. All elements are grouped and centered within an SVG using static transform attributes, with no external data source.

Wwieswies
84% match
Loading thumbnail…

Fork of Intro D3

This example shows a cartoon face built from SVG shapes—a yellow circle head, eyes, eyebrows, and an arc-based mouth—centered and animated with D3 transitions. The code uses d3.arc to generate the mouth path, while d3.select and d3.transition animate the eyebrow group’s vertical offset over two alternating two-second phases, creating a blinking or winking effect. Rendered via d3.v6 in a React-free HTML page, it demonstrates basic shape composition and chained transition.attr methods.

MMar-99
84% match
Loading thumbnail…

Fork of Fork of Let's make a face with D3.js!

This example demonstrates basic D3.js DOM manipulation by constructing a yellow smiley face with green eyes, red arc mouth, and grey eyebrows that animate upward and back down in a looping transition. The code builds SVG shapes—circles, rectangles, and a path using the `d3.arc` helper—inside a centered group, then applies chained `transition().duration(2000)` calls to move the eyebrow group along the y-axis. The face is rendered in an SVG canvas with dimensions set from the HTML attributes, and all styling is applied directly via D3 attribute methods.

55577Satvik
84% match
Loading thumbnail…

Fork of Let's make a face with D3.js!

This example builds a smiling face from basic SVG shapes using D3.js v5, with a yellow circle for the head, two eyes, rectangular eyebrows, and an arc-based mouth. The code demonstrates fundamental DOM manipulation and chained transitions: the eyebrows animate upward and back down over four seconds via `transition.attr` calls on a `g` element. Rendered in a 960×500 SVG, the face is centered using a translated group, with dimensions for features like eye spacing and eyebrow width defined as variables. No external data is used; the visualization relies solely on hardcoded geometry and D3’s selection and arc APIs.

Ccraig harbottle
84% match
Loading thumbnail…

Fork of Let's make a face with D3.js! SD

A smiling face built with D3.js v5 animates its eyebrows up and down. The demo shows fundamental SVG shape creation and DOM manipulation, using `d3.arc` for the mouth and chained `transition()` calls to shift the eyebrow group's transform. The yellow circle face, eyes, and rectangular brows are all appended to a centered `g` group, with no external data source.

Bbballviz
84% match
Loading thumbnail…

Fork of Fork of Fork of Fork of d3js

This example renders an animated face built from SVG primitives, including a yellow circular head with eyes, eyebrows, and an arc-based mouth. The eyebrows move up and down via chained `transition().duration()` calls, creating a subtle blinking or surprised expression. The code imports `select` and `arc` from D3 v5, uses `d3.arc()` to define the mouth’s path, and positions all elements relative to a centered `<g>` group. The SVG canvas is 960 by 500 pixels, with a blue stroke on the head and no external data source.

Mmuslimaaliyeva
84% match