Chaz

@chazpf·8 public vizzes

Making a Bar Chart in React & D3

This example shows a horizontal bar chart of the top 10 most populous countries for 2020, using a dataset from the UN Population 2019 CSV loaded via `d3.csv`. React’s `useState` and `useEffect` hooks manage the asynchronous data fetch and re-render the bars once loaded. D3’s `scaleBand` and `scaleLinear` map country names and population values to SVG `rect` coordinates and widths, with each bar’s height derived from `yScale.bandwidth()`. The chart renders purely as SVG inside a React component.

Jan 19, 2022

Loading thumbnail…

Visualizing data with React & D3

A radial burst of CSS named colors, rendered as a pie chart where each slice represents one color with equal value. The visualization loads color data from a CSV file using D3’s `csv` utility, then applies the `pie` and `arc` generators to compute the slice geometry. React’s `useState` and `useEffect` manage the asynchronous data fetching and trigger the SVG rendering, with each path filled by the color’s hex value. The example demonstrates a hybrid approach where D3 handles data parsing and layout calculations while React controls the component lifecycle and DOM updates.

Jan 18, 2022

Loading thumbnail…

Rendering data with React & D3

This example shows a color field of CSS named colors rendered as stacked horizontal bars, each bar’s background set to its corresponding hex value from a CSV dataset. Built with React and D3, it loads the data via D3’s `csv` function, stores it in React state, and maps each row to a `<div>` element. The code uses React’s `useState`, `useEffect`, and `useCallback` hooks, along with `ReactDOM.render` from React 16.9 and D3 v7.3, creating a simple data-driven visualization where each color occupies a 960-pixel-wide strip.

Jan 18, 2022

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load CSV data in a React app using D3’s `d3.csv` utility, storing the fetched dataset in React state via the `useState` and `useEffect` hooks. The app fetches a CSV of CSS named colors from a gist URL and displays a summary message computed with `d3.csvFormat` and `data.columns`, showing the file size in kilobytes, total row count, and column count. While the data is pending, the interface shows a loading message. The code uses React 16.9 and D3 v7, with all rendering handled through a simple `<pre>` element.

Jan 18, 2022

Loading thumbnail…

Color visualization

This example displays metadata about a CSS named colors dataset loaded from a GitHub gist, showing the file size in kilobytes, row count, and column count in large monospaced text. It uses D3 v7's `d3.csv` to fetch and parse the remote CSV file, then formats the data with `d3.csvFormat` to calculate its byte length. The page also includes commented-out alternative code using the Fetch API, `async`/`await`, and `d3.csvParse` to achieve the same result.

Jan 18, 2022

Loading thumbnail…

Vega-Lite API Template

This visualization displays temperature data as a shaded area chart, with temperature on the y-axis and timestamp on the x-axis. The example demonstrates the Vega-Lite API, where the visualization specification is built programmatically using `vl.markArea()`, `vl.x().fieldT()`, and `vl.y().fieldQ()` methods, rather than a static JSON spec. It registers Vega and Vega-Lite libraries, uses a custom dark-themed configuration for axes and labels, and loads CSV data from a remote URL via `d3.csv`.

Jan 18, 2022

Loading thumbnail…

Follow Mouse

A single circle follows the mouse cursor across an SVG canvas, tracking its exact position in real time. The visualization uses React’s `useState` hook to store the cursor’s coordinates, updated via an `onMouseMove` event handler on the `<svg>` element. The circle’s `cx` and `cy` attributes are bound to the state, causing React to re-render the shape with each movement. The code imports React, ReactDOM, and D3 v7, though D3 is not actively used beyond the script tag.

Jan 18, 2022

Loading thumbnail…

Fork of Hello HTML

A grid of eighteen simple cartoon faces fills the viewport, each rendered as an SVG with a yellow circular head, two eyes, and an arc-shaped mouth. Clicking any face randomly changes its head color. Built with React and D3.js (v7), the example derives each face’s features—eye offset, radius, mouth width, and stroke thickness—from random values generated at render time. The D3 `arc` API constructs the mouth path, while SVG circles compose the head and eyes within a transformed group.

Jan 17, 2022