100%

Fork of Fork of Circles with D3 - Akhil Charugulla

✓ Published0🌍 Public

Last edited Feb 27, 2024

Created on Feb 27, 2024

Forked from Fork of Circles with D3 - JC

This visualization uses D3.js to render a cartoonish sad face with pink hair, cheeks, and a tooth, constructed from a series of overlapping circles and rectangles arranged on a green background. The code defines static position, radius, and fill color data for each facial feature, then binds this data to SVG circle elements via D3’s `selectAll().data().join()` pattern. The rendering relies on D3’s `select` and `attr` methods to set coordinates and styling, with no animation or interaction.

AI-generated description

Creating circles with D3.

Challenge

Fork this example
Modify it
Maybe make it Halloween themed
Maybe make it Christmas themed
Be creative

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js! by kiran jyothi bodduluri - 11604571

This example builds a cartoon face using D3.js selection and data-joining methods to create SVG shapes including eyes, pupils, eyebrows, a nose, a mouth, ears, hair, and teeth. The face is assembled programmatically inside an SVG container, with each facial feature appended as a separate circle, rectangle, path, or polygon element. The code uses d3.select and append with chained attr calls to construct the static composition, which is centered via a translate transform. The visualization demonstrates fundamental DOM manipulation with D3 v7, applying CSS classes for styling facial features.

AAkhilaSiripurapu

83% match

Loading thumbnail…

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

This example demonstrates how to build a cartoon face using fundamental D3.js DOM manipulation, with animated eyebrows that move up and down over time. The face is rendered in SVG and includes features like eyes, blush, a nose, mouth, ears, teeth, hair, and a beard, all constructed from basic shapes. The code uses d3.select, d3.append, and transition methods for animation, and d3.arc to generate the nose and mouth paths. Data binding via d3.selectAll and enter() is used to create the teeth, while a for loop appends hair and beard rectangles.

AAkhilaSiripurapu

82% match

Loading thumbnail…

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

A smiling face is drawn with SVG shapes, including red circular head, eyes, and a mouth created with the d3.arc path generator. The example demonstrates basic D3.js selection and DOM manipulation, using d3.select and chained .append calls to build the hierarchy. Eyebrows animate through a transition sequence, moving up and down via attribute tweening on the eyebrow group's transform. Both the head and eyes use simple shape attributes, while the face layout is centered using dynamic width and height calculations from the SVG element.

Aakhilgupta11

82% match

Loading thumbnail…

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

This example demonstrates how to construct a smiley face using fundamental D3.js v5 DOM manipulation with SVG elements. The code builds a red circular head with eyes, a nose, ears, eyebrows, a mouth, and teeth through individual shape selections using `d3.select` and SVG attribute chaining. It uses the `d3.arc` generator to create the nose and mouth paths, while static SVG elements like circles and rectangles are positioned manually. The face is centered via a group transform, and the eyebrows are rotated to give the face an expressive, animated look.

Aakhilgupta11

82% match

Loading thumbnail…

Fork of Fork of Let's make a face with D3.js! by kiran jyothi bodduluri - 11604571

This visualization demonstrates fundamental D3.js DOM manipulation by constructing a cartoon smiley face from primitive SVG shapes, including a circular head, eyes, pupils, nose, eyebrows, rectangular teeth, a mouth arc, and semi-transparent blush circles. The code uses a mix of `d3.select` and chained `.attr()` methods to create and position elements on an SVG canvas, with an `arc()` generator defining the nose and mouth paths. A static flower-like arc forms the nose, while the mouth is drawn as a curved path with a distinct inner radius. The `d3.v5` library manages the SVG rendering, and hardcoded pixel coordinates (e.g., 390, 150 for the eyes) position the facial features rather than data-driven layout.

NNikitha123171

82% match

Loading thumbnail…

Fork of akarshana_work

This example uses D3.js v5 to draw a sad, crying face as an SVG. The code builds the face from primitive shapes—a circle for the head, rectangles for closed eyes and angled eyebrows, and an arc path for a downturned mouth. Tear-shaped ellipses are added beneath each eye. The animation, driven by chained `transition` calls with `duration` values, makes the tears fall downward and then snap back to their original position, repeating the cycle.

224cs049@kpriet.ac.in

82% match

Loading thumbnail…

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

A yellow smiley face is rendered in SVG with D3.js, featuring circular eyes, a mouth shaped with the `d3.arc` generator, and rectangular eyebrows that animate upward and back via chained `transition` calls. Built with D3 v5, the code selects the SVG element, sets its dimensions, and uses `select` and `arc` imports to construct the face, while the eyebrows' positions are manipulated through `attr` transitions over two-second intervals.

AAkhilaSiripurapu

82% match

Loading thumbnail…

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

A playful D3.js animation renders a cartoon smiley face from SVG primitives, including a pink circle head, eyes, arched eyebrows, a red nose, a mouth, and white teeth. Using D3’s `arc()` generator, the mouth and eyebrow paths are drawn, while `transition()` and `duration()` animate the eyebrows moving up and down at different speeds. The code constructs groups with `append("g")`, positions elements via `attr("transform", ...)`, and imports utilities like `select` and `arc` from the d3 module.

SSharmaAshwini

81% match