Hello VizHub

100%

✓ Published0🌍 Public

Last edited Sep 17, 2019

Created on Apr 10, 2019

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.

AI-generated description

MIT Licensed

Similar vizzes

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

81% match

Loading thumbnail…

Bar and Line chart

This example combines a bar chart of effective rainfall with a line and circle overlay of water level, both plotted against a shared time axis. The dual y-axes use independent linear scales, while the x-axis uses a time scale. Built with D3 v5, it renders to SVG and supports zooming via `d3.zoom`, which rescales all axes and re-renders bars, circles, and a line path generated with `d3.line`. The data is loaded from two CSV files hosted on VizHub. The chart initially displays the full dataset before user interaction.

SShane Carey

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

80% match

Loading thumbnail…

Rainfall

This visualization shows monthly effective rainfall measurements over time as a histogram of steelblue bars. The chart maps dates on a time-scaled x-axis and rainfall values on a linear y-axis, using D3 v5’s `scaleTime`, `scaleLinear`, and `axisBottom`/`axisRight` APIs. SVG rectangles are bound to data from a CSV dataset, with each bar’s height determined by the `EffectiveRainfall` value. The code loads the external CSV via `d3.csv` and parses dates with `timeParse` before rendering.

SShane Carey

79% match

Loading thumbnail…

Hello VizHub

This example displays a streamgraph that visualizes numerical trends over time for multiple categorical groups, using a silhouette-style offset to show deviations from a central baseline. The chart is rendered as an SVG with D3 v4, where the data is loaded from a remote CSV file. The code uses `d3.csv`, `d3.scaleLinear`, `d3.axisBottom`, `d3.axisLeft`, `d3.scaleOrdinal`, and `d3.stack` with the `stackOffsetSilhouette` method to create the layered area paths via `d3.area`. The page styling comes from an external stylesheet, and the visualization is embedded in a fixed-width SVG canvas.

Ccliffng

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

78% match

Loading thumbnail…

Hello VizHub 3

This example demonstrates a dynamic scatter plot rendered using D3 version 7.8.5, where circles appear one by one with an animated radius expansion. The visualization reads data from a CSV file containing circle positions, sizes, and colors, and uses the D3 `transition` API with `easeLinear` for both slow entrance animations and fast updates. A grid of ten blue squares animates across the top of the canvas, while the circles use `mix-blend-mode: multiply` for overlapping color effects. The SVG is sized to the container’s dimensions and the entire scene animates on a yellow-green background.

CCurran Kelleher

76% match

Loading thumbnail…

Hello VizHub

This bar chart displays monthly quantities from a CSV file hosted on VizHub, rendered as an SVG using D3.js v5. The code loads the data with `d3.csv`, processes the numeric values, and draws the axes with `d3.axisBottom` and `d3.axisLeft`. Bars are created via `d3.scaleBand` and `d3.scaleLinear` mappings, with rotated x-axis labels for readability. The visualization, styled by an external CSS file, appears on a dark background within a framed container.

Mmwisniewski1991

75% match