crazygaurab

@crazygaurab·4 public vizzes

Fork of Let's Make a Face Part I

This example shows a simple static SVG face composed of a yellow circle for the head and two smaller circles for the eyes, all drawn directly in the markup. The face is centered at 960 by 500 pixels, with a black stroke outlining the head. The code uses raw SVG elements—`circle` tags with attributes for position, radius, fill, and stroke—rather than any JavaScript library or data-driven approach. The rendering is fully declarative, with no interaction or animation, and the title references the “Let’s Make a Face” tutorial series.

Apr 24, 2022

Loading thumbnail…

Fork of Smiley Face Part II

This example shows a smiley face that scales to fill the browser window, with eyes positioned relative to the center and a head sized to the viewport height. Built with React, it uses JavaScript constants for dimensions and SVG primitives (circle elements) to render the face. The code uses ReactDOM to mount the component into the DOM, and the SVG is drawn within a transformed group to simplify coordinate calculations.

Apr 24, 2022

Loading thumbnail…

Loading and parsing csv data

This example demonstrates fetching a CSV file containing CSS named colors and parsing the CSV data for use in a visualization. The page uses JavaScript’s `fetch` API to retrieve the CSV from a remote GitHub Gist URL, which stores the color data. The code initiates the network request, but the display itself is minimal, showing only the loading and parsing step without any visual rendering. It uses the browser’s native `fetch` function to access the data source, with no external charting or parsing libraries.

Apr 22, 2022

Loading thumbnail…

Smiley Face

Five nearly identical smiley faces are rendered in a grid, each drawn with yellow circular heads, black eyes, and a curved mouth. The example uses React components (`BackgroundCircle`, `Eyes`, `Mouth`, `FaceContainer`) to assemble each face from SVG primitives, with a `d3.arc()` generator shaping the mouth path. A `d3.range()` array drives the repeated rendering, while the `Face` component passes configurable dimensions and offsets, keeping the faces visually consistent. The SVG faces are centered within their containers using a transformed `<g>` element.

Apr 22, 2022