Tell us what works and what could be better. We read every submission.
@adamhurst·3 public vizzes
A single SVG canvas displays the text “Test 1” in a 36-pixel monospace font at coordinates (120, 200). The example demonstrates basic D3.js v4 usage by appending an SVG element to the body and adding a text node with explicit positioning and styling. The code relies on the D3 selection and append APIs, with the SVG rendered directly in the browser. No external data is loaded; the visualization is purely a static text label created through D3’s declarative DOM manipulation.
This animated canvas visualization demonstrates Prim’s algorithm for generating a spanning tree on a 900×600 grid. A web worker computes the maze structure using a minimum-heap priority queue, randomly selecting edges to connect cells. The animation then floods the resulting tree from its root, using D3’s Cubehelix color scale to map hue to Manhattan distance from the root. The canvas rendering updates in timed intervals, creating a smooth color wave that reveals the tree’s structure.
A 3D DNA helix animates in an SVG scene, with two intertwined strands of colored circles connected by short lines that rotate and twist over time. The visualization uses D3.js and Underscore.js to generate the helix’s coordinates from sine and cosine functions, updating every 25 milliseconds via `setInterval`. Mouse movement over the canvas adjusts the torsion parameter, changing the helix’s twist interactively. Circle size and opacity encode depth along the z-axis, while line thickness and opacity vary to suggest the spiral’s three-dimensional form.