svg & canvas & brush

100%

svg & canvas & brush

✓ Published0🌍 Public

Last edited Nov 1, 2019

Created on Oct 31, 2019

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.

AI-generated description

This demo is utilised with svg and canvas and brush features.

DOM structure: div.box > canvas + svg , div is relative positioned and the graphic elements are absolute and the svg is on the top of canvas.

SVG has some performance issues when nodes quantity reach 10k. d3.brush is a good feature but it is not working on canvas. So I put them together.

mit Licensed

Similar vizzes

Loading thumbnail…

Scatter plot brushing

This example demonstrates interactive brushing on a scatter plot, where users can drag a rectangular selection to highlight points within that region in orange while dimming others remain blue. The visualization uses 300 randomly generated data points from a normal distribution, rendered as SVG circles with axes. The brushing interaction is implemented using d3.brush, with the brushed event updating circle fills based on the selection bounds, while brushended resets the colors with a smooth transition when the brush is cleared. The code uses d3.scaleLinear for positioning and d3.axisBottom/axisLeft for axes.

EEfratVil

81% match

Loading thumbnail…

Brush Transitions

Five thousand random points are drawn in an SVG scatterplot. A draggable brush region highlights points inside it in red, and after the mouse is released, the brush smoothly animates back to its original position from the default extent. The example uses D3’s `d3.svg.brush`, `d3.geom.quadtree` for efficient point selection, and a transition on the brush call to animate the extent, interrupting any ongoing transition if the user interacts again.

FFrissAnalytics

81% match

Loading thumbnail…

Basic brush practice

This example demonstrates interactive brushing on a 400×400 SVG canvas, where a single circle changes color based on whether it falls within the user’s brush selection. The brush updates the circle’s fill to blue when selected and red otherwise, using animated transitions. Built with React and D3 v5, the code leverages `d3.brush`, `d3.select`, and `d3.event.selection` to detect the brushed region and compare its coordinates against the circle’s position. The brush extent is fixed to the full canvas, and the color change triggers on both brush start and end events.

JJunyanL

80% match

Loading thumbnail…

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

This example demonstrates interactive zooming, panning, and brushing of a synthetic scatterplot containing 10,000 random data points, rendered with a hybrid SVG–Canvas approach. The D3.js v4 code overlays an SVG layer for axes and controls on top of a Canvas layer for efficient point drawing, using `d3.zoom` and `d3.brush` to handle transformations and selections. A toolbar offers Reset, Zoom, and Brush modes, where zooming rescales axes via `d3.scaleLinear` and redraws points with `Canvas` arc primitives, while brushing highlights the selected region on the SVG layer.

FFrissAnalytics

80% match

Loading thumbnail…

Untitled

This example demonstrates a basic scatter plot where users can brush-select points to highlight them in red. It uses D3 version 7 to generate 200 random data points and render them as SVG circles. The brushing interaction is handled by `d3.brush()`, which triggers a callback that updates the fill color of selected points. The code uses `d3.select()` and the `.join()` API to efficiently manage the circle elements.

Ttebanieo

80% match

Loading thumbnail…

Click to Select All

A scatterplot displays 800 randomly generated points positioned across a linear x-axis and normally distributed y-values. Clicking and dragging outside the existing selection normally creates a new brush, but this modified behavior selects all points instead. The visualization uses D3 v4’s `d3.brushX` to handle brushing, `d3.scaleLinear` for axes, and SVG circles with red fill and brown stroke for selected items. A transition animates the brush movement when the user activates the select-all interaction.

Mmbostock

79% match

Loading thumbnail…

d3-brush example

A minimal interactive brush demonstration renders a 400 by 400 SVG rectangle, where the user drags to select a rectangular region. The example uses the d3-brush API from D3 version 4 to track selection coordinates, logging the starting and ending positions to the browser console during brushing and reporting the absence of a selection when the brush is cleared. The code defines the brush extent to match the full drawing area and attaches start, brush, and end event handlers.

FFrissAnalytics

79% match

Loading thumbnail…

The Brush

A line chart displays randomly generated data points, with a transparent red brush overlay that highlights a selected data point and its corresponding value label. Dragging the brush across the chart triggers the highlighting, which animates smoothly. Built with D3 v3, the visualization uses SVG rendering, `d3.svg.brush()` for selection, and `d3.svg.axis()` for gridlines and ticks, with all data generated randomly in the browser.

11Cr18Ni9

79% match