Linked Brushing between two charts

100%

Linked Brushing between two charts

✓ Published0🌍 Public

Last edited Jan 9, 2019

Created on Jan 9, 2019

This example demonstrates linked brushing between a bar chart and a scatter plot, both visualizing the same dataset. Hovering over a bar or circle highlights the corresponding country’s marks in both charts in pink, while all other marks remain grey, enabling quick cross-referencing. The bar chart displays column C, while the scatter plot shows columns A and B, with both rendered as SVG elements using D3 v5. The code uses `d3.csv` to load the data, `d3.scaleBand` and `d3.scaleLinear` for axes, and `mouseover`/`mouseout` events to synchronize highlighting across the two charts.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/gherka/'>gherka</a>'s block: <a href='http://bl.ocks.org/gherka/bc9ec7b0178a744fe75ebd7b50153312'>Linked Brushing between two charts</a>

mit Licensed

Similar vizzes

Loading thumbnail…

D3: Linked charts

Two linked bar charts share the same dataset, visualizing grades and a second variable. Each chart uses its own linear scale and axis, while a single ordinal scale positions the bars. Animated transitions and sort buttons let users reorder the bars by ascending or descending values. The example demonstrates how to link two D3.js SVG visualizations built from the same data, enabling interactive comparison.

AAdlopez2016

78% match

Loading thumbnail…

Bar Chart with Brushing

This interactive bar chart demonstrates how brushing can reconcile the trade-off between a zero baseline and emphasizing small differences. The visualization displays two horizontal bars comparing scores across groups, rendered as SVG rectangles using React components. A linked brushing interface, implemented with d3.brushX, allows users to select a region on the top chart, which then dynamically updates the bottom chart’s x-scale domain via d3.scaleLinear. The data originates from a CSV file loaded with d3.csv, and React’s useState hook manages the brush extent state for responsive zooming.

WWaseem Medhat

76% match

Loading thumbnail…

Linked Scatter Plot and Bar Chart

This linked-view visualization pairs a scatter plot with a bar chart using the Fisher Iris dataset. Brushing a region in the scatter plot selects data points, which are then aggregated and displayed as bars in the adjacent chart, showing the average of a chosen attribute for the selected species. Built with D3.js and the model.js reactive framework, the example uses SVG rendering and a gist-hosted codebase. The bar chart updates dynamically based on user selection.

CCurran Kelleher

75% match

Loading thumbnail…

Linking scatter plots and bar charts

The chart links a scatter plot of exam scores with a bar chart, using animated transitions to filter and highlight data by category. The bar chart displays the distribution of math scores binned into histograms, colored by ethnicity. Clicking a bar filters the scatter plot to show only the corresponding data points, while the bar chart also supports linked selections between the two views. The visualization uses SVG and D3 v5, with data loaded from a CSV file.

AAlexDaGr8

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

74% match

Loading thumbnail…

Multiple Instances with Chart Brushing

Two linked line charts depict monthly water levels for two well measurements, with the lower chart providing a synchronized brushing interface. Dragging a brush across the lower chart dynamically updates the upper chart's x-axis domain to the selected time range, using a time scale inversion to set the new coordinates. The visualization is rendered with SVG, and the interaction is implemented using D3 v5's `brushX`, `scaleTime`, and `setBrushCoords` callback, with data loaded from a CSV file. Both charts use D3's `nest` and `line` generators to draw the series, and categorical colors from `schemeCategory10` distinguish the two data series.

SShane Carey

73% match

Loading thumbnail…

linked-hover

Linked-hover displays two line charts drawn side by side from randomly generated data, each with 100 points. Hovering over a circle in either chart emphasizes the corresponding point in both charts by enlarging it and adding a blue stroke, while also updating the URL hash to reflect the selected index. The visualization uses D3.js v3 for SVG rendering and axes, with lodash helpers for data manipulation. The linked selection is driven by mouseover events and a shared setHover function that applies transitions to all circles, ensuring synchronized highlighting across charts.

11wheel

73% match

Loading thumbnail…

Linked Views

A simple bar chart displays GDP by country from a CSV file, using D3 v6 to bind data to SVG rectangles. Hovering over a bar reveals a tooltip showing the country name, following the cursor's position via mouse events. The chart uses scaleBand and scaleLinear for x and y axes, with a fixed width and height. Clicking or interacting with bars updates the tooltip dynamically, demonstrating linked views between data and visual feedback.

DDasbach.EJ

73% match