Multiple Instances

100%

Multiple Instances

✓ Published0🌍 Public

Last edited Nov 8, 2019

Created on Nov 8, 2019

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

90% match

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

90% match

Loading thumbnail…

Line Chart

This line chart shows groundwater monitoring data from two EPA wells at Bog of the Ring, plotting water levels over time with an optional linear regression trendline. The visualization uses a linked-brush interaction, where selecting a date range in the smaller brush chart filters the main chart's time axis. Built with D3 v5, it employs `brushX` for brushing, `scaleTime` and `scaleLinear` for axes, and `nest` to group data by well. Data is loaded from CSV files using D3's `csv` function, and the regression calculation uses `leastSquares` from the custom `Regression` module.

PPatrickhCahill

78% match

Loading thumbnail…

Trend line

This visualization shows monthly water level trends for two well sites, with a brushable chart allowing users to select a date range and view a dashed regression trendline with its equation. The top chart displays the trendline and data points, while the bottom chart provides the brushing interface. The code uses d3.scaleTime, d3.scaleLinear, d3.line, d3.brushX, and d3.nest to render SVG paths and circles. The trendline is calculated via a custom least squares regression function imported from a separate module. Data is loaded from a CSV file.

SShane Carey

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

78% match

Loading thumbnail…

Fork of Brush, Trendline, Legend, Linechart, Barchart

The visualization shows groundwater monitoring data from two observation wells at the Bog of the Ring, plotting water levels over time as a line chart with a brushed time-range selector below. A dashed linear regression trendline appears for the selected period, calculated via the least-squares method in the `Regression.js` module. The implementation uses D3 v5 APIs including `d3.brushX`, `d3.scaleTime`, `d3.scaleLinear`, `d3.nest`, and `d3.line`, rendering to SVG with a categorical color scale to distinguish the two wells. Data is loaded from external CSV files.

AAndre J Denais

78% match

Loading thumbnail…

Trend line with legend

This visualization shows water level trends over time for two monitoring wells (OW2DWL and OW2DSWL) in a line chart with a color legend and a linked brushing chart below. The main chart displays a dashed grey trendline calculated via least squares regression, with an equation label, while the brush chart filters the data range and recomputes the trendline interactively. Built using D3 v5, it applies `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line`, `brushX`, and `axisBottom`/`axisLeft` to render SVG paths and axes. Data is loaded from a CSV file via `csv`, with date parsing through `timeParse` and event-driven brushing updating the trendline and equation.

CCurran Kelleher

77% match