Skip to main content
Log in
M

Maxene Graze

@maxgraze·16 public vizzes

Loading thumbnail…

Reusable D3 Scatter Plot Additions

This example presents a reusable scatter plot of the Iris dataset, mapping petal width against sepal length. Built with d3.v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to construct the visualization. The implementation follows a reusable chart pattern with configurable accessor functions and margins, rendering circles via SVG. Data is loaded as CSV from a GitHub gist, with axis labels added as SVG text elements. The chart adapts to the full window size and includes custom styling through a Share Tech font.

May 11, 2021
Loading thumbnail…

Points on a Map

This example displays city locations as semi-transparent teal dots on a natural Earth projection world map, highlighting urban centers with populations exceeding 50,000. The visualization uses React for component structure and D3 v5’s `geoNaturalEarth1` projection with `geoPath` to render land masses, country boundaries, graticules, and a sphere outline. City coordinates from the Simplemaps World Cities Database are projected using `projection([d.lng, d.lat])` into SVG circles. The map background and land fill are styled via CSS, with graticules providing geographic reference lines.

Feb 21, 2021
Loading thumbnail…

Fork of Opacity Linear Scale

This visualization shows the racial distribution of New York State census tracts, mapping the white population share using a green color scale where opacity varies linearly from fully transparent to fully opaque. The map uses `d3.geoPath` with TopoJSON data to render tract boundaries as SVG paths, while `d3.scaleLinear` maps each tract’s white population count to an rgba color string. Data comes from the American Community Survey via Mike Bostock’s census tract GeoJSON, with the color scale defined in code at lines 80–85.

Feb 4, 2021
Loading thumbnail…

Fork of Force Grid

A force-directed grid arranges fermented food projects by month, with circles colored by ingredient type and sized by fermentation length. The visualization uses d3.forceSimulation with forceX, forceY, forceManyBody, and forceCollide to position nodes based on month coordinates. SVG circles render the data, and a tooltip appears on mouseover to display the project name. The dataset comes from a JSON file cataloging fermented foods across months, using D3 v6.

Feb 3, 2021
Loading thumbnail…

Force Grid Practice 2

A force-directed grid arranges circles by fermentation month and duration, with color denoting ingredient type. The simulation uses `d3.forceSimulation` with `forceX` and `forceY` to position nodes along scaled axes, plus `forceManyBody` and `forceCollide` to prevent overlap. SVG circles are rendered with transitions, and the dataset is grouped by month to define the x-scale.

Feb 2, 2021
Loading thumbnail…

Fork of Force Directed Graph Starter

A fork of the D3 force-directed graph starter visualizes a season of fermented foods, showing each fermentation batch as a circle with color indicating food type (grain, vegetable, protein, fruit, or other). The animation uses `d3.forceSimulation` with `forceManyBody`, `forceCollide`, and `forceCenter` to position the circles, while data is grouped by month but not used for positioning in this rendering. The SVG circles are drawn in black and animate via `transition()`, loading JSON data from `data.json` with `d3.json`.

Jan 20, 2021
Loading thumbnail…

Multi Line Chart

This multi-line chart visualizes quarterly labor market data, plotting employment, unemployment, and inactivity figures over time. The visualization relies on D3 version 6's `d3.json` method to load the dataset, then filters the data using a regular expression to isolate specific quarterly time periods. The example demonstrates the foundational setup for building interactive charts with D3, including HTML structure, CSS styling, and the integration of the D3 library through a bundled JavaScript file. While the chart's rendering logic is not yet implemented, the code establishes the data-loading pipeline and filtering mechanism typical of D3-based visualizations.

Jan 7, 2021
Loading thumbnail…

Stylized Line Chart

A stylized line chart visualizes temperature trends over time, with teal circles marking individual data points along a smoothed natural curve. The visualization uses React with D3 v5’s `scaleTime`, `scaleLinear`, and `line` with `curveNatural` to generate an SVG path. Axis components are custom-built in JSX, applying Poppins typography and muted gray ticks against a clean background. Data comes from the Data Canvas Sense Your City dataset, loaded via `d3.csv`, with native SVG `<title>` elements providing hover tooltips showing formatted timestamps.

