rwata97

d3 scatter plot

This D3.js scatter plot visualizes the Iris dataset, plotting petal length on the x-axis against sepal length on the y-axis. Each flower instance is represented as a small circle, with axes labeled and scaled linearly using `d3.scaleLinear`. The code loads CSV data via `d3.csv`, maps values using `d3.extent` to determine the y-domain, and renders the SVG chart full-screen. The visualization uses D3 v6 within a React framework, drawing circles with `d3.select` and `d3.join` to manage the marks.

Apr 21, 2023

D3 Selection exploration

This example demonstrates how D3 selections manage dynamic data updates through animation. An SVG scene continuously redraws a set of circles and connecting lines, with the number of elements oscillating between 5 and 15 based on a sine wave. The code uses D3’s `select` and `range` functions, along with the `join` pattern to bind data to circle and line elements. Data is generated procedurally via `makeData`, updating positions and radii each frame. React serves as the framework wrapper, while the animation runs on a `setInterval` timer with a 60fps approximation.

D3 Selection exploration

This example demonstrates D3 selection and data-join patterns by animating a series of circles and connecting lines across a full-screen SVG. As time progresses, the circles oscillate vertically along sine waves while lines link consecutive points. The code uses `d3.select`, `d3.range`, and the `selection.join` method to bind and update elements each frame. Rendering is driven by a `setInterval` loop that regenerates the data and re-applies the `makeCircle` and `makeLine` functions, highlighting how D3 manages enter, update, and exit states.

soli d3 experiments refactor

This example uses D3 v6 to render a full-screen SVG with 100 horizontal rectangles stacked vertically. A single white 150×150 pixel mask is applied via the `mask` API, revealing only the section of the striped pattern that overlaps the mask’s area. The code builds the visualization by appending a `<mask>` element, adding a white rectangle to it, and then joining data from `range(n)` to create the stripes. The CSS classes `.first` and `.second` are defined but unused, and the commented-out code suggests previous experiments with clip paths.

Fork of Episode 4: Sol LeWitt Reproduction with D3

This example reproduces one quadrant of a Sol LeWitt wall drawing, showing a single square of repeating horizontal stripes clipped to mask boundaries. The visualization uses D3 v6 to generate 100 SVG rectangles positioned vertically across the full viewport, each masked by a white 150×150 pixel square in the canvas’s top-left corner. The code defines the mask with SVG `<mask>` elements and appends rectangle data via `selectAll`, `data`, and `join`, using `range` from D3 to supply indices. Only the top-left square is enabled; the other three quadrants remain commented out.

soli d3 experiments

This example generates layered, striped patterns by arranging arrays of rectangular elements across the screen. It uses d3 selection and data joins to create four groups of rectangles, each rotated and translated with SVG transform attributes to form overlapping geometric compositions. The code leverages clip paths (via `clipPath` and `rect`), masks, and z-index styling to control visibility and layering, with CSS classes assigned to each group. All rendering occurs in an SVG element sized to the full browser window, using d3 v6 within a React project.

Fork of Fork of reproduction of somethind 4th cell

This example shows a radial bar chart plotting five data series as concentric circular rings, with each series represented by a wedge extending from the center to a value on a 0–100 scale. The visualization uses D3.js version 7.8.4 to generate an SVG, employing `d3.lineRadial` with `curveLinearClosed` to create the series paths, `d3.scaleLinear` for the radius mapping, and SVG circles as grid levels. Axis labels are positioned using trigonometric calculations based on the angle slice for each series.

Exercise Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3.js, generating a grid of overlaid horizontal and vertical rectangles that are masked to create a geometric, abstract composition. The visualization uses `d3.select`, `d3.range`, and `d3.symbols` to create SVG elements, with `d3.symbol` generating custom shapes within masks. The code dynamically assigns x and y positions to the rectangles, alternating between horizontal and vertical orientations, and applies inverted and non-inverted masks to achieve the layered visual effect. The result is a generative, screen-filling artwork that mimics the minimal, rule-based style of LeWitt's wall drawings.

Full Sol LeWitt Reproduction with D3

This interactive SVG reproduction of a Sol LeWitt piece uses D3 to generate a grid of horizontal and vertical stripes. The code defines two masks that selectively reveal or hide the stripes based on a series of symbol-shaped paths, creating a dynamic and layered geometric composition. The program uses D3's `select`, `range`, `symbol`, and `symbols` functions to build the SVG elements and masks, with the rendering adapting to the window size. The artwork's behavior is driven entirely by the mask transformations and symbol generation.

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt art piece using D3. It draws a grid of horizontal and vertical rectangles that are masked by two circles, creating a pattern of alternating lines within circular cutouts. The code uses D3’s `select` and `range` functions to generate SVG elements, and applies SVG masks with `circle` elements to clip the rectangles. The artwork is rendered as an SVG, filling the browser window.

Sol LeWitt in vanilla js exercise

This interactive SVG artwork, inspired by Sol LeWitt, uses intersecting triangular masks to create a dynamic, layered composition of colorful bars. The page renders two distinct geometric patterns: horizontal bands of random widths and colors from a rainbow palette, and vertical elements, all clipped by black and white triangle masks. Built with vanilla JavaScript and the SVG DOM API, the visualization responds to user interaction, with the primary triangle performing a slow rotation animation on hover.

Fork of Sol LeWitt in vanilla js vertical

This visualization displays a series of horizontal stripes that are only visible within a circular region centered on the screen. The piece uses a mask to reveal the stripes, which are rectangles with a fixed height of 10 pixels, spaced 30 pixels apart and spanning the full width of the viewport. The implementation relies on vanilla JavaScript and the SVG API, creating elements like `svg`, `mask`, `circle`, and `rect` dynamically. The mask uses a black circle to hide the outer stripes, while white fills the rest of the mask to show the bars inside.

Fork of Sol LeWitt in vanilla js

This example generates an abstract, generative artwork inspired by Sol LeWitt using vanilla JavaScript and SVG. It creates 100 vertical rectangles, each positioned at increasing x-coordinates across the full browser window. The code uses the Document Object Model (DOM) API `document.createElementNS` with the SVG namespace to construct the elements, setting attributes like width, height, and position via `setAttribute`. The rendering approach relies entirely on procedural generation, with no external data source, producing a minimalist grid-like pattern of thin bars against a blank background.

Sol LeWitt in vanilla js

Sol LeWitt’s geometric wall drawing is recreated as an abstract composition of green rectangles and small black tick marks on a white field. The page renders entirely through static SVG elements, with no JavaScript logic driving the layout. The artwork uses hard-coded coordinates and fills to mimic the artist’s systematic, rule-based style, presenting a faithful, non-interactive data-visualization homage in a bare HTML document.

SVG fundamental

This example demonstrates fundamental SVG rendering in React, showing a bar chart with green rectangles of varying heights and a detailed axis with tick marks. The visualization uses raw SVG elements including `rect` for the bars and repeated `line` elements for the axis ticks, all defined directly in JSX within the HTML structure. The chart displays four data bars arranged horizontally on a white background within a 1280x832 viewBox, with the tallest bar on the right and progressively shorter bars moving left. The rendering relies entirely on static SVG markup without any JavaScript libraries or data processing.