Skip to main content
SimilarExport ZIP
100%

Fork of 04 - let's make a face - dataviz 2018

✓ Published0🌍 Public
KKiran3295
Last edited Feb 21, 2022
Created on Feb 21, 2022

A yellow smiley face with black eyes and eyebrows is drawn centered in an SVG canvas using D3 v7. The face consists of a filled circle for the head, two circles for eyes, and an arc path for a smile. The eyebrows are rectangular shapes that continuously animate up and down using chained `transition` calls with `duration` values. The code builds the visualization with D3 selections, the `arc` generator for the mouth, and explicit SVG attribute assignments for positions and dimensions.

AI-generated description

datraviz 2018 #4 - smiley w/ d3.js

MIT Licensed

Similar vizzes

Loading thumbnail…

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

A yellow smiley face is drawn on an SVG canvas, with two eyes and a mouth created using D3's `arc` generator. The eyebrows, rendered as rectangles, animate upward and back down repeatedly via chained `transition` calls with a 2-second duration each. The code uses D3 v5 selections to append circles, rectangles, and a path, and stores numeric layout variables for spacing and offsets.

Aanmarsan
93% match
Loading thumbnail…

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

A yellow smiley face fills an SVG canvas, with animated eyebrows that move up and down via chained transitions. The face is built entirely with D3.js v5 selections and shape generators, using `select` for DOM manipulation, `arc` for the mouth path, and SVG `circle` and `rect` elements for the face, eyes, and brows. The code computes positions from the SVG’s dimensions and centers a group with a translate transform. No external data is used; the visualization demonstrates fundamental D3 update and transition patterns.

KkumariPankaj
92% match
Loading thumbnail…

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

This visualization demonstrates a yellow smiley face built with D3.js, featuring two eyes and a curved mouth created using an SVG path with the d3.arc() API. The face’s eyebrows, rendered as rectangles, move vertically through a chained transition that animates their transform attribute up and down over two-second intervals. The code uses d3.select and d3.arc from the D3 v5 library to construct the SVG elements, with eyebrows shifting smoothly via transition.duration, while the static face parts remain fixed on a 960×500 canvas.

SSadafNaseem
92% match
Loading thumbnail…

Fork of 04 - let's make a face - dataviz 2018

A stylized smiley face, drawn with gray, red, and green shapes, shows animated eyebrows that repeatedly raise and lower via chained D3 transitions. The face, eyes, and mouth are built with SVG circles and an arc path, positioned with manual coordinate math. Using D3 v7, the code selects the `svg` element and applies `transition.duration` with `.on('end')` callbacks to loop the eyebrow animation indefinitely. The brows are rectangles inside a grouped `<g>` element, and the mouth is generated with `d3.arc` using explicit radius and angle values.

Aajayrao0
92% match
Loading thumbnail…

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

This example shows a friendly yellow smiley face rendered as an SVG, with eyes and a mouth drawn using D3 shapes. The face’s eyebrows animate by moving upward and then returning to their original position over two two-second transitions. Using d3.select and d3.arc, the code builds the circle, eye, eyebrow rectangles, and mouth path, then applies chained transition() calls to shift the eyebrow group’s transform attribute. The visualization runs in a 960×500 SVG canvas with no external data, relying entirely on hardcoded dimensions.

AAsmitha-Sa
92% match
Loading thumbnail…

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

A yellow smiley face, built from SVG shapes, demonstrates D3.js v5’s DOM manipulation and transition methods. The code appends a circle for the head, two for the eyes, rectangles for eyebrows, and a path generated with the `arc` function for the mouth. The eyebrows animate by moving up and down via sequential `transition().duration()` calls on a group element. This example shows basic data-joins and attribute updates, with a static yellow face rendered in an SVG canvas.

SSANEEM MOHAMMAD
92% match
Loading thumbnail…

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

A yellow smiley face with animated eyebrows is rendered in an SVG. The face is composed of D3.js shapes: a circle for the head, two circles for the eyes, and an arc for the mouth. The eyes' rect eyebrows repeatedly move up and down using chained D3 `transition` calls with a 2-second duration each. The code uses D3 v5's `select`, `append`, and `attr` functions to build the SVG DOM directly.

CCorey-PT
92% match
Loading thumbnail…

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

This example draws a yellow smiley face with D3.js, featuring two circular eyes, rectangular eyebrows, and an arc-shaped mouth. The eyebrows animate upward and then return to their original position over two sequential two-second transitions. The visualization uses D3 v5’s `select`, `append`, and `transition` methods to manipulate SVG elements, with coordinates computed from the viewport dimensions. The mouth is generated using the `arc` generator with specified inner and outer radii and angle values.

DDharanitharan-J
92% match