Himanshu Sharma

@Zamporine·6 public vizzes

Face V

This example renders a stylized yellow face built with React and D3 v7, displaying a circular head, two black eyes, and a curved mouth. The code defines React components for the background circle and left eye, while the right eye is written inline as a JSX element. The mouth is generated using the `arc` function from the `d3-shape` package, producing an SVG path within a `<g>` element that uses a transform attribute to center it. All shapes are drawn as SVG elements, with the face composed directly in the source code rather than from external data.

Apr 7, 2022

Loading thumbnail…

Face IV

This example shows a cartoon face built from SVG shapes, with a yellow circular head, two black eyes, and a curved mouth. The visualization is rendered using React components that combine JSX with D3’s `arc` generator, which produces the mouth’s path. SVG circle elements and a group element with a `transform` attribute position the facial features. The code uses `d3.arc` from the D3-shape package, and all elements are drawn in a 960 by 500 viewport.

Apr 7, 2022

Loading thumbnail…

Assignment of Fork of Face III - Grin + EyeBrows + Teeth

This visualization renders a cheerful cartoon face with a yellow circular head, black eyes, arched eyebrows, and an open grin showing teeth. Built with React and D3 v7, it uses SVG path elements and the `d3.arc()` generator to construct the upper and lower lips, while ellipses depict the teeth. Group elements with `transform` attributes position the mouth and eyebrow arcs, and the input data is hardcoded in JavaScript.

Apr 7, 2022

Loading thumbnail…

Assignment of Fork of Face III - Grin + EyeBrows

This example shows a stylized cartoon face built with React and D3.js, featuring a grin made from upper and lower lip arcs, plus thick eyebrows above the eyes. The face renders in SVG using D3’s `arc()` generator from the `d3-shape` package to define the lip and eyebrow paths, while group elements with `transform` attributes position each part relative to the face center. Circles for the head and eyes are drawn directly in JSX, with styling from `fill` and `stroke` props. The code uses ES6 template literals to construct the transform strings and relies on ReactDOM to mount the component.

Apr 7, 2022

Loading thumbnail…

Fork of Face III

A stylized face rendered as yellow SVG circles on a dark background. The code uses React to declaratively define the face, with D3’s `arc` function from the `d3-shape` package generating a mouth path placed inside a group element via a template-literal transform. Eye and head positions are calculated from viewport dimensions, while stroke widths and offsets are hard-coded. No external data is shown; all geometry is computed directly in the component.

Apr 5, 2022

Loading thumbnail…

Face I and II

A smiling face built with two yellow circles, black stroke outlines, and two eyes rendered side-by-side. The face is drawn as a static SVG graphic, with one version created using direct HTML markup and the other using React components. The code uses React 18 and ReactDOM to render the SVG elements, computing positions from fixed width, height, and eye offset constants. The visualization demonstrates declarative component-based SVG rendering without any interactive behavior.

Apr 5, 2022