Parker-D5

@Parker-D5·12 public vizzes

Scatter Plot Using Different Data Set

This scatter plot visualizes the relationship between time of day (GMT) and the number of tweets per minute, using data from a CSV file loaded with `d3.csv`. The code maps time to the x-axis via `scaleTime` and tweet counts to the y-axis with `scaleLinear`, rendering each data point as an SVG circle. Axes are added using `axisLeft` and `axisBottom`, with time formatted as hours using `timeFormat`. The chart fills the browser window, with a fixed radius of 2 pixels for all points.

Oct 25, 2023

Loading thumbnail…

Following Along Point Scale Animated Scatter Plot with Menus

This example shows an interactive scatter plot of the Iris dataset with two dropdown menus for selecting which quantitative or categorical column maps to the x and y axes. Animated transitions via `d3.transition` and `selection.join` move circles smoothly between positions, while axes update with a default `axisBottom` and `axisLeft` scale. The code uses d3.v6 with `scaleLinear` and `scalePoint`, rendering in SVG with an opacity of 0.2 on each circle. Data is loaded as CSV and parsed on the fly.

Oct 11, 2023

Loading thumbnail…

Menu on Animated Reusable D3 Scatter Plot Following Along

This interactive scatter plot displays Fisher's Iris dataset with animated transitions between different variable pairings. Two dropdown menus let users select which measurements appear on the x and y axes, with all five attributes available for both dimensions. The visualization uses d3.scaleLinear for numerical values and d3.scalePoint for the species category, implementing smooth animations through d3.transition and the join/enter/update pattern. The chart renders as SVG with axis updates and label repositioning occurring over a one-second duration, while points drift to their new positions with staggered delays based on data index.

Oct 11, 2023

Loading thumbnail…

Animated Reusable D3 Scatter Plot Following Along

This example presents an animated scatter plot of the Iris dataset using a reusable D3 chart factory. The plot cycles through different feature combinations every five seconds, animating points between positions with `d3.transition` and staggered delays. The visualization leverages `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` for scales and axes, while the reusable module pattern allows dynamic reconfiguration of accessors and labels. SVG rendering displays circles that grow on entry and reposition smoothly as the selected x-axis feature changes.

Oct 10, 2023

Loading thumbnail…

Reusable D3 Scatter Plot Following Along

This example demonstrates a reusable scatter plot that animates through different Iris flower measurements, cycling between petal width, sepal width, petal length, and sepal length every two seconds. The visualization uses D3's `scaleLinear`, `axisLeft`, `axisBottom`, and data join methods to render SVG circles and axes, with the `scatterPlot` function implementing a reusable chart pattern. The plot updates smoothly as new x-value accessors are assigned, showing how the same underlying data can reveal different patterns depending on which variables are compared. It loads the Iris dataset from a CSV file and renders it at full window size.

Oct 6, 2023

Loading thumbnail…

Reusable D3 Scatter Plot With Symbols Following Along

This reusable D3 scatter plot displays the classic Iris dataset, mapping petal length against sepal length with points colored by species. The chart uses d3.scaleLinear for axes, d3.scaleOrdinal with the symbols array to assign distinct shapes to each species, and a d3.symbol generator to render SVG paths. Axis ticks are styled via d3.axisLeft and d3.axisBottom, while the full-width responsive layout fills the browser window.

Oct 4, 2023

Loading thumbnail…

D3 Scatter Plot Following Along

This example displays the classic Iris dataset as a scatter plot, mapping petal length along the x-axis and sepal length along the y-axis. The visualization uses D3 v7’s `scaleLinear` and `extent` functions to compute the domain from the CSV data, then renders circles via SVG selection joins. Axis components are generated with `axisLeft` and `axisBottom`. The plot fills the entire browser window, with data loaded asynchronously from a GitHub gist, parsed to numeric values, and drawn with fixed 5-pixel radius points.

Sep 28, 2023

Loading thumbnail…

D3 Selection following along

Animated D3 line and circle rendering demonstrates dynamic data binding, where sine-wave points continuously update through a `d3.line` path generator. The visualization uses `selectAll` with join operations to update SVG elements each frame, driven by a `setInterval` loop. Data generation via `makeData` recalculates positions, radii, and colors from the time variable, while the D3 v7 library provides the core selection and shape-generation APIs. The resulting organic motion shows how D3's data-join pattern efficiently manages changing datasets.

Sep 26, 2023

Loading thumbnail…

Full Sol LeWitt D3

Sol LeWitt’s geometric drawing system is recreated as a generative SVG composition using D3. Horizontal and vertical grid lines are drawn across the viewport, each filtered through one of two masks that reveal alternating symbol shapes from `d3.symbol` at fixed intervals. The masks are constructed with `d3.select` and `append`, using `d3.range` to place five distinct symbols, while the grid relies on `selectAll` and `join` with `rect` elements. This implementation adapts the artist’s rule-based aesthetics to a full-screen, code-driven format.

Sep 25, 2023

Loading thumbnail…

Fork of Following Along Sol LeWitt D3

This example generates an abstract geometric composition inspired by Sol LeWitt using D3 v6. It renders two sets of overlapping striped rectangles—horizontal and vertical—that intersect to create a grid pattern. Two SVG masks define a central circular region where the horizontal stripes remain visible while the vertical stripes are hidden, producing a contrasting visual effect. The code uses `d3.select`, `d3.range`, and `join` to bind data to SVG `<rect>` elements, with mask attributes controlling visibility.

Sep 25, 2023

Loading thumbnail…

Following Along Sol LeWitt

This example recreates Sol LeWitt’s geometric wall drawings using layered SVG masks and rotating stripes. Alternating purple and dark-purple horizontal and vertical bands are clipped to two complementary circular masks, producing a crossing pattern inside a central ring while the outer area remains solid. The horizontal bands rotate continuously via CSS keyframe animations. The code builds all elements dynamically with vanilla JavaScript, using the SVG `mask`, `rect`, and `circle` APIs without any external libraries.

Sep 21, 2023

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape construction by drawing a crosshair and concentric circles on a 900x500 canvas. It uses raw SVG elements including `path`, `circle`, and `stroke`/`fill` attributes, with no external libraries. The blue background and black grid lines created by a single path with multiple `M` and `L` commands highlight how path data controls line placement. A gray outer circle, lighter inner circle, red center dot, and a red vertical line show layering and coordinate positioning. The rendering is entirely static SVG markup defined directly in the HTML.

Sep 18, 2023