Hello VizHub

100%

✓ Published0🌍 Public

Last edited Apr 23, 2019

Created on Apr 15, 2019

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.

AI-generated description

Forked to demonstrate use of line.defined to filter unwanted lines.

MIT Licensed

Similar vizzes

Loading thumbnail…

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.

SShane Carey

90% match

Loading thumbnail…

Making Component

This example shows ground-water levels over time, with one color-coded line per well. The main chart displays the full time series, while a smaller context chart below it includes a brushed region that filters the data displayed in the main chart. Built with D3 v5, the visualization uses `d3.line`, `d3.nest`, `d3.brushX`, and `d3.scaleTime` to render the SVG. The data is loaded from a CSV file hosted on VizHub.

SShane Carey

83% match

Loading thumbnail…

Hello VizHub

This example displays two synchronized visualizations of borehole water-depth data: a bar chart and a scatter plot. Both graphs use color to distinguish data points marked as "Old" or "New," and hovering over a bar highlights the corresponding circle in the other chart with a green stroke. Both views are rendered as SVGs using D3 v5. The bar chart creates rectangles with `d3.scaleLinear` for the y-axis and `d3.axisRight` for tick marks, while the scatter plot uses circles with a left-aligned axis. Data is loaded from a CSV file and parsed with `d3.timeParse`.

SShane Carey

82% match

Loading thumbnail…

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.

SShane Carey

81% match

Loading thumbnail…

Hello VizHub

This example shows effective rainfall over time as a scatter plot of rounded rectangles, with a smaller brushed overview chart for zooming. The main chart displays date on the x-axis and rainfall values on the y-axis, while the context chart uses circles and a brushX selection to filter the date range. It loads data from a CSV file and uses d3.scaleTime, d3.scaleLinear, d3.axisBottom, d3.axisLeft, and d3.brushX to render interactive SVG elements with opacity styling.

SShane Carey

80% 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…

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

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

78% match