Yashasvi Koul

@co18361·3 public vizzes

Untitled

This example demonstrates how D3 custom elements can drive a canvas-based drawing surface. As the mouse moves, the code appends `custom:circle` elements to a `custom:sketch` element, each with a red stroke that transitions to white over two seconds while expanding to a radius of 200. A `d3.timer` continuously clears the canvas and redraws all child elements, translating their attributes into Canvas 2D `arc` and `stroke` commands. The sketch uses a custom namespace prefix registered with `d3.ns.prefix` to create these elements.

May 5, 2020

Loading thumbnail…

Untitled

Three semi-transparent circles overlap on a dark SVG canvas, with brown, steelblue, and green fills at 50% opacity. The circles are positioned so their intersections create blended secondary colors, demonstrating basic transparency and layering effects. The visualization uses D3.js v3 to append SVG circle elements directly to the document body, with fixed pixel coordinates for the center points and radii. The rendering is entirely client-side, with no external data source, and the geometric composition is hardcoded in the script.

May 5, 2020

Loading thumbnail…

Untitled

This example shows 100 unlabeled circular nodes clustering into four groups through a force-directed layout. The nodes are pushed in different directions based on their index, creating a visual separation of categories while the simulation runs. The visualization uses the D3.js v3 force layout with custom tick logic to apply directional forces, and renders the nodes as SVG circles with categorical colors from `d3.scale.category10()`. Clicking the background applies random jitter to all nodes and resumes the force simulation, while dragging individual nodes is supported via `force.drag`. A fade-in transition animates the SVG’s opacity on load.

May 5, 2020