jony6290

@jony6290·5 public vizzes

Sol LeWitt long symbol

This interactive visualization generates abstract art inspired by Sol LeWitt, displaying grid-like patterns of thin horizontal and vertical rectangles. Pressing the up or down arrow keys changes the number of repeated art panels from 1 to 8, with the current count persisted in Local Storage. The SVG rendering uses D3’s `select`, `range`, `symbol`, and `symbols` to create each panel, while masks with inverted fills carve out distinct geometric symbols from the grid. The layout adapts to the viewport width, dividing it equally among the panels.

Jul 5, 2023

Loading thumbnail…

Scatter plot

This scatter plot visualizes the relationship between farm-level and packaging-level greenhouse gas emissions for various food products. Each circle represents a data point from the OurWorldinData dataset, plotted with its Farm value on the x-axis and Packging value on the y-axis. The code uses d3.csv to load and parse the data, converting string values to numbers, then applies d3.selectAll with a data join to create SVG circles with fixed radii of 5 pixels. The visualization renders directly to the DOM using D3 v7 and standard SVG attributes.

Jul 4, 2023

Loading thumbnail…

D3 Selections

This example animates a set of circles and vertical lines in an SVG, with the circles bobbing up and down in a sine wave pattern over time. The visualization uses D3’s `select`, `append`, and `selectAll` APIs to manage the SVG elements, and the `join` method to update the DOM as new data arrays are generated each frame by `makeData`. The animation is driven by a `setInterval` timer that updates the data and redraws the scene at 60 frames per second, with line opacity varying based on the circle’s vertical position.

Jul 3, 2023

Loading thumbnail…

D3 all symbols

This example displays a grid of horizontal and vertical stripes overlaid with all D3 symbols. The code generates two sets of 100 rectangles each, using D3’s `range` and `selectAll` with `join` to create the stripes, and applies two SVG masks to reveal the symbols through the grid. Each mask is built by iterating over D3’s `symbols` array and rendering each symbol using the `symbol()` API, with the second mask inverted to create a contrasting overlay effect.

Jun 19, 2023

Loading thumbnail…

Sol LeWitt With D3

This example recreates a Sol LeWitt wall drawing using D3.js to render layered geometric abstractions in SVG. The visualization combines horizontal and vertical striped rectangles with concentric arc paths, all filtered through SVG masks that selectively reveal or hide portions of each shape across the viewport. The code uses D3 selections with `range()` to generate repeated elements, `.join()` for data binding, and `mask` attributes to composite intersecting forms. The result is a dynamic, generative composition that responds to the browser window dimensions while echoing LeWitt’s systematic, rule-based artistic style.

Jun 15, 2023