interactive svg + canvas plot

100%

interactive svg + canvas plot

✓ Published0🌍 Public

Last edited Sep 3, 2018

Created on May 20, 2017

An interactive plot combines 200 randomly positioned circles, with half rendered as blue SVG elements and half as black canvas shapes. A single d3.layout.force simulation drives collision detection and movement for all nodes, while d3.behavior.zoom enables panning and zooming. The SVG circles update via attribute transforms, and the canvas layer redraws its context on every tick.

AI-generated description

A D3 demonstration of SVG and Canvas intermingling. Blue circles are plotted in SVG, black circles in canvas. One force to rule them all. The plot is zoomable and pannable.

Inspired by M. Bostock's Canvas / SVG zoom comparison series and collision detection examples [1] [2] .

forked from <a href='http://bl.ocks.org/sxv/'>sxv</a>'s block: <a href='http://bl.ocks.org/sxv/4485778'>Interactive SVG + Canvas Plot</a>

mit Licensed

Similar vizzes

Loading thumbnail…

interactive svg + canvas plot

This interactive plot demonstrates the combination of SVG and Canvas rendering in a single D3 visualization, with blue circles drawn as SVG nodes and black circles drawn on a Canvas layer. A shared force-directed layout, created using `d3.layout.force`, moves all 200 nodes together, with collision detection handled through a quadtree (`d3.geom.quadtree`) to prevent overlap. The visualization supports pan and zoom via `d3.behavior.zoom`, which scales the linear projective x and y mappings and triggers a redraw of both the SVG and Canvas layers.

MMbrownshoes

92% match

Loading thumbnail…

Testing interactive svg + canvas plot

Circles colored in five shades bounce across a 1050×1500 canvas, colliding and repelling while remaining within invisible boundaries. The visualization mixes two rendering systems: hundreds of smaller background molecules draw to a Canvas element, while twenty larger, interactive particles render as SVG circles. Both sets move through a shared quadtree-based collision detection routine in `map.updatePositions`, which adjusts positions and enforces edge bounds. A `d3.timer` loop continuously updates particle coordinates and redraws both the Canvas buffer and the SVG group, whose circles use `transform` attributes for translation.

KKristinHenry

84% match

Loading thumbnail…

Collision Detection

Interactive collision detection shows 200 colored circles moving inside a rectangular SVG viewport. Moving the mouse repels the circles, pushing them apart and causing them to collide and bounce off one another. The visualization uses D3 v3’s force layout and quadtree-based collision handling via `d3.layout.force` and `d3.geom.quadtree`, with mouse movement updating a fixed root node to drive repulsion. Rendering is done with SVG circle elements, and the force simulation updates their positions on each tick.

Mmbostock

78% match

Loading thumbnail…

Collision Detection

A force-directed layout places 200 circles on an SVG canvas, with a fixed invisible root node at the center of a charge-based repulsion field. Mouse movement repositions this root, causing the surrounding circles to scatter and collide. Using the d3.layout.force simulation, a quadtree indexes nodes for efficient pairwise collision resolution, adjusting circle positions on each tick. The circles, whose radii vary randomly, are colored via d3.scale.category10 and loaded from an external CSV file, while the root’s position tracks the cursor to repel the swarm.

JJdlv00

77% match

Loading thumbnail…

can't we all get along?

Three groups of 300 force-directed nodes are drawn with different web technologies—black circles on an HTML5 Canvas, blue circles in SVG, and red circles as absolutely-positioned divs. The example uses d3.v3’s `d3.layout.force` for simulated collision and mouse movement interaction, plus `d3.behavior.zoom` for pan and zoom on the shared coordinate scales. It demonstrates how Canvas, SVG, and DOM elements can be updated together in a single `tick` handler via `map.redraw`, showcasing interoperability among rendering approaches.

FFrissAnalytics

76% match

Loading thumbnail…

part 1, Zoom and Panning with D3.js and canvas,

This example shows a canvas-based scatter plot of 10,000 random data points, with the page built for future brushing interactions. It uses D3.js v4 to create SVG axes and labels, while rendering the points themselves on a separate HTML5 canvas element for performance. The code initializes linear scales for both x and y dimensions, draws the axes with `d3.axisBottom` and `d3.axisLeft`, and plots each point using the Canvas API’s `arc` and `fill` methods. The canvas is positioned over the SVG using CSS classes, demonstrating a hybrid rendering approach.

FFrissAnalytics

76% match

Loading thumbnail…

Interactive mouse

This example shows a force-directed layout of 200 colored circles, where one invisible fixed root node is dragged by the mouse, causing the surrounding circles to collide and repulse around it. As the mouse moves, the root node's position updates, and the simulation resumes, with a quadtree-based collision detection preventing overlaps between the circles. The visualization uses the D3 v3 force layout, `d3.geom.quadtree` for collision handling, and SVG circles, with colors assigned via `d3.scale.category10`.

Mmkt-ds

76% match

Loading thumbnail…

svg & canvas & brush

This example overlays a canvas-rendered scatterplot of 1,000 randomly generated points with an SVG layer containing axes and a d3.brush selection rectangle. The canvas continuously redraws each frame using `requestAnimationFrame`, highlighting points under the mouse cursor via `ctx.isPointInPath` and filling those inside the brush area. The SVG brush, configured with `d3.brush()`, updates the selection bounds, demonstrating a hybrid approach that combines canvas performance with SVG’s interactive brush capabilities.

11Cr18Ni9

76% match