interactive svg + canvas plot

100%

interactive svg + canvas plot

✓ Published0🌍 Public

Last edited Nov 1, 2017

Created on Nov 1, 2017

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.

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

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.

FFrissAnalytics

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

81% 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

78% 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…

Force Layout with Canvas

This example shows a force-directed graph rendered on a canvas element instead of in SVG, using d3.layout.force to compute the layout and the Canvas 2D API’s `getContext` and `arc` for drawing. The graph loads node and link data from a local `graph.json` file, with nodes drawn as steelblue circles and links as gray lines. The simulation runs continuously, updating the canvas on each tick event by clearing the frame and redrawing the nodes and links. Unlike the SVG version, nodes are not draggable, but the canvas approach offers modest performance improvements.

Mmbostock

78% 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

78% match

Loading thumbnail…

Gist 7f84369bd0c0b467d6b0

This visualization uses a force-directed graph layout implemented with D3’s `d3.forceSimulation` to position nodes connected by links, representing a network of relationships from an underlying dataset. The scene renders on an HTML5 Canvas, with the simulation’s tick events redrawing the nodes as colored circles and the edges as lines. A zoom interaction is added via `d3.zoom`, applying a transform to the canvas context to allow panning and scaling of the graph. The example demonstrates a typical static network diagram without additional interactivity beyond zoom and drag, relying on the force simulation to settle the layout.

MMbrownshoes

77% match

Loading thumbnail…

Collision Detection (Canvas)

This example demonstrates a force-directed layout with collision detection among 200 nodes. A fixed root node acts as a repulsive force, while the user can move it by mousing over the canvas, causing nearby nodes to repel away. The visualization uses the d3.layout.force simulation library, with a d3.geom.quadtree for efficient spatial collision checks. Rendering is done on an HTML5 Canvas via the getContext("2d") API, drawing all nodes as steelblue circles on each tick. The code is adapted from a talk on force layouts, showing real-time interaction and physics-based movement.

Mmbostock

77% match