Department of Water Resources - Working

Fork of Fork of HydrographV2.3 Tooltips/Brush Working with dots and line

This interactive dashboard displays a multi-chart hydrograph visualization tracking federal funding, revenue, and crude oil production data through a combination of line charts and grouped bar charts. The visualization uses React with D3.js (v7) to render SVG elements with animated transitions, showing both actual and projected values across time series data. Notable features include multi-axis line charts displaying three different metrics simultaneously, bar charts comparing historical revenue against projections, and tooltip and brush functionality for interactive data exploration. The implementation leverages D3's scaleLinear, scalePoint, scaleBand, and transition APIs to coordinate the animated rendering across five coordinated chart panels.

Nnicolekevans

74% match

Fork of Fork of HydrographV2.3 Tooltips/Brush Working with dots and line

Five small multiples show government budget revenue and projections across several multi-year periods. Two line charts plot actual versus projected revenue, two three-axis line charts compare fiscal year metrics, and one grouped bar chart displays funding categories. All render as SVG with D3 v7 transitions, using scales like `scaleLinear`, `scalePoint`, and `scaleBand`, with axes customized via `axisRight` and `axisBottom`. Data comes from CSV files loaded with `d3.csv`.

Nnicolekevans

70% match

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.

68% match

Line Chart

This line chart displays California government expenditure from 1992 to 2019, with the year on the x-axis and expenditure in units of approximately $10 million on the y-axis. The visualization uses D3 v7 to load CSV data from a GitHub gist and renders an orange line via the `d3.line()` generator within an SVG. Axes are drawn using `d3.axisBottom()` and `d3.axisLeft()`, with linear scales (`d3.scaleLinear()`) mapping data to pixel coordinates. The chart includes a title and axis labels, all positioned manually within the SVG canvas.

PPranay Matalia

67% 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.

Customized Line Chart

This line chart displays federal budgetary resources over time, with dropdown filters for agency and account name and checkboxes to toggle comparison lines from related accounts. The SVG visualization renders a natural curve path and individual data points using D3 scales and the `line().curve(curveNatural)` generator, while React manages the interactive state. A CSV dataset is loaded via `d3.csv` and processed with `d3.rollup` to aggregate quarterly sums. Axes are custom-built with D3 time and linear scales, and tooltips appear via SVG `<title>` elements.

Ppsabela

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.

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.