Daniel

@UncaughtDanError·7 public vizzes

Fork of Vega-Lite API Template

This example uses the Vega-Lite API to render a scatter plot of automobile data, with each circle positioned by origin (categorical) and horsepower (quantitative) and given a constant size and opacity. It loads the auto-mpg dataset from a CSV via D3’s `csv` function, then registers Vega, Vega-Lite, and Vega-Tooltip to build an interactive SVG visualization. The chart config customizes axis and label styling for readability, and the final view is fit to the full window. The code’s core is the `vl.markCircle().encode()` specification, which defines the visual encoding declaratively.

Aug 13, 2023

Loading thumbnail…

Loading Data with React and D3

This gallery example demonstrates how React and D3 can work together to fetch and summarize a CSV dataset from a remote URL. The visualization shows a plain-text summary of the data, displaying its size in kilobytes, row count, and column count. The code uses React’s `useState` and `useEffect` hooks to manage the asynchronous data loading, while D3’s `csv` function parses the file from the provided gist URL. A custom `message` utility formats the three statistics using `d3.csvFormat` and the parsed data’s properties, rendering the result inside a `<pre>` element.

Aug 10, 2023

Loading thumbnail…

Data Fetching

This example demonstrates a minimal data-fetching workflow using D3 v7. It loads a CSV file from a GitHub gist via `d3.csv` and displays three summary metrics in large text: file size in kilobytes, row count, and column count. The visualization is purely typographic, with a `<pre>` element presenting the statistics. The code also includes a commented-out alternative using the Fetch API with `d3.csvParse`, showing two equivalent approaches to loading and parsing tabular data.

Aug 10, 2023

Loading thumbnail…

Mouse Follower

This example shows a single circle that continuously tracks the user’s cursor within an SVG canvas, centering itself on the mouse’s current coordinates. The visualization relies on React’s `useState` and `useCallback` to capture `clientX` and `clientY` from the SVG’s `onMouseMove` event, updating the circle’s `cx` and `cy` attributes in real time. Initially positioned at the canvas center, the circle reacts instantly to any pointer movement, demonstrating a minimal interactive pattern with no external data source.

Aug 10, 2023

Loading thumbnail…

ReactBoilderPlate

This example demonstrates a minimal React application that renders "Hello" on an HTML page, serving as a bare-bones starting point for a React project. The app uses React 18.2.0 and ReactDOM to create a root element and render an `App` component that outputs a simple heading. It also loads d3.v7 in the HTML head, though the main component does not yet use D3 functionality. The page hides body overflow and centers the content, providing a clean, empty canvas for future visualization development.

Aug 10, 2023

Loading thumbnail…

Fork of Hello HTML

A grid of eighteen cartoon faces fills the screen, each rendered as an SVG circle with a yellow radial gradient background, black stroke, two eyes, and an arched mouth. The faces vary randomly in eye position, eye radius, and mouth width, creating a playful, diverse pattern. Built with React components and D3’s `range` and `arc` functions, the example maps over an array to generate each face, passing random values as props for layout and shape.

Aug 10, 2023

Loading thumbnail…

Hello HTML

This example shows two nearly identical smiley faces rendered side-by-side using React and SVG. Each face is composed of a yellow background circle, angular eyebrows, two eyes, and a mouth created as a path generated with the `d3.arc` API, giving it a specific thickness and arc length. The faces are assembled from separate React component files—`Face`, `FaceContainer`, `BackgroundCircle`, `Eyebrows`, `Eyes`, and `Mouth`—with coordinates and dimensions passed as props. Both faces are drawn with the same parameters, demonstrating a reusable, modular approach to SVG composition in a React and D3 v7 environment.

May 31, 2022