caitlin-woods

@caitlin-woods·8 public vizzes

Fork of Organization Graph Diagram

This visualization displays a network of connections between organizations funded by the Kenneth Rainin Foundation, with nodes representing main entities, child nodes, and unlabeled leaf nodes. The graph uses d3.forceSimulation with forceManyBody and forceLink to position nodes dynamically, while links are colored to match their source nodes. Node colors are generated from a palette in colors.js, and the SVG rendering updates positions on each simulation tick. Users can drag circles to interact with the graph, and clicking a node triggers the addition of a new main node.

Oct 14, 2021

Loading thumbnail…

Fork of D3 Starter

A minimal D3 starter example demonstrates a basic data join by rendering 15 circles across the screen. The code uses `d3.select` and `d3.range` to generate data, then employs `selectAll`, `data`, `enter`, and `append` to create SVG circles with fixed radii. It runs entirely in the browser with a full-window SVG canvas, set against a plain white background. The example highlights the core enter selection pattern in d3 v7, with the bundled JavaScript file containing the import and logic.

Oct 4, 2021

Loading thumbnail…

Fork of Fork of Sole le witt variant fullfullfull

A pattern of thin vertical and horizontal bars forms a grid across the full screen, with alternating rows and columns interrupted by large d3 symbol shapes. Two SVG masks, one inverted and one not, reveal different symbol sets drawn with d3.symbol and d3.range. The bars are rendered as rectangles positioned via d3 selection joins, while the masks filter which symbol patterns appear in each direction. The visualization uses d3 v6.6.1 with an SVG rendering approach, creating a layered, rhythmic composition from simple geometric elements.

Oct 4, 2021

Loading thumbnail…

Fork of Sole le witt variant fullfull

A striped grid of thin vertical and horizontal lines is drawn across the full window, with overlapping circular masks revealing or hiding portions of the pattern. The visualization uses d3.range to generate line positions and d3.symbol with a square symbol to create the mask shapes. By applying two masks—one inverted and one not—the grid lines appear in a layered, cross-shaped intersection. The rendering is done in SVG, with line spacing determined by the window width.

Oct 4, 2021

Loading thumbnail…

Sole le witt variant full

This example generates two sets of horizontal and vertical bars that overlap to form a grid-like pattern, with a circular mask revealing the intersection of the layers. Horizontal bars are shown only inside the circle, while vertical bars appear only outside it, creating a contrast between the two regions. The visualization is rendered in SVG using D3 v6, with `range`, `select`, and `append` to construct the bars and masks, and relies on D3’s `mask` elements to define the visible areas. No external data is used; the composition is purely procedural.

Oct 3, 2021

Loading thumbnail…

Sole le witt variant - D3

This work overlays two sets of horizontal and vertical bars, each with the same SVG mask, to create a circular window that reveals the bar pattern inside a defined radius. The code uses D3 version 6.6.1, specifically the `select`, `range`, and `join` APIs, to append SVG rectangles and define two masks with a circle. The visualization is rendered in SVG, with the bars drawn across the full width or height, and the masks configured to hide or show content within the circle.

Oct 3, 2021

Loading thumbnail…

Sole le witt variant

A geometric SVG composition forms a circular pattern of intersecting horizontal and vertical bars on a black background. The visualization uses two SVG masks — one with a white circle on black and another with a black circle on white — to alternate bar visibility. Horizontal bars, each 10 pixels tall with gaps, appear inside the circle, while vertical bars, 10 pixels wide, appear outside it. The code directly manipulates the DOM via `document.createElementNS` and `setAttribute`, positioning elements based on `window.innerWidth` and `window.innerHeight`.

Oct 3, 2021

Loading thumbnail…

Fork of Exercise 1: SVG Fundamentals

This example displays a full-window SVG visualization of vertical black bars, creating an abstract, striped pattern that fills the viewport. It uses the raw Document Object Model (DOM) API, specifically `document.createElementNS` with the SVG namespace, to dynamically generate rectangles. The code calculates bar size and count based on window dimensions, then appends each `rect` element to the SVG root, which is itself appended to the body. No external libraries are used; the rendering is entirely driven by native JavaScript and SVG.

Oct 3, 2021