Skip to main content
SimilarExport ZIP
100%

Brush, Trendline, Legend, Title, Linechart, Barchart

✓ Published1🌍 Public
LLiuXiangYuan
Last edited May 3, 2019
Created on Apr 28, 2019

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Brush, Trendline, Legend, Title, Linechart, Barchart

This visualization shows groundwater monitoring data from EPA wells at the Bog of the Ring, displaying water level measurements as time-series line charts with a brushable overview panel and a bar chart of effective rainfall. Users can brush a date range in the lower chart to filter the main display, which updates the trendline computed via least squares regression and shows the equation. Built with D3 v5, the example uses scaleLinear, scaleTime, brushX, and axis functions for the SVG rendering. The trendline and regression statistics are calculated using a custom leastSquares function.

SShane Carey
93% 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
92% 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
90% 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
90% match
Loading thumbnail…

Fork of Brush, Trendline, Legend, Title, Linechart, Barchart

This fork of a D3.js example combines a line chart of EPA groundwater monitoring levels with a bar chart of effective rainfall for the Bog of the Ring. A brushed time-series chart filters both views synchronously, and a dashed trendline with its equation updates based on the selected date range. The code uses `d3.brushX`, `d3.scaleTime`, `d3.axisBottom`, and `d3.nest` to build the SVG rendering, with `d3.csv` loading the two datasets. A color legend distinguishes the observation wells and rainfall series.

AAndre J Denais
88% 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
86% 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
86% match
Loading thumbnail…

Fork of Fork of Brush, Trendline, Legend, Linechart, Barchart

Two linked line charts, built with D3 v5, visualize EPA groundwater monitoring data from two observation wells. The main chart displays a trendline calculated with a least-squares regression, while a smaller brush chart allows users to select a date range. The brush selection filters the data and updates the trendline and its equation in the main chart, with a color legend distinguishing the wells.

AAnthony Zornig
83% match