Matty Danbury

@mjdanbury·6 public vizzes

Loading Data with React and D3

This visualization displays the CSS named colors as a pie chart, where each slice represents one color from a CSV file of named color data. The example demonstrates integrating D3 with React by using `d3.csv` to load the remote data and React's `useState` and `useEffect` to manage the loading state. The pie layout is computed with `d3.pie`, and arcs are drawn using `d3.arc` on an SVG canvas. While data loads, the interface shows a "Loading..." message.

Sep 10, 2022

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes automobile performance and origin using a scatter plot generated with the Vega-Lite API, where each circle’s position encodes miles per gallon and horsepower, while color indicates the car’s origin and size encodes weight. Tooltips display the car name on hover. The code loads a CSV dataset via `d3.csv`, constructs the chart with `vl.markCircle` and its encoding helpers, then renders it to canvas using Vega’s `view` with a custom config for axis styling and label fonts. The visualization fills the window and updates responsively.

Sep 8, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse a CSV file in a web page, displaying the file size, row count, and column count as large text. It fetches a remote CSV of CSS named colors using the Fetch API, then parses the text with `d3.csvParse` from D3 v7. The resulting statistics are written into a `<pre>` element, with the code structured around an asynchronous `fetchText` function and a commented-out alternative using nested promises. The page uses raw HTML, CSS, and JavaScript without any framework.

Sep 7, 2022

Loading thumbnail…

Mouse Follower

A yellow circle rendered in SVG follows the mouse as it moves across the full browser window. The React component tracks pointer coordinates through an `onMouseMove` handler on the SVG element, updating state with React hooks `useState` and `useCallback`. The circle’s center is set from the current `clientX` and `clientY` values, with an initial position at the viewport’s midpoint.

Sep 7, 2022

Loading thumbnail…

Hello HTML

A grid of 70 randomly generated faces fills the viewport, each face rendered as an SVG composed of a yellow background circle, two eyes, and an arc-based mouth. The React components `Face`, `FaceContainer`, `BackgroundCircle`, `Eyes`, and `Mouth` structure the drawing, while D3’s `range` generates the face count and its `arc` helper creates the mouth path. Each face varies in eye position, eye radius, and mouth dimensions via `Math.random()` calls, producing a playful, non-repeating pattern. The example demonstrates combining React’s component model with D3’s utility functions for SVG generation.

Sep 7, 2022

Loading thumbnail…

Fork of Hello HTML

A yellow smiley face is rendered as an SVG graphic, composed of a circle for the face, two smaller circles for eyes, and an arc for the mouth. The example demonstrates integrating React components with D3’s `arc` generator to create the mouth path. The `BackgroundCircle` React component handles the face, while D3’s `arc()` computes the mouth’s path data. The visualization is built using React 17 and D3 v7, with the SVG drawn at a fixed width and height.

Jul 6, 2021