Fork of Trend line with legend

100%

Fork of Trend line with legend

✓ Published0🌍 Public

Last edited Nov 18, 2022

Created on Nov 18, 2022

This example shows two synchronized line charts of water level measurements over time, with a brushable overview chart below that filters the main chart’s visible date range. The main chart displays orange and blue series for two wells, alongside a dashed gray regression trendline computed via least squares and a text label with its equation. A color legend identifies the series. The charts use D3 v5’s `scaleTime`, `scaleLinear`, `line`, `brushX`, and `nest` to render SVG paths, while brushing calls `setBrushCoords` to update the trendline and domain.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Trend line with legend

This example displays two time-series line charts of water level data from wells OW2DWL and OW2DSWL, with an orange and blue color legend. The lower chart supports brush-based selection, which filters the upper chart’s time range and overlays a dashed grey trend line computed via least-squares regression. The visualization uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `scaleOrdinal`, `line`, `nest`, `brushX`, and `axisBottom`, rendering to SVG.

SShane Carey

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

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

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

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

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

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

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