nithin83

@nithin83·4 public vizzes

Fork of Smiley Face Part III

This visualization presents a minimalist smiley face built with React and D3.js v5, rendered as SVG. The code defines a yellow circular face with a custom fill color, positioning eyes and other facial features relative to center coordinates. The React component manages the SVG structure while D3’s `arc` function is imported for potential shape generation, though the current implementation focuses on static circle elements within a scaled and transformed group.

Mar 18, 2021

Loading thumbnail…

Fork of Smiley Face Part IV

This example renders a static smiley face using React and D3, drawing a single black circle with a dashed, dark-gray stroke onto an SVG canvas. The React component `App` computes the face’s dimensions—center coordinates, radius, and stroke width—and passes the radius to the `BackgroundCircle` child, which uses D3’s `arc` import (though only a plain `circle` element is output). The visualization is built with `d3.v5` and React 16.9, and the SVG is centered at 960 by 500 pixels, with the circle scaled vertically to create an elliptical face. No interactive or animated behavior is present.

Mar 13, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This example renders a stylized smiley face as a static SVG scene using React components and D3’s `arc` generator. The face is composed of multiple layered paths and circles, including dashed stroke contours, a dark mouth, and detailed eyes, all positioned via a translated coordinate system. The code demonstrates React’s declarative JSX for SVG elements, combined with D3 v5 utilities, and draws the entire illustration with hardcoded path data rather than external data sources.

Mar 13, 2021

Loading thumbnail…

Fork of Smiley Face Part II

This visualization presents a simple smiling face constructed from SVG ellipses and circles, with black facial features arranged against a blank background. The code uses React to render the SVG elements and d3.arc to define the mouth shape, although the current implementation only displays a single black ellipse. The face is centered on a 960 by 500 canvas, with constants defining eye positions, radii, and spacing for the intended facial features, though only the mouth base component is visible.

Mar 13, 2021