Scatterplots with D3 and Quadtrees

100%

Scatterplots with D3 and Quadtrees

✓ Published0🌍 Public

Last edited Sep 13, 2018

Created on Sep 13, 2018

A scatterplot of 50 randomly generated points uses interactive brushing to highlight selected data, listing their labels and recoloring them in tomato. The implementation leverages a quadtree for efficient spatial lookup, and a "Reveal quadtree" button triggers a slowed animation of the quadtree traversal during brushing. Built with D3 v4, the visualization renders in SVG and uses `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, and a custom `d3.quadtree` structure.

AI-generated description

<h3>Demo of Efficient Brushing in Scatterplots with D3 and Quadtrees</h3> <ul> <li> <a href="https://github.com/pbeshai/pbeshai.github.io/blob/master/vis/scatterplot-brushing/scatterplot-brushing.js">Source Code on GitHub</a> </li> <li> <a href="{% post_url 2016-12-03-brushing-in-scatterplots-with-d3-and-quadtrees %}">Blog Post</a> </li> </ul> <p> The brushing in this scatterplot is optimized to use a <a href="https://en.wikipedia.org/wiki/Quadtree">quadtree</a>, reducing the amount of searching needed to find the data points selected by the brush. Click "Reveal the quadtree" to see a slowed down animation of how the quadtree is traversed during brushing. </p>

mit Licensed

Similar vizzes

Loading thumbnail…

Quadtree

A quadtree accelerates two-dimensional point filtering in an interactive scatterplot. The visualization shows 2,500 random points that users select by dragging a rectangular brush. Orange points are scanned by the algorithm but not selected, while red points fall within the brush extent. The code uses d3.quadtree to recursively subdivide space and d3.brush for interaction, rendering SVG circles and cell outlines.

FFrissAnalytics

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

79% match

Loading thumbnail…

Quadtree

This example demonstrates accelerated two-dimensional filtering using d3-quadtree. A quadtree recursively subdivides square cells into four equal-sized subcells, with each leaf containing a single point from a dataset of 2,500 randomly generated coordinates. When a d3.brush selection is dragged, the quadtree’s visit method only scans points in intersecting cells, coloring scanned-but-unselected points orange and selected points red. The SVG rendering shows the quadtree’s subdivision rectangles in gray, highlighting how the algorithm avoids checking points outside the brush extent.

Mmbostock

76% match

Loading thumbnail…

Quadtree Search

This example visualizes a quadtree spatial index by rendering its hierarchical rectangular cells as SVG rectangles. As the mouse moves, it searches the quadtree for the nearest of 2,500 randomly generated points, highlighting the closest point in red. The visualization uses the d3.quadtree API to build and search the index, with d3.select and d3.mouse handling mouse events. The quadtree’s cells are drawn via the visit method, while points are displayed as SVG circles.

FFrissAnalytics

76% match

Loading thumbnail…

Animated Quadtree

This animation demonstrates how a quadtree structure changes as new points are added, displaying each red dot as a point, gray rectangles as leaf nodes, and black lines as internal boundaries. The code uses the `d3_quadtree` JavaScript library with `tree.add`, `tree.visit`, and canvas rendering via `getContext("2d")`. Points are generated using `d3_random.randomNormal` to create a normal distribution centered at the midpoint of the canvas, with each addition triggering a partial redraw to highlight the affected region.

Mmbostock

75% match

Loading thumbnail…

Reusable scatter plot

This reusable scatter plot displays 200 randomly generated data points using D3.js v4, with interactive buttons that trigger animated transitions. The visualization initially renders normally distributed points as semi-transparent blue circles, while the "Change Data" button regenerates the dataset and smoothly transitions the circles to new positions with updated axes. The "Change Color" button toggles the circle fill between blue and red using D3's transition and ease functions. The example demonstrates reusable chart patterns with SVG rendering, including linear scales, axis generators, and data-binding techniques.

EEfratVil

75% match

Loading thumbnail…

POC Animated Scatter Plot with Menus and Brushing

This example shows an animated scatter plot of the Iris dataset with interactive dropdown menus for selecting X and Y dimensions, plus a brushing tool to highlight data points. The visualization re-renders smoothly using `d3.transition` when axes change or data is filtered. The code organizes the scatter plot as a reusable component, with menus built via a custom `d3.dispatch` event system and brushing implemented through `d3.brush`. Points are rendered as SVG circles, with highlighted selections drawn in red.

CCurran Kelleher

75% match

Loading thumbnail…

Scatter plot with zoom

This scatter plot visualizes 300 normally distributed data points and supports interactive zooming through a brushed region. Users can drag to select a rectangular area, which triggers a smooth animated transition that rescales the x and y axes to focus on the selected points. Double-clicking outside the brushed area resets the view to the full dataset. The implementation uses D3 v4’s `d3.brush` for selection handling, `d3.scaleLinear` for coordinate mapping, and `transition.attr` to animate the circles’ positions. The axes are updated via `d3.axisBottom` and `d3.axisLeft`, with a clip path preventing points from spilling outside the plotting area.

EEfratVil

75% match