mattbwebster

@mattbwebster·7 public vizzes

React & D3 Bar Chart

This example shows a bar chart of United Nations population data from 2019, displaying country names along the y-axis and population values along the x-axis. Built with React and D3 v7, the visualization uses SVG rendering with `scaleBand` for the categorical y-axis and `scaleLinear` for the numeric x-axis. The loading state is handled through React's `useState` and `useEffect`, fetching CSV data from a GitHub gist and displaying a temporary "Loading..." message before rendering the chart.

Sep 2, 2021

Loading thumbnail…

Rendering Data with React & D3 working with graphics and D3 ARCs

This example demonstrates how React and D3 can work together to render a donut chart from a CSV dataset. The application loads data for named CSS colors using d3.csv, stores the data in React state, and maps each color to a wedge using D3’s arc generator. Each path is colored directly from the ‘RGB hex value’ column, creating a full circular visualization that displays the color palette at a glance.

Sep 1, 2021

Loading thumbnail…

Rendering Data with React & D3 working with graphics

This example demonstrates how React state manages a data-driven visualization, rendering a horizontal stacked bar chart of CSS named colors from a CSV file loaded via D3’s `d3.csv`. Each row becomes a colored div whose width and height are fixed, showing the full color spectrum. The code uses React hooks like `useState` and `useEffect` to fetch and store the data, while D3’s parsing utility populates the dataset. The visualization updates automatically once the asynchronous CSV load completes, transitioning from a loading message to the rendered color bars.

Sep 1, 2021

Loading thumbnail…

Loading Data with React & D3

This example demonstrates loading a CSV dataset into a React application using D3 utilities. It fetches the CSS named colors dataset from a GitHub gist and displays a summary of the data, including its size in kilobytes, row count, and column count. The React state management tracks the loaded data, initially showing a "Loading..." message until the asynchronous fetch completes. The visualization uses React 16.9, D3 7.0.1, and renders the summary text as HTML.

Sep 1, 2021

Loading thumbnail…

Fork of Hello HTML tutorial

This example renders a grid of 18 randomly parameterized SVG faces using React and D3.js v7. Each face combines a yellow background circle, two eyes, and a mouth, with positions and sizes derived from random values generated via `Math.random()` and `d3.range()`. The mouth is created with D3’s `arc()` API to produce an annular sector path. The composition is assembled from modular React components, including `FaceContainer` for the SVG wrapper, `BackgroundCircle`, `Eyes`, and `Mouth`, all coordinated through a single `Face` component.

Sep 1, 2021

Loading thumbnail…

Mouse follower

A circle follows the mouse cursor across a full-window SVG canvas, reacting in real time to pointer movement. The React component tracks mouse coordinates via the `onMouseMove` event, updating state with `useState` and `useCallback`, then re-renders the circle’s `cx` and `cy` attributes. The visualization uses React 16.9 and ReactDOM to render SVG elements directly in the browser.

Aug 28, 2021

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data in a web browser using JavaScript. It fetches a CSV file containing CSS named colors from a GitHub gist using the Fetch API, then reads the response as text and logs it to the browser console. The code defines an asynchronous helper function `fetchText` to handle the request, and includes a commented alternative with chained promises. The visualization is minimal, showing the raw CSV text output in developer tools rather than rendering any graphical chart.

Aug 28, 2021