Angela Kochoska

@gecheline·12 public vizzes

d3 Selections exploration

This example demonstrates real-time animated selection management in D3.js, showing how data-driven circle positions respond to changes in a sine-wave-based array over time. Using D3’s `select`, `selectAll`, and `.data()` methods, the visualization adds new circles for incoming data points and updates existing ones. The code showcases the modern `.join()` API, which automatically handles enter, update, and exit states for SVG circles, applying attributes like `cx`, `cy`, and `r` in a single chained operation. Rendering occurs through an SVG canvas with a 60fps interval-driven animation loop.

Feb 28, 2023

Loading thumbnail…

JavaScript arrays

This example demonstrates common JavaScript array manipulation techniques, including `map`, `filter`, `reduce`, and custom sorting, using both native methods and D3’s `ascending` and `descending` helpers from d3-array. The code creates a range of numbers, filters for even values, transforms objects, and sorts an array of numeric and key–value entries. It shows how `reduce` can aggregate values or build an object from array entries. The visualization is a bare HTML page with no rendered graphics, focusing instead on console output for learning array operations.

Feb 28, 2023

Loading thumbnail…

Fork of d3 all out on sol lewitt - updates

Two alternating line grids are masked into interlocking black-and-white bands and geometric symbols, reproducing a Sol LeWitt wall drawing. The SVG uses d3.mask elements, d3.range, d3.symbol and d3.symbols to generate vertical and horizontal line rectangles and rotating symbol shapes. Mask colors flip according to grid position and inner/outer layer, creating mirrored contrast. The code updates mask geometry dynamically with d3 joins, and renders to the full viewport using plain SVG attributes.

Feb 27, 2023

Loading thumbnail…

d3 all out on sol lewitt

This example reproduces a Sol LeWitt-style geometric artwork using d3.js. It renders a grid of vertical and horizontal rectangles whose visibility is masked by d3 symbols (circles, crosses, diamonds, and squares) positioned across the canvas. The SVG output uses two masks to alternately reveal or hide the grid lines, creating an intricate interplay of shapes and negative space. The code leverages d3.select, d3.range, d3.symbols, and d3.symbol to programmatically generate the composition.

Feb 27, 2023

Loading thumbnail…

Fork of Sol LeWitt reproduction with d3 _ 2

This SVG reproduction of a Sol LeWitt piece uses d3 to generate two overlapping sets of rectangular grids. The code creates horizontal and vertical bars, each masked to reveal either a central circular area or the surrounding region. Using d3’s `select` and `range`, it appends a full-window SVG and populates group elements with 100 rectangles each. The inner mask highlights a 200-pixel-radius circle, while the outer mask inverts this shape, producing the characteristic geometric interplay.

Feb 26, 2023

Loading thumbnail…

Full Sol LeWitt reproductions with d3

This example reproduces a Sol LeWitt piece using D3.js by generating a grid of horizontal and vertical lines. Two SVG masks, defined as "inner-mask" and "outer-mask", are applied to these lines to reveal or hide portions of the grid, creating a complex geometric pattern. The masks are constructed using D3's `symbol` and `symbols` APIs to draw paths that form the mask shapes. The code uses D3's `select`, `append`, `attr`, and `join` methods to build the SVG structure and apply data-driven attributes. The rendering is done entirely in SVG, scaling to the browser window size.

Nov 4, 2022

Loading thumbnail…

All out on Sol LeWitt reproductions with d3

This example reproduces a Sol LeWitt wall drawing using D3.js, rendering a grid of horizontal and vertical rectangles. Two SVG masks, each containing a large geometric symbol, selectively reveal the grid lines, creating layered patterns. The visualization uses D3’s `select`, `range`, `symbol`, and `symbols` APIs to generate the masked output, with the SVG rendered directly in the browser.

Nov 4, 2022

Loading thumbnail…

Sol LeWitt reproduction with d3

This example reproduces a Sol LeWitt wall drawing using D3.js, rendering a grid of intersecting horizontal and vertical rectangles as SVG elements. The artwork shows a dense cross-hatch pattern that gradually disappears within a central circular region, creating a stark contrast between the outer textured area and the empty circle. The code generates 100 lines in each direction using `d3.range` and `selectAll(...).join('rect')`, then applies two SVG masks (`inner-mask` and `outer-mask`) to selectively reveal or hide the lines. The piece scales to the full browser window size.

Nov 4, 2022

Loading thumbnail…

Fork of Sol LeWitt reproduction - adding color and animation

This interactive web piece revives a Sol LeWitt wall drawing as a generative, animated SVG artwork. It displays layered horizontal and vertical lines whose colors and inner circular mask radius continuously shift through a red-orange-yellow palette. The work is built with plain JavaScript and the SVG DOM API, using generated `rect` and `circle` elements with CSS `@keyframes` animations to choreograph the color and radius changes.

Oct 28, 2022

Loading thumbnail…

Sol LeWitt reproduction

This piece reproduces a Sol LeWitt wall drawing using JavaScript to generate SVG elements dynamically. It displays a composition of horizontal and vertical striped rectangles that form a distinct circular pattern at the center of the viewport. The rendering uses two SVG masks, `inner-circle-mask` and `outer-circle-mask`, to control the visibility of the 100 horizontal and 100 vertical `<rect>` elements, which are sized relative to the window’s dimensions. The code relies on basic SVG APIs such as `createElementNS`, `setAttribute`, and `appendChild` to construct the artwork.

Oct 25, 2022

Loading thumbnail…

JS Basics

This example shows a blank SVG canvas accompanied by a JavaScript console demonstration. The code introduces fundamental JavaScript concepts, including variables, object mutation, loops, arrow functions, and function definitions, all of which are commented out. It then defines a `person` function that returns an object and logs the result `{first: "Jane", last: "Doe"}` to the console. The visualization itself remains empty, focusing entirely on the scripting basics rather than graphical output.

Oct 25, 2022

Loading thumbnail…

SVG Fundamentals - Orbiting Planet

This example demonstrates a simple animated solar system using SVG primitives. A gradient-filled circle represents the sun, while a smaller gradient-filled planet moves along an elliptical orbit path represented by a dashed grey ellipse. The animation is driven by SVG’s built-in `<animate>` elements, which update the planet’s `cx` and `cy` attributes over a five-second loop. Radial and linear gradients define the celestial bodies’ coloring, and the code directly uses React in the parent application, though this bare HTML file relies purely on native SVG and CSS.

Oct 25, 2022