Skip to main content
Log in
P

PoojithaPothini123

@PoojithaPothini123·5 public vizzes

Loading thumbnail…

Fork of Smiley Face Part IV

This fork of Smiley Face Part IV renders a cartoon smiley face with decorative elements—including a hat, ears, eyebrows, and a nose—using React and D3 v7. The face is built from SVG shapes: circles for the eyes, `d3.arc()` paths for the mouth and ear arcs, and lines for the eyebrows. All components are positioned within an SVG coordinate system centered on the face, with React managing the component structure and D3 generating the arc geometries. The code uses D3’s `arc()` API for curved shapes and React’s `ReactDOM.render` to mount the visualization.

Feb 23, 2023
Loading thumbnail…

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

A smiling face built from basic SVG shapes animates its eyebrows up and down in a continuous loop. The example demonstrates fundamental DOM manipulation with D3.js v5, using `select` and `append` to create circles, rectangles, and an arc path for the mouth. Two chained `transition().duration()` calls move the eyebrow group between two vertical positions. The face is centered within an SVG canvas using an affine transform, with all geometry defined by explicit numeric constants.

Feb 23, 2023
Loading thumbnail…

Fork of Smiley Face Part II

This example renders a classic smiley face as a static SVG graphic. A yellow circle is outlined with a thick black stroke, while two smaller circles form the eyes, and a semicircular arc creates the mouth. Built with React and D3.js v7, the visualization calculates all geometry numerically, using D3’s `arc()` generator with specified radii and angles to produce the mouth path. The SVG elements are positioned relative to a central transform, and the code is displayed as a standalone React application.

Feb 23, 2023
Loading thumbnail…

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

A smiling face built from basic SVG shapes animates its eyebrows up and down in a continuous loop. The example demonstrates fundamental DOM manipulation with D3.js v5, using `select` and `append` to create circles, rectangles, and an arc path for the mouth. Two chained `transition().duration()` calls move the eyebrow group between two vertical positions. The face is centered within an SVG canvas using an affine transform, with all geometry defined by explicit numeric constants.

Feb 22, 2023
Loading thumbnail…

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

A smiley face built with D3.js animates its eyebrows in a continuous up-and-down cycle. The code constructs the face from SVG shapes, using `d3.arc` for the mouth and appended circles and rectangles for the eyes and brows. Two chained `transition` calls, each lasting two seconds, shift the eyebrow group’s transform attribute to create the motion. The example demonstrates basic DOM manipulation and animation in D3 v5, rendering entirely with SVG elements on a 960×500 canvas.

Feb 22, 2023