Cameron Wehr

@cameronwehr·14 public vizzes

Personal Redo

This example shows a scatter plot of the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis using D3 version 7. The visualization uses `d3.csv` to load data from a Gist, with `d3.scaleLinear` and `d3.extent` for scale construction. Circles are rendered as SVG elements via data joins, while `d3.axisLeft` and `d3.axisBottom` provide labeled axes. The chart is built using a reusable function pattern with method chaining for configuration.

Sep 18, 2023

Loading thumbnail…

Reusable Charts Notes

This example demonstrates a reusable scatter plot generated from the Iris dataset, which is loaded as CSV from a GitHub Gist. The chart visualizes the relationship between petal length and sepal length, using D3 version 7’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs to map data values to SVG coordinates and render axes. The code constructs a custom `scatterPlot` function with getter-setter methods for configuration, enabling the chart to be applied to an SVG element via method chaining. The final visualization fills the browser window and is rendered as an interactive SVG.

Sep 16, 2023

Loading thumbnail…

Scatter Plot Basic

This example demonstrates a basic scatter plot using the classic Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. It renders circles as SVG elements, with axes generated via `axisLeft` and `axisBottom` from `d3.scaleLinear`. The code fetches the CSV data asynchronously, parses numeric fields, and positions each point based on computed scales. The chart fills the window, with margins and a fixed circle radius, using D3’s selection and join operations to bind data to the SVG circles.

Sep 12, 2023

Loading thumbnail…

JS packs D3

This example demonstrates the basic setup for using D3 version 7, rendering the text “Hello D3 version 7” in the browser body at a large font size. It imports D3’s `select` method and combines it with custom ES modules from separate files, including a `something.js` module that exports a string combining values from `thing.js`. The `index.html` loads D3 from a CDN as a global script, while a pre-built `bundle.js` (compiled from the JavaScript modules) is invoked afterward to execute the D3 selection and text assignment.

Sep 9, 2023

Loading thumbnail…

Modules in JS of D3 Starter

This example demonstrates a simple animated visualization of circles connected by a line path, with positions and radii oscillating over time. Built as a modular JavaScript application using ES6 imports, it initializes an SVG canvas with D3 v7 and uses `setInterval` to update the scene at roughly 60 frames per second. The animation relies on custom functions `makeData` and `vizData` to generate data points and render circles and a line using D3’s `line` generator, with `selectAll`, `data`, and `join` for smooth updates.

Sep 9, 2023

Loading thumbnail…

Functions in JS of D3 Starter

This example demonstrates a generative animation of circles floating across the browser window. A sine wave controls both the number of circles and their vertical position, creating a smooth, undulating motion. Using D3 version 7, the code selects the empty SVG element and dynamically joins circle elements, updating their `cx`, `cy`, and `r` attributes each frame. The animation runs on a 60 FPS interval, directly manipulating SVG attributes in a minimal, function-based approach without any data source.

Sep 9, 2023

Loading thumbnail…

D3 Starter

A row of circles oscillates vertically and changes radius in a continuous, wave-like animation, creating a visually dynamic scene across the full browser window. The example demonstrates the core D3 data-join pattern using `d3.select` and `d3.range` to generate and update data. It renders SVG circles with `.join('circle')` to handle enter and update selections, while `setInterval` drives the animation at 60 frames per second, recalculating positions and sizes based on a time-variable `t`.

Sep 9, 2023

Loading thumbnail…

Adding symbols D3 Sol LeWitt

This example reproduces a Sol LeWitt wall drawing using D3.js (v7.8.5) and SVG rendering. It creates a grid of horizontal and vertical stripes, overlaid with two masks that cut out large geometric symbols from D3's built-in `symbols` gallery. The code uses D3's `select`, `range`, `symbols`, `symbol`, and `join` APIs to build the composition procedurally. The alternating black-and-white masks generate the negative and positive shapes, visually echoing LeWitt's instructional art.

Sep 8, 2023

Loading thumbnail…

Refactored D3 Sol LeWitt

This example reproduces a Sol LeWitt wall drawing using D3 to generate a grid of horizontal and vertical stripes. It demonstrates how the `symbols` API creates a circular mask over two layered sets of rectangles, producing an interplay of striped patterns. The SVG is rendered full-window, and the code uses D3's `select`, `range`, `join`, and `attr` methods to construct the visualization. Two mask definitions alternate their inverted states to show how the same symbol can create positive and negative space.

Sep 8, 2023

Loading thumbnail…

Recreated Sol LeWitt Reproduction in D3

This example recreates a Sol LeWitt drawing using D3.js, rendering a grid of horizontal and vertical bars that are revealed through circular masks. The composition shows a central circle cut out from both a field of horizontal stripes and a field of vertical stripes, creating an intersecting geometric pattern. The code uses D3 selections (`select`, `range`) to append SVG elements, and applies `mask` attributes with `circle-mask` and `circle-mask-2` to layer the two stripe directions. Rectangles are generated via a join operation, with masks defined by black and white fill rectangles and circles.

Sep 8, 2023

Loading thumbnail…

Sol Lewitt Circle

Full-screen SVG masks create a circular window that reveals intersecting vertical and horizontal striped rectangles, based on Sol Lewitt’s wall drawings. The code constructs two masks—one with a white circle on black and another with a black circle on white—then applies them to 100 vertical and 100 horizontal rectangles using `createElementNS` and `setAttribute`. This renders a geometric pattern where the circle area shows colored bands while the surrounding background remains empty.

Aug 30, 2023

Loading thumbnail…

JS practice

This example demonstrates how SVG masks can combine two complementary cutout patterns. It renders a full-screen SVG canvas where a grid of vertical and horizontal rectangles is layered, with each set masked by a distinct circular hole centered in the viewport. The code uses the raw SVG DOM API via `document.createElementNS` to build masks, rectangles, and the masking circles, setting attributes like `mask` and `fill` directly. No JavaScript libraries are used; the result is a visible intersection of the two mask shapes across the rectangle layers.

Aug 30, 2023

Loading thumbnail…

JS practice

This example demonstrates the use of JavaScript and D3.js to create an SVG-based visualization, rendering a black rectangle within a 960x500 pixel canvas. The code loads D3 via UNPKG and uses the `select` function to set the text content of a message div, while also importing a local ES6 module. It combines direct SVG manipulation through the Document API with D3’s utility functions.

Aug 30, 2023

Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

An animated SVG landscape depicts a stylized sunrise and sunset cycle. A circle representing the sun moves along an arcing path across a 960 by 500 canvas, while the sky and layered landmasses transition between light and dark color palettes. The animation uses SVG `<animate>` elements to modify the sun's `cx` and `cy` coordinates and to interpolate the `stop-color` of radial and linear gradients over a 15-second repeating duration.

Aug 29, 2023