100%

Lasso in d3 v4 with Canvas

✓ Published0🌍 Public

Last edited Sep 4, 2018

Created on Sep 4, 2018

A lasso tool selects and recolors randomly distributed points rendered on an HTML canvas. Dragging the cursor draws a dashed polygon on an overlaid SVG layer, which closes when the cursor nears its starting point. On completion, `d3.polygonContains` filters points inside the selection, recoloring chosen points black and unselected ones light gray. The visualization uses D3 v4’s drag behavior for interaction, `canvas` for point rendering, and SVG for the lasso path.

AI-generated description

Lasso with d3 v4 and canvas

Example of a lasso technique using data drawn on canvas (or really anywhere) and an SVG interaction layer for drawing the lasso.

Click and drag to select nodes.

Excuse my laziness in the dist files. I coded lasso.js and script.js and then ran buble to compile them for the block.

forked from <a href='http://bl.ocks.org/pbeshai/'>pbeshai</a>'s block: <a href='http://bl.ocks.org/pbeshai/8008075f9ce771ee8be39e8c38907570'>Lasso with d3 v4 and Canvas</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Scatterplot with Lasso

This interactive scatterplot uses the D3 lasso plugin to let users select clusters of points by drawing a freehand lasso around them. The visualization plots the classic Iris dataset with sepal length and sepal width on the axes, colored by species. Once a lasso is drawn, the chart updates dynamically—points inside the selection are highlighted while those outside are dimmed, and summary statistics for the selected points are recalculated in real time. The lasso provides a direct, fluid way to explore grouping and density in the data, with selected points visually emphasized in red and unselected points faded to gray, making the selection state immediately apparent. The example is built with D3 v3 and uses SVG rendering, with the lasso interaction provided by the d3-lasso plugin.

GGerardoFurtado

73% match

Loading thumbnail…

d3.js selection frame example

This example demonstrates interactive rubber-band selection in an SVG canvas using D3.js v3. It shows how users can drag to draw a rectangular selection frame over a set of labeled circles, with the selection rectangle dynamically resizing to accommodate drags in any direction. The code uses D3’s `mousedown`, `mousemove`, and `mouseup` events on the SVG element, appending a `rect` with the `.selection` class and updating its position and dimensions via `d3.mouse`. The circles, defined in a static JavaScript array, highlight on mouseover and clear the selection on release.

JJosephSKh

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

69% match

Loading thumbnail…

Circle Dragging II

This example shows a canvas-based visualization where users can drag any of twenty randomly positioned circles. It uses the d3.drag module with a custom subject function for hit-testing, checking if the pointer falls within a circle’s radius. During a drag, the circle is reordered to the foreground, marked with a temporary stroke, and its position updates, triggering a redraw via render listeners. The implementation relies on D3 v4’s event handling, Canvas’s 2D context, and d3.scaleOrdinal with the schemeCategory20 palette for circle fill colors, producing smooth, interactive feedback.

Mmbostock

69% match

Loading thumbnail…

Point-in-polygon

This example demonstrates the point-in-polygon algorithm by letting users draw a polygon directly on an SVG canvas while 1000 randomly placed dots update in real time. Dots that fall inside the drawn shape turn red, while those outside remain steel blue. The implementation uses D3 v3’s `d3.behavior.drag` to capture mouse coordinates and a ray-casting algorithm to test each point against the polygon’s vertices. A clear link resets the visualization by removing the drawn path and deselecting all dots.

JJustinGOSSES

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

68% match

Loading thumbnail…

Drag circles

Five colored circles are positioned in a row on an 800×480 SVG canvas, each with a radius of 60 pixels. The example demonstrates a basic drag-and-drop interaction using D3.js v4, where users can move any circle freely by clicking and dragging it. The circles change cursor to a move icon on hover and gain a black outline while being dragged. The code uses `d3.drag()` with `dragstarted`, `dragged`, and `dragended` handlers, along with `d3.scaleOrdinal` and `d3.schemeCategory20` for coloring, and `d3.select(this).raise()` to bring the active circle to the front.

EEfratVil

68% match

Loading thumbnail…

Free Hand Line D3 v4

This example demonstrates freehand line drawing in an SVG canvas. The visualization begins with a pre-generated curve and prompts the user to drag the mouse anywhere to create additional paths. It uses D3 v4's drag behavior and line generator with a basis curve to smoothly interpolate the points collected during the drag. The rendered path is styled as a tomato-colored dashed stroke, and the code creates the SVG container dynamically on the page.

CChandrakantThakkarDigiCorp

68% match