Viz - Point - Brushend

100%

Viz - Point - Brushend

✓ Published0🌍 Public

Last edited Jan 20, 2018

Created on Jan 20, 2018

This example demonstrates a scatterplot of 1,000 randomly generated points, rendered as SVG circles. Users can drag a rectangular brush over the plot to select points, which then turn blue and gain black outlines. The visualization uses the `viz.point()` charting API to generate the plot, while a `d3.brush()` instance handles the selection interaction. On brush end, `point.filterRect()` identifies points within the selection rectangle and updates their CSS class accordingly.

AI-generated description

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Viz - Point - Brush

This example shows a scatterplot of 1,000 random points, where users can drag a rectangular brush to select points and highlight them in blue. It uses the viz.js `viz.point()` function to render the SVG circles and `d3.brush()` to handle the brushing interaction. On brushing, the code calls `point.filterRect()` to identify which points fall within the selection and applies a CSS class to style selected circles with a blue fill and black stroke.

NNPashaP

95% match

Loading thumbnail…

Viz - Point - drawPoints

This example renders 200 randomly generated data points as circles on an SVG canvas. Each point is colored either steelblue or red based on the parity of its key value, with a semi-transparent fill and matching stroke. The visualization is built using the `viz.point()` API, which is configured with a custom `drawPoints` function that appends circle elements to the SVG group. The code relies on D3 v4's `d3.range` and `d3.select` for data generation and DOM selection, while the rendering itself uses standard SVG `circle` elements positioned by the x and y coordinates provided by the point layout system.

NNPashaP

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

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

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

81% match

Loading thumbnail…

Viz - Point - Default

This example displays a basic scatterplot of 20 random points, each represented by a steelblue circle without an outline. The visualization is generated by calling `viz.point()` on a selected SVG group element, with data supplied by a custom `randomData()` function that maps each index to a random value. The chart renders as an SVG using D3 v4 and the Viz.js library, where the point layer’s styling is defined via CSS targeting the `.point circle` selector. The code demonstrates a minimal setup for creating a point chart with dynamic, arbitrary data.

NNPashaP

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

78% match