Hello VizHub

100%

✓ Published1🌍 Public

Last edited Apr 23, 2019

Created on Feb 26, 2019

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`.

AI-generated description

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

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

82% match

Loading thumbnail…

Hello VizHub

This bar chart visualizes population data for countries and two additional entries from a CSV file, using an SVG-based rendering approach. The chart employs D3 v5's scaleLinear for the x-axis, scaleBand for the y-axis categories, and axisBottom with a custom tick formatter that converts large numbers into abbreviations like "B" for billions. Bars are appended as SVG rectangles, with margins and axes configured to present the data cleanly. The visualization loads data asynchronously via d3.csv and demonstrates fundamental D3 data-binding and layout patterns.

Sseguritops

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

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

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

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

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

80% match