Skip to main content
SimilarExport ZIP
100%

Untitled

✓ Published1🌍 Public
RReekMajumder
Last edited Nov 9, 2020
Created on Nov 9, 2020
Forked from Untitled

A yellow face with black-outlined eyes and a smiling mouth is drawn using D3.js v6 SVG primitives within a React project. The face is centered on an SVG canvas, with circles for the eyes and an arc-generated path for the mouth. Animated eyebrows, also created with D3's arc API, transition vertically over two seconds, moving up and then back down, demonstrating the use of `transition().duration()`. The visualization showcases fundamental D3 selections, attribute manipulation, and SVG path generation through the `arc` function.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

A yellow circle face with black-outlined eyes, animated eyebrow rectangles, and an arc-based mouth is rendered in SVG. The eyebrows slide downward and back upward over two sequential two-second transitions using D3's `transition` method. The visualization is built with React, uses D3 v6 functions `select` and `arc`, and centers all facial features via SVG group transforms.

RReekMajumder
96% match
Loading thumbnail…

Untitled

A yellow circle with a black outline represents a face, featuring two black eyes and rectangular eyebrows. The eyebrows animate vertically, moving down and back up over two seconds each, creating a surprised or blinking expression. The visualization is built with SVG primitives and animated using D3 v7's transition methods. The mouth is drawn as an arc path using D3's arc generator, and the layout is positioned using explicit coordinates.

Hharshb863
91% match
Loading thumbnail…

Untitled

A yellow face is drawn as an SVG circle with white eyes and black pupils, a curved mouth, and small blue tear circles. The visualization is implemented in D3 v5 within a React framework, using `d3.select` to reference the SVG and appending elements like circles, rects, and a `d3.arc`-constructed path for the mouth. The eyebrows, styled as rectangles, animate downward over 2 seconds via D3 transitions, creating a frowning expression. The code specifies fixed pixel dimensions and positions for all facial features, rendering statically with no external data source.

PPatilShruti20
91% match
Loading thumbnail…

Let's make a face with D3.js

A yellow face with black-outlined eyes, animated eyebrows, and a static arc-shaped mouth is rendered in an SVG. Using D3.js v5 and React, the code selects the SVG, calculates its dimensions, and appends a centered group for positioning. It draws circles for eyes and rectangles for eyebrows, then applies chained `transition().duration()` methods to animate the eyebrows up and down. The mouth is generated with D3’s `arc()` generator, while coordinates are computed via template literals.

AAmr Eldemerdash
89% match
Loading thumbnail…

Untitled

A smiling face rendered as an SVG data visualization, built with React and D3. The face consists of a red circle with a blue stroke as the background, two black eyes, and a D3 `arc`-generated mouth path. React components manage the SVG elements, while D3's `arc` function calculates the mouth's curved shape using specified inner and outer radii and start and end angles. The layout positions elements around a central coordinate, with fixed offsets for the eyes and mouth radius.

BbetoAR506
88% match
Loading thumbnail…

Face with D3.js!

A yellow circle face renders in SVG with two eyes, animated eyebrows, and a black arc-based mouth. The face is centered using fixed pixel coordinates in a 960-by-500 viewport. D3 v5 selections append the shapes, while chained `transition().duration(2000)` calls animate the rectangular eyebrows upward and back down. The mouth path uses `d3.arc()` with an inner and outer radius to create a curved shape. React scaffolds the page, and d3-selected elements respond to the pre-set attributes and timing.

TTienTheBros
88% match
Loading thumbnail…

Face with D3.js!

A yellow circle face renders in SVG with two eyes, animated eyebrows, and a black arc-based mouth. The face is centered using fixed pixel coordinates in a 960-by-500 viewport. D3 v5 selections append the shapes, while chained `transition().duration(2000)` calls animate the rectangular eyebrows upward and back down. The mouth path uses `d3.arc()` with an inner and outer radius to create a curved shape. React scaffolds the page, and d3-selected elements respond to the pre-set attributes and timing.

TTienTheBros
88% match
Loading thumbnail…

Hello D3.js!

A cheerful face with yellow circular head, black-outlined features, and a smiling arc mouth is drawn using SVG. The eyes and eyebrows animate upward and back down repeatedly using chained `transition().duration()` calls. Built with React and D3 v6, the example selects the SVG element, computes dimensions from its attributes, and uses the `arc()` generator from D3 to create the mouth path. The code demonstrates basic D3 selections, attribute manipulation, and timed animations.

Aalotia
88% match