Brittany Harden

@b-a-harden·15 public vizzes

Rendering Data with React & D3

A radial burst of CSS named colors fanning outward from a central point, with each color occupying a wedge of equal angular width. The example loads color data from a CSV file using D3’s `csv` utility and then applies the `pie` and `arc` generators to compute the geometry. React renders the resulting SVG paths, filling each wedge with its corresponding hexadecimal color value. The visualization applies no data-driven sizing, as every slice shares an equal value, making the layout purely categorical.

Dec 12, 2022

Loading thumbnail…

Rendering Data with React & D3

This example displays every CSS named color as a horizontal stripe, stacking them vertically to form a full-width gradient-like bar chart. It loads color data from a CSV file using `d3.csv`, stores it in React state via the `useState` and `useEffect` hooks, and renders each row as a `<div>` with a background color set to the `RGB hex value` from the data. React handles the conditional loading state, showing a loading message until the data arrives.

Dec 12, 2022

Loading thumbnail…

Fork of D3 v5 Zoomable Sunburst

This interactive sunburst visualization displays the hierarchical structure of the Flare dataset, with each arc’s size proportional to its value. Clicking a slice zooms in to reveal its children, using D3 v5’s `d3.partition`, `d3.hierarchy`, and `d3.arc` for layout and rendering. Animated transitions via `transition.attrTween` and `d3.interpolate` smoothly update arc positions and labels, while colors are assigned using `d3.scaleOrdinal` and `d3.interpolateRainbow`. The visualization renders as SVG.

Dec 12, 2022

Loading thumbnail…

Streamgraph

This interactive streamgraph visualizes global CO2 emissions from 1790 onward, with stacked layers representing fossil fuel sources—Solids, Liquids, Gas, Cement Production, and Gas Flaring—in gigatons per year. Using d3.stack and d3.area with a basis curve, it renders smooth, colored bands scaled by a time axis and a linear y-axis. Labels are positioned via d3-area-label’s `d3.areaLabel` function, while tooltips appear on hover. The chart uses d3-scale-chromatic’s `schemeDark2` for colors and reads CSV data, updating responsively on window resize.

Dec 12, 2022

Loading thumbnail…

Fun with Vega-Lite API Template

A line chart shows the U.S. 30-year fixed-rate mortgage average from the St. Louis Fed, drawn with the vega-lite-api library. The visualization uses a time-encoded x-axis and a quantitative y-axis without a zero baseline to emphasize rate fluctuations. Data loads asynchronously via d3.csv from a Gist, and the chart renders to SVG with a custom config for larger axis labels and tooltips. Vega-Lite API registers Vega, Vega-Lite, and d3, while vega-tooltip provides interactive hover details for each date and rate value.

Dec 10, 2022

Loading thumbnail…

Vega-Lite API Template

This example demonstrates a scatter plot of automobile data from the UCI Machine Learning Repository, showing relationships between weight, horsepower, miles per gallon, and country of origin. It uses the Vega-Lite API to declaratively encode these quantitative and categorical fields with circular marks, including tooltips for car names. The code integrates Vega, Vega-Lite, Vega-Lite API, and Vega-Tooltip libraries alongside D3 for CSV data loading, with custom configuration for axis styling and responsive sizing.

Dec 10, 2022

Loading thumbnail…

Loading Data with React & D3

This example demonstrates how to load and summarize a CSV dataset from a remote URL using React and D3. It shows the data’s file size, row count, and column count in a large text display, initially showing “Loading…” until the data arrives. The React component uses `useState` and `useEffect` to asynchronously fetch the data via D3’s `csv` utility, then passes it to a custom `message` function that formats the statistics for rendering as SVG text within a `<pre>` element.

Dec 9, 2022

Loading thumbnail…

Loading and Parsing CSV Data

This example demonstrates how to load and parse CSV data using D3 v7 and the Fetch API. It reads a remote CSV file containing CSS named colors and displays the file size in kilobytes, the number of data rows, and the number of columns in a large preformatted text element. The code uses `d3.csv()` to fetch and parse the data asynchronously, then `d3.csvFormat()` to measure the string length, alongside `data.length` and `data.columns.length` for row and column counts.

Dec 9, 2022

Loading thumbnail…

Mouse Follower

A single dark circle follows the mouse cursor across an SVG canvas. The visualization demonstrates a basic interactive pattern using React state and event handling. The `App` component tracks the cursor's `clientX` and `clientY` coordinates through an `onMouseMove` handler, updating the circle's `cx` and `cy` attributes. The application uses React's `useState` and `useCallback` hooks to manage position updates efficiently, rendering the result through ReactDOM with a fixed 960 by 500 pixel viewport.

Dec 9, 2022

Loading thumbnail…

Smiley Face VI

This example generates a grid of eighteen smiley faces, each rendered as an SVG composed of a yellow circle, two eyes, and a curved mouth. The faces are randomly varied in stroke width, eye placement and size, and mouth dimensions using JavaScript’s `Math.random()`. The code uses React components for modular composition and utilizes D3 v7’s `arc` constructor to build each mouth’s path, with the `range` function creating the repeated array.

Dec 8, 2022

Loading thumbnail…

Smiley Face V

This example renders a classic smiley face as a yellow circle with black outlines, two eyes, and a curved mouth, composed entirely of SVG shapes. The face is centered within an 960x500 viewport, with a background circle from `BackgroundCircle`, circular eyes from `Eyes`, and a mouth generated using D3's `arc` constructor to create an arc path. The React app uses ES6 named exports, and D3 v7's `arc()` API with method chaining to define the mouth's inner/outer radii and angle range. All elements are drawn declaratively, with the layers positioned via a grouped translation.

Dec 8, 2022

Loading thumbnail…

Smiley Face III

This example renders a smiley face as a stylized SVG composition, built with React and D3.js. It shows a yellow circular face with black strokes, two offset eyes, and a curved mouth arc. The drawing is constructed using SVG primitives: a `circle` for the face and eyes, and a `path` for the mouth, whose shape is generated by the D3 `arc` constructor with specified radii and angles. The face is centered using a translated `<g>` group, and the code leverages React's `ReactDOM` for rendering.

Oct 27, 2022

Loading thumbnail…

Tweak the Face: Clown Pumpkin

A clown pumpkin face drawn with SVG features a radially gradient-filled orange circle, a red nose, and triangular eyes, all positioned around a central mouth arc. Built with React and D3.js, the visualization uses `d3.arc()` to generate the mouth path, while `<radialGradient>` definitions in SVG provide the shading for the pumpkin body and nose. The code constructs the scene in a React component, rendering shapes directly into an SVG canvas with static coordinates.

Oct 24, 2022

Loading thumbnail…

Smiley Face II

This example renders a stylized smiley face using React and D3.js’s arc generator. The face consists of yellow circle for the head, two black eyes, and a dark mouth arc defined with `d3.arc()` and its start/end angle properties. The SVG is centered via a transform, and all geometry is computed from hard-coded constants, creating a static vector illustration.

Oct 24, 2022

Loading thumbnail…

Pumpkin Part I

A carved pumpkin rendered as an SVG scene uses a darkorange circle for the pumpkin body, layered with black triangular eyes and a curved mouth path. The SVG API draws the shape directly with `<circle>`, `<polygon>`, and `<path>` elements, while `<rect>` shapes mask mouth gaps. The viewer sees a static, front-facing jack-o'-lantern with a black stroke outline, built entirely through inline SVG markup without external libraries.

Oct 22, 2022