Making Component

Making Component SC

This example visualizes monthly water level measurements for two wells, with each series distinguished by color in a multi-line chart. A brushable mini-map below the main chart allows users to select a date range, and the brushed region is logged to the console. The visualization is built with D3 v5, using `d3.line`, `d3.scaleTime`, `d3.scaleLinear`, `d3.brushX`, and `d3.nest` to structure the data by well. SVG rendering includes both focus and context panels, with circles marking individual data points and clipped paths ensuring lines stay within bounds.

88% match

Hello VizHub

This example visualizes monthly water levels for two wells, using color-coded lines and a brushed focus–context chart to explore trends over time. The main panel displays the full time series, while a smaller context panel allows brushing to zoom into specific date ranges on the focus view. Built with D3 v5, the code uses `d3.line`, `d3.nest`, `d3.scaleTime`, `d3.brushX`, and `d3.csv` to load and process the data. SVG rendering and `clipPath` are employed for the interactive zoom, with `line.defined` filtering out unwanted data points.

CCurran Kelleher

83% match

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.

79% match

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

Hello VizHub

This interactive visualization displays monthly water level measurements for two wells (OW2DWL and OW2DSWL) over time. The chart uses a dual-panel layout with a detailed focus plot above and a brushable context view below for zooming and panning through the time series. The visualization is built with D3 v5 and renders as SVG, using `d3.brushX` for interactive selection and `d3.nest` to group data by well. The data is loaded from a remote CSV via `d3.csv`, with D3's `scaleTime` and `scaleLinear` handling the date and value axes.

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

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

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.