M

melissastrong89@gmail.com

@mastrong·24 public vizzes

Loading thumbnail…

Axes with Hover

This example demonstrates an interactive scatter plot with dynamic hover feedback. As the mouse moves over the plot area, black reference lines extend from the cursor position to both the x-axis and y-axis, visually linking the cursor to its coordinate values. The visualization uses D3.js v7 and relies on the `pointer` event method to capture mouse coordinates and a ResizeObserver to handle responsive dimensions. Axes are rendered with `axisBottom` and `axisLeft`, while the `scaleLinear` scales map data values to pixel positions. The hover lines only appear when the cursor is within the plot's inner rectangle boundaries.

Loading thumbnail…

Responsive Axes

This example demonstrates a visualization container with responsive axes that maintain consistent tick mark density as the window is resized. The code uses D3.js scales and axis components, including `scaleLinear`, `axisBottom`, and `axisLeft`, to render the chart. A `ResizeObserver` detects container dimension changes, and the tick count is recalculated based on the inner width and height divided by a fixed pixel density. The axes and their labels update dynamically to match the new size.

Loading thumbnail…

Responsive Viz Container

This example demonstrates a responsive visualization container that adapts to its parent element’s size using ResizeObserver. The code creates an SVG rectangle that fills the available width and height, with margins and an inner gray fill. It uses d3.select for DOM manipulation and the viz function to render the rectangle based on the observed dimensions. The container re-renders whenever its size changes, ensuring the visualization stays aligned with its layout.

Loading thumbnail…

Responsive Viz Container

This example demonstrates a responsive visualization container that adapts to its parent element’s size using ResizeObserver. The code creates an SVG rectangle that fills the available width and height, with margins and an inner gray fill. It uses d3.select for DOM manipulation and the viz function to render the rectangle based on the observed dimensions. The container re-renders whenever its size changes, ensuring the visualization stays aligned with its layout.

Loading thumbnail…

Responsive Viz Container

This example demonstrates a responsive visualization container that adapts to its parent element’s size using ResizeObserver. The code creates an SVG rectangle that fills the available width and height, with margins and an inner gray fill. It uses d3.select for DOM manipulation and the viz function to render the rectangle based on the observed dimensions. The container re-renders whenever its size changes, ensuring the visualization stays aligned with its layout.

Loading thumbnail…

Mouse Follower

This example demonstrates a red, green, or blue circle that tracks the mouse pointer across an SVG canvas, changing to a random hex color on each click. It uses D3’s `select` and `pointer` methods to capture mouse coordinates and update state through immutable update patterns, spreading the previous state object and overwriting the `x`, `y`, and `color` properties. The circle’s position and fill are bound directly to the current state values via D3 joins.

Loading thumbnail…

Mouse Follower

A React mouse follower tracks the cursor’s position within an SVG canvas. A circle responds instantly to every mouse move, updating its coordinates via React state and the `onMouseMove` handler. The example uses React’s `useState` and `useCallback` hooks, rendering a single `<circle>` element inside an SVG with fixed dimensions. The initial position is centered, and the circle follows the mouse from there, demonstrating simple event-driven rendering with React and SVG.

Loading thumbnail…

Marks and Channels

This visualization demonstrates the concept of marks and channels in data visualization, showcasing how different visual encodings represent the same dataset. Using D3 version 7.8.5, six separate SVG panels each apply a distinct channel—X position, Y position, size, length, shape, and hue (color)—to encode the data points [0, 1, 2, 3, 4]. The code leverages D3’s `selection.each()` to iterate through these channel modules, `d3.symbol()` for path generation, and `schemeCategory10` from D3 for color mapping. It also utilizes SVG rectangles, circles, and path elements with `transform` and `fill` attributes.

Loading thumbnail…

Scatter Plot with Missing Data

This scatter plot displays penguin bill length versus flipper length, filtering out any records with missing values in either dimension. The chart uses D3 to render axes, labels, and semi-transparent circles over a gray plotting area. The dataset comes from the `@curran/penguins` package, and the filtering logic leverages JavaScript’s `Array.filter` and the `isNaN` function to exclude incomplete rows, ensuring only fully observed data points are plotted.

Loading thumbnail…

Simple Scatter Plot

This example shows a simple scatter plot of the Penguins Dataset, mapping bill length to flipper length for individual penguins. It uses D3’s `scaleLinear` and `extent` to compute scales, then renders axes, labels, and circles via `selectAll().join()`. The chart reads data from `@curran/penguins`, with a light gray inner rectangle and semi-transparent circles. It demonstrates a minimal, reusable visualization pattern that can be forked and customized for other datasets.

Loading thumbnail…

Axis Labels

This example demonstrates how to add descriptive labels to the X and Y axes of a D3 visualization. It shows a simple scatter plot-like layout with labeled axes, where the X-axis label is centered at the bottom and the Y-axis label is rotated vertically along the left side. The code uses d3.scaleLinear to map data ranges and d3.axisBottom and d3.axisLeft to render the axes. Labels are appended as SVG text elements with configurable offsets and text-anchor properties, all within a container-sized SVG created via d3.select.

Loading thumbnail…

Scales and Axes

This example demonstrates D3’s scale and axis functions by rendering an empty plotting area with a gray inner rectangle and labeled axes. It uses `d3.scaleLinear` to map data values from 0 to 100 to pixel coordinates, and `d3.axisBottom` and `d3.axisLeft` to generate tick marks and labels along the bottom and left edges. The visualization is drawn into an SVG container, with margins defined for the plot frame. No dataset is shown; the focus is purely on constructing a coordinate system with D3’s low-level utilities.

