preetham

@preethamntp·3 public vizzes

Let'd make a face with D3.js!

A yellow circle with eyes, eyebrows, and a mouth forms a cartoon face in SVG. D3.js v5 selections append the facial features, while a chained `transition().duration(2000)` animates the eyebrows up and down. The code uses `d3.select`, `d3.arc` (commented out), and attribute setters like `.attr()` and `.transition()` to build the static face and its motion. React hosts the D3 code, rendering into an SVG element with a fixed width and height.

Jan 23, 2020

Loading thumbnail…

Let'd make a face with D3.js!

A smiling face is drawn with SVG shapes, including a yellow circle, eyes, and a mouth created using `d3.arc()` with a custom inner and outer radius. The eyebrows are animated with `transition().duration(2000)`, moving up and down over two seconds using chained transitions on their `transform` attribute. Built with D3 v5 in a React framework, the visualization uses `select` and `arc` imports from the D3 library, with all elements appended to a centered `<g>` group within an SVG canvas of 960 by 500 pixels.

Jan 23, 2020

Loading thumbnail…

Let'd make a face with D3.js!

This example renders a yellow, smiley face in SVG using D3.js v5 within a React framework. It uses `d3.select` to append and transform `circle`, `rect`, and `path` elements, with `d3.arc` defining the mouth. The eyebrows animate up and down via chained `transition().duration()` calls, while the static face elements are centered using SVG `transform` attributes. The data is hardcoded, and rendering relies on SVG shapes rather than external datasets.

Jan 22, 2020