Skip to main content
SimilarExport ZIP
100%

Polybrush Example

✓ Published0🌍 Public
GGerHobbelt
Last edited Sep 7, 2012
Created on Sep 16, 2012

This example presents a custom D3 plugin, `d3.svg.polybrush`, which enables interactive polygon selection on a scatterplot. The visualization uses a Voronoi tessellation of 200 random points, with each cell clipped to a circular region around its vertex. Users click to place anchor points and double-click to close the selection, then drag to reposition the polygon. The `brush` event handler uses the plugin’s `isWithinExtent` method to highlight both the selected points and their corresponding Voronoi cells in red. Built with d3.v2, the code demonstrates custom brush behavior beyond the standard `d3.svg.brush`.

AI-generated description

Here's a d3 plugin that allows you to create a polygon selection. You instantiate it just like d3.svg.brush.

var brush = d3.svg.polybrush();

It has an extra public method that 'brush' does not, and that's 'isWithinExtent(x, y)'. You can use this method to test if a given point falls within the drawn extent.

if (brush.isWithinExtent(x, y)) {
  console.log("I'm inside!");
}

Usage:<br/> Click to add an anchor point, double click to close the selection.<br/> Drag the selection to reposition it.<br/> Double click outside the selection to clear it.<br/>

Areas For Improvement:<br/>

  1. Add anchor handles to allow the repositioning of an anchor point.<br/>
  2. Better viewport edge detection. Right now it simply stops moving if you try to move the selection out of the viewport.

Similar vizzes

Loading thumbnail…

Brushing Circles with D3-Brush

This example demonstrates interactive brushing on a scatterplot of six circles, where dragging a rectangular selection highlights overlapping data points. It shows how a brush can filter or emphasize specific marks in a visualization. The implementation uses D3’s `brush` module, with a `brush` event listener that checks each circle’s coordinates against the selection bounds to update a `highlightedSet` in the state. Circle styling (stroke, opacity) responds to the highlighted set, and the `end` event clears highlights when the brush is dismissed. The rendering uses SVG elements via D3’s `select` and `join` pattern.

CCurran Kelleher
77% match
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
77% match
Loading thumbnail…

Brush I

A brushable scatterplot displays 300 randomly generated points. A horizontal brush initially selects a range, highlighting points within it in red with a brown stroke. The example uses d3.brushX to define the brush and handles the brush event to update the selection state. Clicking re-centers the brush using a fixed width, demonstrating interactive selection on an SVG rendered with d3.scaleLinear and d3.axisBottom.

MMorganhaoyu
77% match
Loading thumbnail…

Brush & Zoom II

This example demonstrates how brushing a scatterplot with d3.brush zooms to the selected region, while double-clicking resets the view. The code generates 900 random points in three gaussian clusters, rendering them as colored circles and using a linear scale to map coordinates. The brush’s `end` event updates the x and y domains, then animates the axes and points via `transition`. A 350ms idle timeout distinguishes a brush clear from a double-click reset.

Mmbostock
76% match
Loading thumbnail…

Brush Handles d3v4 II

This example demonstrates d3-brush with custom resize handles in D3 v4, highlighting the brush selection over a scatterplot of 800 random points. It shows how brushed points become highlighted with a red stroke, while custom path-based handles render on the left and right edges of the selection. The implementation uses d3.brushX, d3.scaleLinear, and d3.axisBottom, with the handle path defined via a custom function resembling the crossfilter approach. The brush’s start and brush events trigger the brushmoved function, which updates point activity and handle positioning based on the current selection.

PPhilippe Rivière
76% match
Loading thumbnail…

Brush Handles

This example shows an 800-point scatterplot with a draggable, visible brush handle range selection. The brush is rendered as two semi-circular handles on either side of the selection extent, which the user can drag to resize the range. The code extends `d3.brushX` with custom `path` elements and uses `d3.arc` to define their shapes. When the brush moves, a `brushmoved` function updates the handle positions and highlights the selected circles by toggling an "active" class, which changes their fill opacity.

FFrissAnalytics
76% 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
76% 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
76% match