Loading thumbnail…

Viz Function Concept

This example demonstrates a refactoring pattern known as the “viz function,” which encapsulates configurable logic for graphics and visualization. It uses d3.select to manage an SVG container, computing inner dimensions from margins and rendering a gray rectangle via d3’s data join pattern. The main module calls the viz function with parameters for margins, dimensions, and fill color, showing how reusable visualization code can be structured. The code relies on D3 version 7.8.5 and is licensed under MIT.

Loading thumbnail…

Margins

This visualization demonstrates the concept of inner margins in a chart, showing a gray rectangle that represents the area reserved for data marks, surrounded by empty space for axes. The code uses D3’s `select` and `join` methods to create an SVG element sized to the container, then draws the inner rectangle with fixed 50-pixel margins on all sides. The example highlights how explicit margin calculations (using `innerWidth` and `innerHeight`) define the plotting region, using D3 version 7.8.5 to render the static shape.

Loading thumbnail…

Pseudo Line Chart with D3

This example approximates a line chart using D3.js by rendering a single SVG path through six data points with thick, rounded strokes. The code uses `d3.line` to generate the path’s `d` attribute from an array of `{x, y}` objects, then styles it with `stroke`, `stroke-width`, `stroke-linecap`, and `stroke-linejoin`. Rather than plotting conventional axes or points, the thick black line visually connects the data, emphasizing path styling over precise chart anatomy.

Loading thumbnail…

Solar System

This animated visualization displays the planets of the solar system with their relative sizes to scale, though distances are not proportional. Circles and labels for each celestial body appear sequentially and transition smoothly across the black canvas. The code uses D3’s `select`, `transition`, and `easeLinear` APIs to animate circle radii, positions, and label opacity. Planet data, including names, distances, and radii, comes from Wikipedia’s list of gravitationally rounded objects. The Sun is depicted largest in yellow, followed by the eight planets and Pluto, each with a distinct fill color.

Loading thumbnail…

D3 Transitions

Six colored circles enter, update, and exit the screen using animated D3 transitions. The initial enter animation scales each circle from a radius of zero to its target size with a staggered delay, while the update transition moves circles to new positions quickly and the exit transition shrinks them back to nothing before removal. The example demonstrates the `selection.join()` pattern with separate enter, update, and exit handlers, using `transition().duration()` and `easeLinear` from D3 v7 to control timing and motion on an SVG canvas.

Loading thumbnail…

Daily Surface Air Temperature

This example displays daily global surface air temperature readings from Climate Reanalyzer, processed into CSV format. It shows a raw data preview by formatting the first data point as a JSON object in a large, readable preformatted text block using Svelte. The visualization loads the dataset with an ES module import and parses the CSV values into numbers for day of year, year, and air temperature. The demonstration highlights the structure of the data while the accompanying video explains the broader Svelte and D3 line chart workflow.

Loading thumbnail…

Keeling Curve Data

This example displays the raw JSON structure of the first row from the Keeling Curve dataset, which records atmospheric CO₂ concentrations at Mauna Loa. The code imports the CSV data, converts date fields to JavaScript `Date` objects in UTC, and replaces the sentinel value of -99.99 with `NaN` to handle missing measurements. A simple `<pre>` element renders the formatted JSON output. The dataset originates from the Scripps CO2 Program.

Loading thumbnail…

*UN Population Estimates 2024

This example displays the complete first row of the UN Population Estimates 2024 dataset as a formatted JSON object, revealing all 54 quantitative attributes for the world. The code stores the parsed CSV data in a variable and uses a hardcoded list of attribute names to convert numeric strings to numbers. It then writes the first record to the container’s innerHTML inside a `<pre>` tag with a fixed font size, rendering the full structured data plain text.

Loading thumbnail…

UN Population Estimates 2024

This example visualizes the first record of the UN Population Estimates 2024 dataset by displaying its entire contents as pretty-printed JSON text. It demonstrates the structure and all quantitative attributes of the data, showing both metadata and demographic indicators for the world. The visualization uses a plain HTML `<pre>` element with JavaScript string interpolation to render the formatted output. The code imports the data from a CSV file and parses all listed quantitative fields from strings to numbers before display.

Loading thumbnail…

UN Population Estimates 2024

This example visualizes the first record of the UN Population Estimates 2024 dataset by displaying its entire contents as pretty-printed JSON text. It demonstrates the structure and all quantitative attributes of the data, showing both metadata and demographic indicators for the world. The visualization uses a plain HTML `<pre>` element with JavaScript string interpolation to render the formatted output. The code imports the data from a CSV file and parses all listed quantitative fields from strings to numbers before display.

Loading thumbnail…

CSV Dataset Template - Penguins

This example displays the first row of the Palmer Penguins dataset in a preformatted text block. It imports the data using a rollup plugin, parses the quantitative fields (bill length, bill depth, flipper length, body mass) into numbers, and exports both a formatted display and the parsed data for external use. The code uses JavaScript’s `JSON.stringify` and a template literal to render the output.

Loading thumbnail…

Circles with D3

This example demonstrates the basic structure of a VizHub V3 visualization using a gray SVG canvas populated with six colored circles. It shows how to establish an SVG scene and render data-driven shapes, with each circle’s position, size, and color specified by properties in a JavaScript array. The code uses the D3 library, specifically the `select` API, to create the SVG container and join circle elements to the data, setting attributes like `cx`, `cy`, `r`, and `fill`, along with a fixed opacity value.