drandalldesign

@drrand·7 public vizzes

Visualizing Data with React & D3

This example visualizes a dataset of CSS named colors as a pie chart rendered with SVG. The React application loads the CSV data using D3’s `csv` loader, then maps each color entry to a pie slice whose fill is the color’s RGB hex value. The chart uses D3’s `arc` generator to compute the path for each slice, with angles evenly distributed across the full circle. React manages the state and rendering of the SVG elements.

Dec 31, 2024

Loading thumbnail…

Fork of Vega-Lite API Template

This example visualizes the relationship between miles per gallon, horsepower, weight, and origin for automobiles from the UCI Machine Learning Repository Auto MPG dataset. It uses the Vega-Lite API to construct a scatter plot with circles, encoding mpg and horsepower as x and y axes, origin as color, and weight as size, with tooltips showing car names. The visualization is rendered in SVG via D3.js (d3.csv) and Vega-Lite, with a customized dark theme config and automatic sizing to fit the viewport.

Dec 31, 2024

Loading thumbnail…

Loading Data with React & D3

This example shows how React and D3 work together to load and display data. The React component uses the `useState` and `useEffect` hooks to fetch a CSV of CSS named colors via `d3.csv`, then renders a text summary of the dataset. The `message` function calculates the file size in kilobytes, row count, and column count using `d3.csvFormat` and `data.columns`. While the data loads, the display shows a “loading...” message, and once loaded, it presents the dataset’s statistics in a large `<pre>` element.

Dec 30, 2024

Loading thumbnail…

Parse CSV with D3

This example demonstrates how to parse a CSV file and display basic statistics about the data in a React application. It fetches a CSV of CSS named colors from a GitHub Gist, uses the `d3.csv` API to parse the remote text, and then renders the file size in kilobytes, row count, and column count on the page. The React app uses `createRoot` from `react-dom` to render a separate "Hello React!" message, while the D3 parsing results are displayed via direct DOM manipulation.

Dec 30, 2024

Loading thumbnail…

Parsing CSV

This example demonstrates the new VizHub Version 3 runtime environment, which supports continuous hot reloading and interactive widgets. The code shows a minimal "Hello World" setup using a `main` function exported from `index.js`, which receives a `container` DIV element and `options` object containing `state` and `setState`. The example renders a text element with a configurable `fontSize` property, which can be adjusted interactively by Alt-dragging the number directly in the code editor, providing immediate visual feedback.

Dec 30, 2024

Loading thumbnail…

Mouse Follower

A yellow circle tracks the mouse cursor across a full-window SVG canvas. The visualization is built with React and ReactDOM, using the `useState` hook to store the cursor's current position. On every `onMouseMove` event, the circle's `cx` and `cy` attributes update, re-rendering the circle at the new coordinates. The code initializes the circle at the window's center and sets a fixed radius of 30 pixels.

Dec 30, 2024

Loading thumbnail…

Fork of Hello HTML

This example shows a simple cartoon face composed of overlapping SVG shapes: a yellow circle for the head, two black circles for the eyes, and a dark arc for the mouth. The face is built from modular React components, with each part defined in its own file and passed parameters for positioning and sizing. The `FaceContainer` renders an SVG element, while `Mouth` uses the `d3.arc` generator to create the mouth path. All shapes are centered within a 960x500 viewport.

Dec 30, 2024