adam

@agaier·5 public vizzes

Fork of Vega-Lite API Template

A scatter plot of automotive data visualizes the relationship between the country of origin and horsepower, with each car represented by a semi-transparent circle. The visualization uses the Vega-Lite API with the `data(await getData())` method to load and bind the Auto MPG dataset from the UCI Machine Learning Repository, then applies a custom configuration to adjust axis styles and typography. The code registers Vega, Vega-Lite, and the Vega-Tooltip handler, and sets the chart dimensions to fill the browser window using `.width(window.innerWidth)` and `.height(window.innerHeight)` with an autosize fit option.

Oct 7, 2021

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load external data in a React application using D3 utilities, displaying the dataset’s size in kilobytes, row count, and column count. The component uses React’s `useState` and `useEffect` hooks to fetch and store data asynchronously, while D3’s `csv` function parses the remote CSV file from a GitHub gist. The message is rendered conditionally, showing “Loading…” until the data arrives. The code also uses `d3.csvFormat` to calculate the data size in the `message` function.

Sep 16, 2021

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 the file size in kilobytes, row count, and column count in a large preformatted text element. The code uses `d3.csv()` to load and parse the data, then `d3.csvFormat()` to measure the file size. An alternative commented-out approach shows manual fetching with `fetch()` and parsing via `d3.csvParse()`.

Sep 2, 2021

Loading thumbnail…

MouseFollower

A circle follows the mouse cursor across an SVG canvas in real time. The React component tracks pointer coordinates through the SVG `onMouseMove` event handler, updating the circle’s `cx` and `cy` attributes. Using React hooks like `useState` and `useCallback`, the app re-renders only on cursor movement, while D3 v5 is loaded but unused in this minimal interaction. The initial mouse position is centered at (480, 250) within a 960 by 500 viewport, with the circle’s radius set to 30 pixels.

Aug 23, 2021

Loading thumbnail…

Hello HTML

This example renders a grid of 32 randomly generated faces using React and D3. Each face is composed of reusable SVG components for the background circle, eyes, and mouth, with randomized eye positions, eye radii, and mouth widths. The mouth is drawn with a D3 arc generator, while the face container centers the SVG group using a transform. The demo shows how D3’s `arc` and `range` can be combined with React’s component model to create varied, data-driven SVG graphics.

Aug 13, 2021