megan-grannan

Animated Reusable D3 Scatterplot with Symbols and Menu

This interactive scatterplot visualizes the Iris dataset, allowing users to explore relationships between sepal and petal measurements through menus in D3 v7 with React. Circles representing flowers animate smoothly between positions using d3.transition when axis selections change, while colors denote species. The visualization implements a reusable scatterPlot function with d3.scaleLinear, d3.scaleOrdinal, and axis components, rendered as SVG elements.

Reusable Animated D3 Scatterplot with Symbols

This animated scatterplot cycles through the Iris dataset’s four numeric attributes, using D3’s `scaleLinear`, `scaleOrdinal`, `axisBottom`, and `axisLeft` to map petal and sepal measurements. A `transition` with a one-second delay animates point positions and axis updates every three seconds. The chart colors points by species using a viridis palette and applies `symbols` and `symbol` scales, though only circles render. The x-axis label updates dynamically, while the SVG canvas fills the viewport.

Animated D3 Scatterplot with Symbols

This example displays the Iris dataset as an animated scatterplot where each flower is represented by a distinct symbol (circle, diamond, or triangle) based on species, colored with a viridis-inspired scale. Every two seconds, the x-axis shifts to a different measurement column among petal width, sepal width, petal length, and sepal length, causing points to smoothly transition to new positions. Built with React and D3 v7, the visualization uses `scaleLinear` for axes, `scaleOrdinal` for colors and symbols, and `d3.symbol` for mark shapes. The animation relies on `transition().duration(2000)` to update SVG `path` elements smoothly.

Dynamic D3 Scatterplot with Symbols

This interactive scatterplot animates through the Iris dataset, cycling the x-axis across four measured attributes every two seconds. It uses D3 scales and SVG symbols to encode species with both color and distinct shapes. The visualization leverages a reusable scatterplot function that re-renders on each interval, with axes updating dynamically. The data is loaded via D3’s CSV parser, and the plot uses ordinal scales for categorical color and symbol assignment.

Reusable D3 Scatterplot with Symbols

This example presents a reusable D3 scatterplot that visualizes the Iris dataset, mapping petal length against sepal length. It employs SVG rendering within a React framework, using d3.csv to load data and d3.scaleLinear for axes. Distinct species are encoded using d3.scaleOrdinal for colors and d3.symbols for varied point shapes, with d3.axisLeft and d3.axisBottom providing labeled axes. The chart is configured fluently via a custom scatterPlot function, demonstrating a modular approach to building interactive visualizations.

Reusable D3 Scatterplot

This example demonstrates a reusable D3 scatterplot component that visualizes the Iris flower dataset, mapping petal length and sepal length along the x and y axes. Points are colored and shaped by species using `d3.scaleOrdinal` with `d3.symbolsFill`. The component is built as a custom function using D3’s modular API, including `scaleLinear`, `axisLeft`, `axisBottom`, and `extent`, and is rendered with SVG. Data is loaded asynchronously via `d3.csv` and integrated into a React application.

Aug 14, 2023

D3 Scatterplot

This visualization displays the classic Iris dataset, plotting petal length against sepal length. Each flower sample is rendered as a fixed-radius circle in an SVG canvas that fills the browser viewport. The code uses D3 v7's `csv` loader to fetch data from a GitHub gist, then employs `scaleLinear` with `extent` to compute domains for both axes. Axis ticks are generated using `axisLeft` and `axisBottom`, with the categorical iris species left uncolored in this minimal example. The rendering relies on D3's declarative selection-based joins to bind data to SVG circle elements, with dimensions set to the window's inner height and width.

Aug 14, 2023

JS in HTML

This example shows a minimal HTML page that displays a large “Hello HTML!” message centered on the screen. It demonstrates the basic structure of combining HTML, CSS, and JavaScript in a single file, with the styling applied through a CSS class. The page loads D3 v7 from a CDN and includes a separate JavaScript module that imports a value from another file and logs it, along with the D3 `select` function, to the console. The visualization itself is static text, not a chart.

Fork of D3 Selection Exploration

This example demonstrates D3 selections and data joins through an animated swarm of circles whose count, position, and size shift continuously over time. It uses `d3.select`, `d3.range`, and `data().join()` to bind an array of simulated points to SVG circle elements, updating their `cx`, `cy`, and `r` attributes in a 60fps `setInterval` loop. The animation responds to a sine-based time variable, creating smooth, organic motion. Rendering happens entirely in SVG within a full-window viewport.

D3 Selection Exploration

This example demonstrates real-time selection and animation with D3.js, displaying a set of circles that move based on a sine wave. The code uses `d3.select` to target the SVG container and `d3.range` to generate data points, then applies D3’s `.join()` method to handle enter, update, and exit states for the circles. The animation runs at 60 frames per second with `setInterval`, updating each circle’s x and y position based on time, while the `r` attribute is set only on initial entry.

JavaScript Arrays

This example demonstrates a simple JavaScript array manipulation exercise using D3.js v7. It builds a custom range function to generate an array of numbers, then explores array methods like `forEach`, `filter`, `sort`, `map`, and `reduce` through commented code examples. The active portion sorts an array of objects by their `key` property using D3’s `ascending` comparator. The visualization gallery entry primarily serves as a code tutorial rather than a visual output, with no graphical rendering or data source involved.

