Matt Lane

svg fundamentals

Base HTML

This example displays six identical cartoon faces in a grid, each composed of SVG circles, rectangles, and arcs. The faces are rendered using React components, with separate components for the face container, background circle, eyes, glasses, and mouth. The glasses and mouth are drawn using D3’s `arc` generator, while the layout is determined by dividing the viewport dimensions. The code imports React, ReactDOM, and D3 v5, and renders the faces via `ReactDOM.render` into a single `#root` element.

vega

This example visualizes automobile data using a Vega-Lite scatter plot, with circles positioned by weight and horsepower, colored by origin, sized by miles per gallon, and showing car names on hover. The visualization is built with the vega-lite-api library, which compiles specifications to Vega, and is rendered as an SVG using the vega view. Data is loaded asynchronously from a CSV file with d3.csv, and the chart is dynamically sized to fit the window. The code includes custom styling for axes and tooltip formatting.

loadDataState

This example shows how React state manages the lifecycle of data loaded with D3. It displays a summary message (row and column counts) from a CSV file containing CSS named colors. The code uses React hooks (`useState`, `useEffect`) to fetch data asynchronously with `d3.csv` and store it in state. A loading indicator appears until the promise resolves, then the `message` utility formats the dataset’s dimensions for display.

starter

This example demonstrates loading a CSV file of CSS named colors from a remote URL using d3.csv, then displaying the number of rows and columns in the data within a large preformatted text element on the page. The visualization uses D3 v7 to fetch and parse the tabular data, and writes a concise summary message via JavaScript DOM manipulation, updating the messageContainer element. The code also includes commented-out alternatives using fetch and d3.csvParse.

mouse

A black circle follows the mouse cursor across a yellow canvas, with its position updating in real time based on the pointer's coordinates. The visualization demonstrates React state management through the `useState` and `useCallback` hooks, where mouse movement events trigger position updates. The SVG circle, defined with an initial radius of 30, is rendered using ReactDOM within an SVG container sized 960 by 500 pixels. The code leverages React 16.10.0 and D3 v5, with the circle's `cx` and `cy` attributes bound directly to the tracked mouse position.