crees00

@crees00·4 public vizzes

Wk5 Fork of D3 Selection Exploration

Animated dots and connecting lines form a flowing, wave-like pattern across the screen. The visualization uses D3 v6's `selectAll` and `join` methods to continuously update SVG circles and lines at 60 frames per second. Data is generated procedurally via `makeData`, producing a variable number of points whose x, y, and radius values oscillate sinusoidally. The lines connect each point to its predecessor, with stroke width scaled to the current dot radius, creating a dynamic, undulating network.

Sep 2, 2022

Loading thumbnail…

hw10 - add axis labels to Animated Reusable D3 Scatter Plot

This animated scatter plot visualizes the Iris dataset with petal width mapped to the x-axis and sepal length on the y-axis, using D3 v6’s `scaleLinear`, `axisLeft`, and `axisBottom` to render axes. Circles representing data points transition smoothly via `selection.join` and `transition` as the x-axis variable cycles through the dataset’s numeric columns every 30 seconds. SVG labels for each axis are configured through custom `xLabel` and `yLabel` accessor functions, demonstrating a reusable chart pattern inspired by Bostock’s “Towards Reusable Charts.”

Aug 31, 2022

Loading thumbnail…

Fork of Reusable D3 Scatter Plot

This example displays the classic Iris dataset as an animated scatter plot, cycling through the four measured features (petal width, sepal width, petal length, and sepal length) on the x-axis every 20 seconds while sepal length stays on the y-axis. Built with D3 v6, it uses `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` to compute scales and draw axes, with the `scatterPlot` function providing a reusable API via method chaining. Each feature’s values map to circle positions with a fixed radius, and the visualization renders in SVG, resizing to fill the browser window.

Aug 31, 2022

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-inspired geometric drawing using raw SVG elements created via the JavaScript DOM API. It shows a grid of blue horizontal bands and red vertical bands, with a white circular mask that reveals both sets of stripes within its radius against a black background. The code constructs an SVG mask and applies it to rectangles tiled across the viewport, using mask elements and fixed pixel offsets to generate the layered pattern. No external libraries are used; the rendering relies entirely on native browser SVG and DOM manipulation.

Aug 15, 2022