mikaylag

@mikaylag·4 public vizzes

Loading and Parsing CSV Data

This example demonstrates how to fetch and display raw CSV data in the browser console. It retrieves a named CSS colors dataset from a GitHub gist using the Fetch API, then uses the `response.text()` method to parse the CSV content as plain text. The parsed output is logged directly to the console via `console.log(text)`, showing the data without any visual chart or table. The code relies on native JavaScript features like `fetchText` and async/await syntax rather than external libraries.

Jul 20, 2021

Loading thumbnail…

Smiley Face Part

A grid of 18 randomly generated smiley faces fills the screen, each face composed of a yellow background circle, two eyes, and an arc-shaped mouth. React components structure the face layout, while D3's `arc()` API generates the mouth path. All faces are rendered as SVG within a single React app, with randomized stroke widths, eye offsets, and radii creating visual variety across the grid.

Jul 6, 2021

Loading thumbnail…

Fork of Smiley Face Part 1

This example renders a classic smiley face using React and D3’s `arc` generator within an SVG. A yellow circle forms the head, with two black circles for eyes and a mouth drawn as an arc path. The D3 arc builds the mouth shape from specified inner and outer radii and start and end angles, while React manages the component structure and SVG elements. Hardcoded dimensions and offsets define the face’s proportions, and the code uses React’s `ReactDOM.render` to mount the visualization.

Jul 1, 2021

Loading thumbnail…

Smiley Face part 1

A yellow circle with a black outline represents a face, and two smaller black circles serve as eyes in this partial smiley face visualization. The SVG rendering appears on a 960 by 500 pixel canvas, with the face centered and the eyes offset to either side. The code uses React and ReactDOM to render the SVG elements, with the main App component returning the face circle and a separate index.html file providing the structure for two additional eye circles. The visualization does not include a mouth, leaving the smiley face incomplete.

Jun 29, 2021