Maha Uddin

@wassupitzmaha·4 public vizzes

Maha's Grandiant Smiley Faces

A grid of eighteen SVG smiley faces displays randomized facial features, each implemented as a React component that composes smaller components. Using React and D3 v5, the code leverages D3's `arc` generator to create the mouth path, while a linear gradient fills the background circle. The faces are rendered by mapping over a `d3.range` array, with randomized stroke, eye, and mouth parameters set via `Math.random`.

Jan 23, 2025

Loading thumbnail…

Fork of Smiley Face Part V

A React component draws a smiley face with a red-to-yellow linear gradient, rendered inside an SVG. The face is built from separate components for the background circle, eyes, and mouth, with the mouth generated using D3’s `arc` generator. The code demonstrates ES6 module imports and React Fragments to compose the visualization, using React 16.9 and D3 v5.

Jan 4, 2025

Loading thumbnail…

A Gradient Smiley Face

This visualization displays a gradient smiley face composed of a circular background, two eyes, and an arc-shaped mouth, all centered within an SVG canvas. The face uses a radial gradient (defined as `url(#grad5)`) for the background circle, with black strokes for the face outline and features. Built with React and D3 v7, the code leverages D3’s `arc()` generator to create the mouth path, while React components manage the rendering of each facial element. The layout is computed from fixed dimensions and offsets, with the entire face translated to the center of the 960x500 viewport.

Jan 4, 2025

Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This example demonstrates VizHub V3’s runtime environment, which enables continuous hot reloading and interactive widgets. It renders a simple HTML page as a starting template, with the entry point defined by an exported `main` function in `index.js` that receives a `container` DIV and `options` for state management. Without any external libraries, it uses plain DOM properties like `clientWidth` and `clientHeight` to size the container, while holding the Alt key and dragging numbers in the editor updates values live without manual refresh.

Jan 2, 2025