Multiple Instances with Chart Brushing

100%

Multiple Instances with Chart Brushing

✓ Published1🌍 Public

Last edited Apr 23, 2019

Created on Apr 17, 2019

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.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Multiple Instances

Two interactive line charts display monthly water level measurements for two wells, sharing a synchronized brush. The upper chart shows the full dataset, while the lower chart's brush selection filters the time domain of the upper chart via `d3.brushX` and `event.selection`. Both use `d3.line`, `d3.nest`, and `d3.scaleTime` to render multiple colored series per well, with data loaded from a CSV. The `brushChart` function is instantiated twice in `index.js`, demonstrating reusable chart components.

CCurran Kelleher

92% match

Loading thumbnail…

Multiple Instances

Two linked line charts visualize water level readings over time for two well locations. The upper chart displays the full dataset, while the lower chart contains a brushable axis. Dragging the brush updates the upper chart’s x-axis domain to the selected time range, filtering both charts to that interval. The visualization uses d3.csv, d3.scaleTime, d3.scaleLinear, and d3.brushX to manage data loading, scaling, and interactive selection, rendering paths and circles as SVG elements.

Ssleyus

90% match

Loading thumbnail…

Multiple Instances

This example displays water level measurements from two distinct wells as time-series line charts. A main chart shows the full dataset with circles marking individual observations, while a smaller brush chart below enables interactive range selection. The visualization relies on d3.csv for data loading, d3.nest to group measurements by well, and d3.line to generate the series paths. A d3.brushX instance with brush.move initializes the selection, while the `setBrushCoords` callback logs the selected time range coordinates to the console.

SShane Carey

88% match

Loading thumbnail…

Brush, Trendline, Legend, Linechart, Barchart

This example visualizes EPA groundwater monitoring data for two observation wells at the Bog of the Ring using D3 v5 with SVG rendering. A main line chart displays water levels over time with an ordinal color scale and legend, while a smaller brush chart below allows users to select a date range. The brushed region updates the main chart’s x-axis domain and fits a least-squares regression trendline with its equation shown. Data is loaded from CSV files, parsed with d3.timeParse, and the chart uses d3.brushX, d3.line, d3.nest, and d3.scaleTime.

SShane Carey

80% match

Loading thumbnail…

Brush, Trendline, Legend, Title, Linechart, Barchart

This example combines a line chart and bar chart to explore groundwater levels at the Bog of the Ring, comparing two observation wells against effective rainfall. A brushed time-series chart filters the main visualization, updating a least-squares regression trendline and its equation. The main chart renders blue and orange lines for well measurements with a bar chart for rainfall, using d3.brushX, d3.nest, and d3.scaleTime. Data loads from CSV files, with SVG rendering and a categorical color legend.

LLiuXiangYuan

80% match

Loading thumbnail…

Brushing

This example demonstrates brushing on a scatterplot of borehole data, plotting depth against time. Users drag a horizontal brush across the chart to zoom the x-axis into a selected date range, with circles and the axis smoothly transitioning over one second. The visualization uses D3 v4 APIs including `d3.brushX`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.transition` to update the view, while the data is loaded as CSV from an external URL. SVG rendering animates the filtered result.

SShane Carey

79% match

Loading thumbnail…

Brush, Trendline, Legend, Title, Linechart, Barchart

This interactive D3 v5 visualization compares groundwater levels at two EPA monitoring wells against effective rainfall in a swamp marsh, using a main line chart with a linked brush chart and vertical bar histogram. Users brush a time range in the lower chart to filter the main view, which recomputes a dashed trendline via a least-squares regression function and displays its equation. The upper SVG rendering includes dual y-axes, a categorical color legend, and derives data from external CSV files parsed with `d3.timeParse` and plotted with `d3.line`, `d3.brushX`, and `d3.axisBottom`.

LLiuXiangYuan

79% match

Loading thumbnail…

Fork of Brush, Trendline, Legend, Linechart, Barchart

Two time series of EPA groundwater monitoring data display water levels at a deep and shallow observation well. A linked brush chart below the main line chart filters the date range, and the main chart’s x-axis updates accordingly. A dashed trendline with its regression equation appears in the brushed region, while a legend identifies the two colored lines. The visualization uses d3.scaleTime, d3.line, d3.brushX, d3.nest, and a least-squares regression helper to compute the trendline from filtered data.

KKamilPodsiadlo

79% match