Making Component SC

100%

Making Component SC

✓ Published0🌍 Public

Last edited Apr 16, 2019

Created on Apr 16, 2019

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.

AI-generated description

MIT Licensed

Similar vizzes

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

88% match

Loading thumbnail…

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

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

79% match

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

79% match

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

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

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

78% match

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

77% match