Group 17 (@Nithishkumar-11), VizHub

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

A static smiley face built with SVG elements moves its rectangular eyebrows up and down as a looping animation. The code constructs the face using D3 v5 selections, appending a green circle for the head, two small circles for eyes, and an arc-generated path for the mouth. A two-stage `transition().duration(2000)` chain animates the eyebrow group's vertical position, translating it upward and then back to its original offset. The example demonstrates fundamental D3 DOM manipulation and chained transitions without external data.

Feb 23, 2023

Loading thumbnail…

Let's make a face with D3_Nithish.js!

This example demonstrates fundamental DOM manipulation with D3.js by building an animated smiley face. The face consists of SVG shapes—a green circle head, two eyes, eyebrows, and a mouth created with the `d3.arc` path generator. The code uses `d3.select` and `d3.append` to construct the elements, and `transition` with a 2000-millisecond duration to make the eyebrows move up and down repeatedly. The rendering approach relies on D3 v5’s selection and transition methods on SVG elements, with the face centered using an SVG `transform` translate.

Feb 23, 2023

Loading thumbnail…

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

A green SVG smiley face is drawn using D3.js v5, with a circular head, two eyes, rectangular eyebrows, and an arc-shaped mouth. The eyebrows continuously move up and down via chained `transition()` calls with a 2000-millisecond duration. The face is centered using an SVG `<g>` element transformed by the width and height of the `<svg>` container. The code uses D3's `select` and `arc` functions to construct the shapes and animate them.

Feb 23, 2023

Loading thumbnail…

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

A green SVG smiley face is drawn using D3.js v5, with a circular head, two eyes, rectangular eyebrows, and an arc-shaped mouth. The eyebrows continuously move up and down via chained `transition()` calls with a 2000-millisecond duration. The face is centered using an SVG `<g>` element transformed by the width and height of the `<svg>` container. The code uses D3's `select` and `arc` functions to construct the shapes and animate them.

Feb 23, 2023

Loading thumbnail…

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

This example demonstrates a smiling face with green skin, eyes, and a mouth, whose rectangular eyebrows animate downward and then back upward in a looping motion. Built using D3.js v5, the SVG is constructed through fundamental DOM manipulation methods like `select`, `append`, and `attr`, while the eyebrow movement uses chained `transition` calls with a 2000-millisecond duration. The mouth is drawn using the `arc` generator to create a path, and all elements are centered within a 700x500 canvas through SVG transforms.

Feb 23, 2023