Alex Piccolo

@piccoloa·5 public vizzes

Loading and Parsing CSV File

This example demonstrates loading and parsing a CSV file by fetching CSS named colors data from a GitHub gist and logging the raw text to the browser console. It uses the Fetch API with async/await to retrieve the file, then displays the parsed content as plain text. The visualization renders a large title on the page with the body font size set to 13em, though the main focus is the console output. No chart or graphical representation is produced, highlighting the data-loading step before any visualization occurs.

May 6, 2020

Loading thumbnail…

Smiley Face Part V

A grid of fifteen smiley faces renders as SVG through React components. Each face randomly sizes its stroke width, eye radius, mouth width, and mouth radius using `Math.random`. The `Face` component composes `BackgroundCircle`, `Eyes`, and `Mouth`, where the mouth uses `d3.arc` to draw a half-circle path. The `FaceContainer` wraps children in a translated `<g>` element, and the app maps over `range(5*3)` to generate the grid.

May 5, 2020

Loading thumbnail…

Smiley Face Part VI

A smiley face rendered with React and D3, scaled to fill the browser window. The code builds the face from primitive SVG shapes: a yellow circle with a black stroke for the head, two black circles for eyes, and a D3 `arc` path for the mouth. React components manage the SVG structure, while D3's `arc()` generator computes the mouth’s curved path using specified inner and outer radii and start and end angles. The face is centered via an SVG group transform, with eye and mouth positions offset from the center point.

May 4, 2020

Loading thumbnail…

Smiley Face Part III

A yellow smiley face fills the browser window, with two circular eyes and an arc-shaped mouth rendered inside a circular head using SVG. The visualization adapts to the viewport size, centering the face and scaling the head radius based on window height. React components structure the SVG elements, while `d3.arc()` computes the mouth path with specified inner and outer radii and angular bounds. The eyes and stroke width are positioned using fixed offsets from the center, with black outlines defining the face features.

May 4, 2020

Loading thumbnail…

Smiley Face Part II

A large yellow smiley face rendered with React and SVG fills the entire browser window, scaling its features proportionally to the viewport dimensions. The face consists of a circular head, two eye circles, and an empty space where a mouth would be, using React components to compute positions relative to the center. The code imports React and ReactDOM, defines constants for eye offsets and radii, and draws the SVG shapes with the `circle` element. The rendering approach uses declarative React elements to generate the SVG markup, with the head's radius tied to the window height.

May 4, 2020