Multi Shape Full D3 Sol LeWitt Reproduction

This D3.js reproduction of a Sol LeWitt drawing generates a full-screen SVG canvas filled with alternating vertical and horizontal striped rectangles, mimicking the artist's geometric style. Two SVG masks control the visibility of these line groups, with each mask containing a set of large, rotated path symbols drawn using `d3.symbols` and `d3.symbol`. The masks are layered so that the symbols cut through the striped patterns, creating intersecting circular and polygonal cutouts. The code uses D3's `select`, `range`, and `.join` methods to build the visual elements dynamically across a 100-point grid.

Full D3 Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-style geometric drawing using D3 v7 in an SVG. It shows a grid of alternating vertical and horizontal rectangles overlaid with two circular masks, creating a crosshatched pattern with a central starburst-like cutout. The code uses D3 selections, `range`, `join`, and `symbol` with `symbols[1]` to generate shapes, while `select` appends the SVG to the body. Masks are built via a custom `renderMask` function that toggles fill colors based on an `inverted` parameter. Data is generated procedurally with `range(n)` for 100 iterations.

group element D3 Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-style drawing with layered horizontal and vertical stripes overlaid on a full-window SVG canvas. The piece shows a grid of thin, alternately oriented lines that are masked to reveal a central circular cutout, with the vertical and horizontal bands intersecting to create a woven pattern. Built using D3 v7, it employs `select().append()`, `range()`, and the `join()` operator to generate 100 rects in each group, while two SVG `<mask>` elements define the circular reveal and concealment for the line sets.

Fork of D3 Sol LeWitt Reproduction

This interactive geometric visualization uses D3 v7 to reproduce a Sol LeWitt art piece. The sketch renders overlapping horizontal and vertical stripes across the full browser window, using D3 selection methods `selectAll()` and `join()` with `range()` to generate 100 rectangles in each direction. SVG masks with circular cutouts create two concentric masked regions, with a black circle mask revealing the horizontal stripes while a white circle mask reveals the vertical stripes in the center. The artwork displays a minimalist grid pattern where the two stripe orientations intersect within the central circular area.

D3 Sol LeWitt Reproduction

This example reproduces Sol LeWitt’s geometric wall drawing using D3 v7. It creates a full-screen SVG and populates it with two sets of 100 thin horizontal and vertical rectangles. Two SVG masks, each containing a central circle, are applied to the respective rectangle groups, making the horizontal lines visible only inside the first circle and the vertical lines visible only inside the second. The `select` and `range` functions from the D3 API are used to construct the SVG elements.

Final Sol LeWitt Reproduction

This SVG rendering reproduces a Sol LeWitt wall drawing as two intersecting sets of striped rectangles. A circular mask reveals horizontal black stripes on a white background, while a second mask reveals vertical stripes, creating a grid-like pattern within a central circular region. The code uses raw SVG elements—`rect`, `circle`, and `mask`—constructed dynamically with JavaScript, with dimensions tied to the browser window size.

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt art piece using raw SVG and JavaScript, showing a grid of vertical lines confined to a circular region at the center of the screen. The code creates an SVG mask with a white rectangle and black circle, then applies that mask to a series of thin vertical rectangles spaced every 20 pixels across the viewport. The result is a minimalist geometric composition where the line grid is visible only inside the circular window, mimicking LeWitt’s systematic drawing style.

Fork of Sol LeWitt Reproduction

This piece reproduces a Sol LeWitt wall drawing using a generative, code-based approach. It shows a circular area of black horizontal stripes set against a plain white background, directly echoing the minimalist aesthetic of the original. The artwork is constructed with an SVG `mask` and dynamically created `rect` elements. The code uses the `document.createElementNS` API to build the SVG structure, with the mask restricting the parallel bars to a circular form.

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt drawing using purely procedural SVG generation. It displays a full-screen field of evenly spaced horizontal bars, with a circular area in the center where the bars are masked out to reveal the background. The code creates the SVG dynamically via the DOM API, using `document.createElementNS` to construct each rectangle and a circular SVG `<mask>` to define the central void. No external libraries are used, and the rendering is entirely based on the browser's viewport dimensions.

JS Basics

This visualization reproduces a Sol LeWitt art piece using SVG rendering. The code demonstrates JavaScript fundamentals—variables, objects, loops, and functions—through commented examples, while the active script creates an empty SVG canvas with dimensions of 960 by 500 pixels. The example serves as a teaching tool for basic programming concepts, using vanilla JavaScript to manipulate the SVG element directly.

SVG Fundamentals

This example demonstrates the basic building blocks of SVG graphics, including circles, rectangles, a custom path, and a line, all rendered directly on an HTML page. It shows how CSS can animate rectangular elements smoothly over three seconds, and how a hover effect triggers a green fill with a thick stroke. The code uses the native `svg` element and its child tags like `circle`, `rect`, `path`, and `line`, with styling applied via an embedded `<style>` block. It serves as a bare-minimum introduction to SVG fundamentals using only HTML and JavaScript without any external libraries.