D3 Brush and Tooltip Complete

100%

D3 Brush and Tooltip Complete

✓ Published0🌍 Public

Last edited Mar 9, 2017

Created on Mar 9, 2017

This example shows a scatterplot of 49 random data points where users can brush-zoom over the chart and see tooltips with each point’s X and Y values. The chart uses D3 v3 with SVG circles, linear scales, and axes. Brushing is implemented via `d3.svg.brush()` applied to the background, while a custom `d3.helper.tooltip()` creates and moves an HTML tooltip on mouseover and mousemove. Brush events highlight selected points by toggling a CSS class, and a clear button resets the selection.

AI-generated description

Example for Cooperative Brushing and Tooltips in D3.

The completed chart, with both tooltips and brushing working cooperatively. You can start a brush-zoom on either the background or a data point.

forked from <a href='http://bl.ocks.org/wrobstory/'>wrobstory</a>'s block: <a href='http://bl.ocks.org/wrobstory/7612013'>D3 Brush and Tooltip Complete</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Brush Handles d3v4 II

This example demonstrates a brushable scatterplot where 800 random data points are plotted along a linear x-scale and a normally distributed y-axis. Users can drag horizontally to select a range, which highlights the corresponding circles in red while custom brush handles appear as resizable path shapes. Built with D3 v4, it uses `d3.brushX` for the brush interaction, `d3.axisBottom` for the x-axis, and `d3.randomNormal` to generate the y-values. The custom handles are drawn with SVG paths, and the brushing updates both circle classes and handle positions via the brush event handler.

TThanaporn-sk

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

82% match

Loading thumbnail…

Brush for data visualisation

A reusable D3 chart combines a main scatterplot with a brush for subsetting data. The visualization uses JSON input to configure axes, margins, and colors, and displays tooltips on hover. Built with D3 v3, it renders SVG with an optional Canvas-based PNG export, allowing users to download the current view as either format.

11Cr18Ni9

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

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

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

80% match

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

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

80% match