Brandon Williams

@williums·4 public vizzes

Loading Data with React and D3

This example demonstrates loading a CSV dataset into a React application and displaying a concise summary of its contents. The visualization presents a text-based report showing the data file size in kilobytes, the number of rows, and the number of columns. The application fetches the CSS named colors dataset from a GitHub gist using D3’s `csv` function, stores the result in React state via `useState`, and renders the output as SVG text within a `<pre>` element. The `message` function computes the file size using `d3.csvFormat().length` to calculate kilobytes.

Apr 26, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v7. It fetches a remote CSV file containing CSS named colors and displays basic summary statistics about the dataset, including file size, row count, and column count. The visualization uses `d3.csv` to asynchronously load and parse the data, then `d3.csvFormat` to calculate the formatted size. Results are rendered as large text in a `<pre>` element, showing the data’s dimensions at a glance.

Apr 26, 2022

Loading thumbnail…

Let's Make a Face Part 2

Eighteen randomized smiley faces repeat across the page, each face varying in stroke thickness, eye radius, and mouth radius. The SVG is generated with React components, while D3’s `range` creates the array of faces and `d3.arc` constructs the mouth’s annular path. Each face is centered in a 160-by-160 viewport with a yellow circle, offset black eyes, and a semi-circular mouth.

Mar 26, 2022

Loading thumbnail…

Smiley Face p1

This example shows the first step in constructing a simple smiley face using basic SVG shapes. A large yellow circle forms the head, with two smaller black circles placed as eyes, all on a plain white background. The rendering is done directly with SVG elements, using the `circle` tag and inline attributes such as `cx`, `cy`, `r`, and `fill` to define geometry and styling. The code uses no external libraries, relying solely on native SVG through the browser’s document object model.

Mar 21, 2022