Dec 5, 2020
Loading thumbnail…

React Starter

This example demonstrates a minimal line graph interface built with React, displaying mock blood pressure data over time. The chart plots date-based ranges and markers using SVG primitives, with scaled axes generated through d3.scaleTime and d3.scaleLinear. The visualization integrates React components for axes, utilizing d3.axisBottom for x-axis tick generation, while the y-axis remains a basic line without tick labels. The code imports functions directly from the d3 v6 module, including scaleTime, scaleLinear, extent, and timeParse, and renders the entire chart within an SVG wrapper.

Dec 4, 2020
Loading thumbnail…

Project Breakdown

The visualization displays a project breakdown using an icicle chart, where each horizontal band represents a hierarchy level (category, task, item). The width of each rectangle encodes the cumulative time spent, with colors differentiating categories via d3.scaleOrdinal. Built with React and d3.v6, it uses d3.groups and d3.sum to aggregate data, d3.scaleLinear for positioning, and renders SVG rectangles that react to hover with opacity changes. The data comes from a CSV file fetched via d3.csv.

Dec 4, 2020
Loading thumbnail…

Stylized Bar Chart

This example displays clinical measurements as a stylized bar chart, where each horizontal bar represents a range between two values (e.g., systolic blood pressure from 80 to 130) with a dark marker indicating a reference point. Built with React and rendered as SVG, the chart uses `d3.scaleBand` for the categorical axis and `d3.scaleLinear` for the value axis. The data is provided as a static array in the code, and tooltips show the formatted range values for each measurement.

Dec 2, 2020
Loading thumbnail…

Forest Plot with Heterogeneity Bands

A forest plot displays odds ratios and 95% confidence intervals for individual studies, with an overall pooled estimate, comparing intensive antihypertensive therapy to standard care. Translucent teal heterogeneity bands overlay the plot, extending across the full chart height for each study’s confidence interval to visualize between-study variability. The code uses D3 v6 with SVG rendering, a log scale for the x-axis, and data loaded from a remote JSON file. Study-level points are sized by sample size using a linear scale.

Nov 28, 2020
Loading thumbnail…

Rendering Data with React

This example shows a radial burst of CSS named colors, with each color represented as a pie slice radiating outward. The data loads from a CSV file containing color names and their RGB hex values. Using React hooks like `useState` and `useEffect`, the app fetches the data with D3’s `csv` utility, then renders SVG paths computed by D3’s `pie` and `arc` generators. Each path’s fill is set directly from the hex value in the dataset, creating a vibrant, segmented color wheel inside an SVG canvas.

Aug 15, 2020
Loading thumbnail…

Loading Data with React & D3

This example demonstrates a minimal React application that loads a CSV dataset of CSS named colors using D3’s `csv` utility and displays a summary of the data as plain text. The app uses React state to track the loading process, initially showing “Loading...” and then rendering a message with the formatted file size in kilobytes, the row count, and the column count. The message is composed by the `message` function, which also relies on D3’s `csvFormat` to estimate the data’s size. The visualization is purely textual, with a large font, and does not plot the colors themselves.

Aug 15, 2020
Loading thumbnail…

Mouse Follower

A React and SVG visualization renders a single black circle that follows the mouse cursor across a 960 by 500 pixel canvas. The circle’s position updates in response to mouse movement events handled through React’s `onMouseMove` callback, with state managed via the `useState` hook. The application uses ReactDOM to render the SVG element, and the circle’s center coordinates are dynamically set to the cursor’s client-space position, creating a direct and immediate tracking effect.

Aug 15, 2020
Loading thumbnail…

Smiley Face Part II

This example shows a yellow smiley face composed of a background circle, two eyes, and a curved mouth, all rendered as SVG elements within a React component. The face is centered in a 960×500 viewport using a `FaceContainer` that translates a group to the middle. Components receive their geometry as props: the `BackgroundCircle` sets radius and stroke width, `Eyes` place circles using offset and radius values, and `Mouth` uses the d3 `arc` generator to create a smile path with specified inner/outer radii and angle bounds. The app renders via ReactDOM with D3 v5, demonstrating reusable, parameterized SVG parts.

Aug 3, 2020