deepakalevoor2

@deepakalevoor2·3 public vizzes

Fork of Darren's Vizhub face Part 4+

This visualization displays a 3-by-6 grid of randomly generated smiley faces. Each face is composed of separate SVG shapes—a yellow circle for the head, two eyes, a triangular nose, and a mouth created with a D3 arc—assembled using React components. The code leverages D3's `range` and `arc` functions alongside React's `StrictMode` to render the faces, with each face’s dimensions and positions (eye offset, radius, tooth size) randomized using `Math.random`. The data source is procedural, generating the faces through JavaScript logic rather than an external dataset.

May 2, 2021

Loading thumbnail…

Fork of Smiley Face Part IV

A smiling face is drawn as a simple data visualization using React and D3 within an SVG canvas. The yellow face and black outline are created with a circle, while the eyes and mouth are separate circle and arc shapes. The code uses the `d3.arc()` API to generate the mouth path, and React components render the SVG elements. All shapes are positioned relative to a central point using D3’s arc generator and React’s transform attribute. The example demonstrates a hybrid approach, combining React’s component structure for UI with D3’s shape utilities for drawing.

May 2, 2021

Loading thumbnail…

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

This example demonstrates fundamental DOM manipulation with D3.js by constructing a yellow smiley face with eyes, eyebrows, and a mouth. The face is drawn using SVG elements, including circles for the face and eyes, rectangles for eyebrows, and a path created with the `d3.arc` function for the mouth. The entire composition is centered using an SVG `g` element and translated coordinates. The only animated behavior is a 2000-millisecond `transition` that moves the eyebrow group upward by 50 pixels and then back to its original position, creating a simple blinking or raising motion.

May 2, 2021