corinna-fab

@corinna-fab·10 public vizzes

Fork of Pathetic Bar Chart

This example presents the top 30 most-checked-out items from a Seattle Public Library dataset as a set of horizontal bars, with each rectangle’s width mapping to a numeric checkout month and its vertical position mapping to the checkout count. The chart deliberately omits axes, labels, and scales, emphasizing raw data shapes over readability. Built with React and D3 v5, the code loads CSV data via `d3.csv`, computes scales using `scaleBand` and `scaleLinear`, and renders SVG `<rect>` elements inside a React component, with loading state handled through React hooks.

Jan 22, 2022

Loading thumbnail…

Fork of Rendering Data with React & D3

This example visualizes CSS named colors as a radial burst, with each color occupying an equal wedge radiating from the center of an SVG canvas. The code loads color data using `d3.csv` and computes the pie layout with `d3.pie` and `d3.arc`, while React’s `useState` and `useEffect` hooks manage asynchronous data fetching and re-rendering. Each wedge is filled with the corresponding `RGB hex value` from the dataset, creating a full-circle spectrum. The visualization relies on React for component rendering and D3 utilities for data loading and shape generation.

Jan 21, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data for VISUALIZING

This example demonstrates the size and structure of a CSS Named Colors dataset after loading it from a CSV file. It shows the file size in kilobytes, the number of rows, and the number of columns in the dataset. The code uses `d3.csv` to fetch the remote CSV and returns a promise, then formats the data with `d3.csvFormat` to calculate the byte length. Results are displayed as plain text inside a `<pre>` element from the HTML page.

Jan 21, 2022

Loading thumbnail…

Visualizing Data with React & D3

This example demonstrates loading and parsing a CSV dataset of CSS named colors, then displaying simple summary statistics about it. The code uses the D3.js v5 `d3.csv` function with a Promise chain to fetch the remote data, and calculates the number of rows, columns, and file size in kilobytes using `d3.csvFormat`. The resulting text output is rendered into an HTML `<pre>` element, with React not actually employed despite the title—the interaction is purely D3 and vanilla JavaScript. The visualization shows how to handle asynchronous data loading in a minimal, text-based format.

Jan 21, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

The visualization displays Seattle Public Library checkouts by creator and checkout count, using a scatter plot with translucent circles to reveal density patterns in the data. The code loads CSV data from a GitHub gist via d3.csv, then renders the chart through the Vega-Lite API, which wraps Vega and Vega-Lite specifications. Custom axis styling and larger fonts are applied via a config object, while the vega-tooltip handler enables interactive hover details. The view fills the entire window with an SVG renderer.

Jan 20, 2022

Loading thumbnail…

Fork of Mouse Follower -- for Loading Data Section

This example demonstrates a React component that loads a CSV dataset and displays summary statistics about it in plain text. The application uses the `useState` and `useEffect` hooks to manage asynchronous data fetching, specifically calling `d3.csv()` to retrieve a list of CSS named colors from a GitHub gist. Once the data loads, the component renders the row count, column count, and file size in kilobytes, calculated using `d3.csvFormat()`. The visualization serves as a minimal, functional illustration of integrating D3 utilities with React state management for data loading workflows.

Jan 12, 2022

Loading thumbnail…

Fork of Loading and Parsing CSV Data

This example displays a large, typographic summary of a CSV dataset’s size, presented in a browser using a `<pre>` element. It loads the CSS Named Colors data via `d3.csv` from a GitHub Gist URL, then asynchronously counts the rows, columns, and file size (in kilobytes) using `d3.csvFormat` and `Math.round`. The resulting three-line message is injected into the page with `textContent`. The visualization is minimal, focusing on the data-loading and parsing pipeline rather than graphical representation, and runs in a React environment with D3 v5.

Jan 12, 2022

Loading thumbnail…

Mouse Follower

A circle follows the mouse pointer across a full-screen SVG canvas, updating its position in real time as the cursor moves. Built with React hooks, the component tracks mouse coordinates via the `onMouseMove` event and stores them in state, then re-renders the circle with the new `cx` and `cy` attributes. The SVG spans the entire window, and the circle has a fixed radius of 30 pixels, starting at the screen’s center. Rendering uses React DOM and plain SVG, with no external data or animation library.

Jan 11, 2022

Loading thumbnail…

Smiley Face Part 1

A grid of eighteen smiley faces, each with a yellow circular head, black outline, eyes, and a curved mouth, fills the view. Each face has randomized dimensions for its stroke width, eye radius, mouth radius, and mouth thickness, creating subtle visual variety across the grid. The example uses React components to compose the face hierarchy, with D3’s `arc` API generating the mouth path. The SVG is rendered via `FaceContainer`, translating each face to its center using D3’s `range` for iteration.

Jan 11, 2022

Loading thumbnail…

Fork of Hello HTML

A minimal HTML page demonstrates the basic structure required for any web-based visualization. The document contains only a `<head>` with a title and an empty `<body>`, showing the entry point for adding content. It uses no external libraries or JavaScript APIs, relying purely on standard HTML markup. This example serves as a starting template for projects that will later incorporate visualization tools such as D3.js or Three.js.

Dec 25, 2021