jrydow

@jrydow·4 public vizzes

Load and parse csv data

This example demonstrates loading a remote CSV file and printing its contents to the browser console. It uses the Fetch API to retrieve the file from a GitHub gist URL containing CSS named colors data, then parses the response as plain text with response.text(). The code first defines an asynchronous fetchText helper function that returns the raw text, showing the manual parsing process without additional libraries like d3.csv.

Sep 6, 2021

Loading thumbnail…

React components

A grid of small yellow smiley faces, each with subtle random variations in eye size, eye placement, and mouth thickness, is rendered as reusable React components. The example demonstrates how D3’s `arc` generator creates the mouth path inside a `Mouth` component, while separate `BackgroundCircle`, `Eyes`, and `FaceContainer` components assemble the SVG face. The `index.js` file maps over a `range(6*3)` array to instantiate eighteen `Face` components, each using randomized parameters for its features.

Sep 6, 2021

Loading thumbnail…

React starter

A React starter example renders a simple smiley face using SVG primitives. The face consists of a yellow circle with a black stroke, two black eye circles, and a mouth drawn as an arc path. The code uses React components to structure the SVG markup, with D3's `arc` generator from `d3-shape` to compute the mouth’s path. Rendering is handled by `ReactDOM.render` within a `StrictMode` wrapper, while all geometry is computed from fixed pixel dimensions and offsets rather than any external data source.

Sep 2, 2021

Loading thumbnail…

Fork of HTML Starter

A yellow circle with a thick black outline fills most of the frame, while two smaller unfilled circles sit inside it, creating a simple face-like composition. The SVG markup uses fixed pixel coordinates and radii, with no JavaScript or data binding involved. The main circle is centered at (480, 250) with a radius of 250, while the two smaller circles are placed asymmetrically to suggest eyes. The rendering relies entirely on static SVG elements defined directly in the HTML, without any external libraries or dynamic generation.

Sep 2, 2021