jamesbeckett35

@jamesbeckett35·3 public vizzes

Fork of Organization Graph Diagram

This visualization shows the network of connections between the Kenneth Rainin Foundation and its grantees, including organizations like the Arts Web, Social Impact Commons, and AmbitioUS. The graph depicts main nodes, child nodes, and leaf nodes as colored circles, with links representing organizational relationships. It uses D3’s force simulation (`d3.forceSimulation`, `forceManyBody`, `forceLink`, `forceCenter`) to position elements, with node sizes varying by hierarchy level and colors generated from a predefined palette in `colors.js`. Users can drag nodes to interact with the layout.

Jul 27, 2022

Loading thumbnail…

Fork of D3 Selection Exploration

This example demonstrates dynamic data binding and update patterns with D3.js, showing how animated visualizations respond to changing datasets. The code generates synthetic sine-wave data points with varying positions and radii, then renders them as SVG circles using D3's `selectAll().data().join()` pattern. The visualization runs at 60 frames per second, continuously updating circle positions based on time-based trigonometric functions. The implementation uses D3 v6.6.2's selection API, `range()` for data generation, and `scaleLinear()` to handle numeric transformations.

Jul 26, 2022

Loading thumbnail…

Fork of SVG Fundamentals

This example demonstrates a single large circle rendered on an SVG canvas, serving as a basic introduction to SVG shapes. The HTML document contains an inline `<svg>` element with a width of 960 and height of 500, drawing a circle with a center at (300, 50) and a radius of 500. The code uses no external libraries, relying solely on the native SVG API for rendering. A linked YouTube video provides additional instructional context, while the README file describes the demonstration as a showcase of fundamental SVG shape creation.

Jul 26, 2022