Hello VizHub

100%

✓ Published2🌍 Public

Last edited Apr 16, 2019

Created on Apr 15, 2019

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

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

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

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

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

77% match