Priya Tiwari

@Priya-Tiwari5·10 public vizzes

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

A smiley face is drawn with D3.js v5, using SVG circles for the eyes and face, a path for the mouth, and rectangles for the eyebrows. The face is centered in an SVG canvas using a group transform. The eyebrows animate vertically over two seconds via chained `transition` calls, moving up and then back down. The code uses D3's `select`, `attr`, `append`, and `arc` APIs, with dimensions and offsets defined as constants.

Oct 3, 2023

Loading thumbnail…

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

A smiley face drawn with SVG elements animates its eyebrows upward and downward in a repeating two-second cycle. The code builds the face by appending circles for the eyes, rectangles for the eyebrows, and a D3 arc path for the mouth using D3.js v5. Eyebrow motion is achieved by chaining `transition().duration(2000)` calls on a group element, which alternately shifts its `transform` attribute. The example demonstrates fundamental DOM manipulation and selection with `d3.select` and `d3.append`.

Oct 3, 2023

Loading thumbnail…

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

A yellow smiley face is drawn in SVG, with circular eyes and rectangular eyebrows that animate vertically. The eyebrows move up and down in a repeating loop using D3’s `transition()` method, while the mouth is created with the `d3.arc` shape generator. The code selects SVG elements with `d3.select`, uses `d3.arc` for the path, and animates attributes via chained transitions. Drawing is done over two seconds per movement, with the face centered in a 960×500 viewport.

Oct 3, 2023

Loading thumbnail…

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

A smiling face drawn with SVG shapes animates its eyebrows up and down repeatedly. The D3.js v5 code uses `select` to target the SVG element, `append` to add circles for the face and eyes, and rectangles for eyebrows. A `path` with `d3.arc` creates the mouth. A chained `transition().duration(2000).attr(...)` call moves the eyebrow group between two vertical positions, creating the looping movement.

Oct 3, 2023

Loading thumbnail…

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

A smiling face made of SVG shapes is centered on a yellow background. The face's eyebrows perform a repetitive up-and-down motion, creating a brief animation. Constructed with D3.js v5, the code uses `select`, `append`, and `attr` to build the SVG elements, while chained `transition().duration(2000)` calls animate the eyebrow group's vertical position. The mouth is drawn using `d3.arc()` with specified inner and outer radii and angular ranges.

Oct 3, 2023

Loading thumbnail…

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

This fork of "Let's make a face with D3.js!" shows a simple smiley face drawn with SVG shapes—a yellow circle for the head, two dark circles for eyes, a curved mouth using `d3.arc`, and rectangular eyebrows. The animation demonstrates basic DOM manipulation: the eyebrows move up and down via chained `transition` calls with `duration(2000)`, altering their vertical transform. The code uses `d3.select` and `d3.arc` from D3 v5, with all elements positioned relative to a centered `<g>` group. The visualization highlights how D3 can bind data and animate SVG attributes declaratively.

Oct 3, 2023

Loading thumbnail…

Fork of React Starter

This example displays a large, centered “Hello React!” message across the browser window. It uses React 18 and ReactDOM to render a single functional component, with the message styled via CSS. The code imports `createRoot` and calls `root.render` to mount the app into a `div` with id `root`.

Oct 3, 2023

Loading thumbnail…

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

A smiling face rendered in SVG animates as its eyebrows repeatedly rise and lower, demonstrating basic shape construction and timed transitions with D3.js v5. The code builds the face from geometric primitives—circles for the eyes, rectangles for brows, and a path generated with the `arc` helper for the mouth—all positioned via SVG transforms. A chained `transition().duration()` sequence moves the eyebrow group up and down in a two-second loop, showing how to animate attributes without external data.

Oct 3, 2023

Loading thumbnail…

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

A yellow smiley face with animated eyebrows demonstrates fundamental DOM manipulation with D3.js. The face is drawn using SVG elements, including circles for the head and eyes, rectangles for eyebrows, and an arc-based path for the mouth. Eyebrows animate upward and downward through chained `transition()` calls with a two-second duration each. The code uses D3 v5 and imports `select` and `arc` directly. All elements are centered within an SVG via a translate transform.

Oct 3, 2023

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal web page that displays the message "Hello Tiwari!" in large, centered text. It shows a static, styling-focused presentation with no interactive or data-driven elements. The implementation uses plain HTML, CSS, and JavaScript, with the page structure in `index.html` and a CSS class controlling the font size and alignment. The code does not reference any external libraries or data sources, making it a bare-bones starter template for HTML and CSS experimentation.

Oct 3, 2023