Document

100%

✓ Published0🌍 Public

Last edited Jun 18, 2019

Created on Jun 18, 2019

This example shows multiple randomly generated time-series line charts, each with a y-axis label and colored lines. Users can brush to zoom into a time range and drag to pan across the data, with a clip path preventing overflow. The visualization is built with D3 v4, using `d3.brush`, `d3.drag`, `d3.scaleTime`, and `d3.voronoi` for hover interactions, rendered as SVG with animated updates.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/Nympheo/'>Nympheo</a>'s block: <a href='http://bl.ocks.org/Nympheo/65db03c2d8f0b8aea962f95b1bff6489'>multiple graph +brush +zoom +focus</a>

forked from <a href='http://bl.ocks.org/lorenzopub/'>lorenzopub</a>'s block: <a href='http://bl.ocks.org/lorenzopub/56a5a2833a2102338e857e92180acd5c'>multiple graph +brush +zoom +focus</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Document

This example displays multiple time-series lines generated from random normal data, with each line appearing as a separate colored path with circular points. Users can interact with the chart through brushing to zoom along the x-axis and dragging to pan, while a hidden overlay enables mouse tracking. The visualization is built using d3.v4, employing d3.brush, d3.drag, d3.voronoi for point proximity, and SVG rendering with axis components. The code includes a focus line and circle that follow the mouse position over the chart area.

TThanaporn-sk

92% match

Loading thumbnail…

Document

This example displays multiple time series lines generated with `d3.randomNormal`, each rendered as colored paths with white circles marking individual data points. It includes interactive brushing to zoom and pan across the chart. The visualization uses D3 v4 with `d3.brush`, `d3.drag`, and a Voronoi overlay for potential mouse interactions, while axes are built with `d3.axisBottom` and `d3.axisLeft`. Rendering is done through SVG elements with a clip path to confine the plotted area.

NNympheo

89% match

Loading thumbnail…

Document

The visualization generates a random sequence of twenty charts, cycling through line charts, pie charts, and bar charts. Each line chart displays four smoothed monotone curves with colored dots, while the pie chart and bar chart render categorical and time-based data. Built with D3 v4, the code uses `d3.line`, `d3.arc`, and `d3.axisBottom`/`d3.axisLeft` to produce SVG output. Data is procedurally generated using `d3.randomUniform` and `d3.range`, with each chart styled via inline attributes and CSS classes.

DDabbar

81% match

Loading thumbnail…

MultiSeries Line Chart

This example shows a multiseries line chart tracking two series of random weekly values over a one-year period, with a focus on interactive exploration. It includes a main time-series chart and a smaller brushing context view below it for zooming and panning. The visualization uses D3.js v3 with SVG rendering, leveraging `d3.svg.line`, `d3.svg.axis`, `d3.time.scale`, and `d3.svg.brush`. Data is generated randomly in the browser and rendered with animation support. The chart also includes a legend and mouse-tracker for hovering, though the code does not implement the hover interaction beyond the tracker rectangle.

663anp3ca

77% match

Loading thumbnail…

The Brush

A line chart displays randomly generated data points, with a transparent red brush overlay that highlights a selected data point and its corresponding value label. Dragging the brush across the chart triggers the highlighting, which animates smoothly. Built with D3 v3, the visualization uses SVG rendering, `d3.svg.brush()` for selection, and `d3.svg.axis()` for gridlines and ticks, with all data generated randomly in the browser.

11Cr18Ni9

76% match

Loading thumbnail…

D3 interactive line chart 2

This interactive line chart displays time-series data points as circles connected by a line, with a large value label for the most recent entry. Hovering over a circle turns it red, reveals a tooltip with the exact value, and draws a dashed vertical guide line down to the x-axis. Built with D3 v4, the visualization uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` for the path, and animated `transition` calls on mouseover and mouseout events. The x-axis labels are rendered as text elements, and the data is loaded via `d3.json`.

CCtuauden

75% match

Loading thumbnail…

D3 Brush and Tooltip Complete

This example shows a scatterplot of 49 random data points where users can brush-zoom over the chart and see tooltips with each point’s X and Y values. The chart uses D3 v3 with SVG circles, linear scales, and axes. Brushing is implemented via `d3.svg.brush()` applied to the background, while a custom `d3.helper.tooltip()` creates and moves an HTML tooltip on mouseover and mousemove. Brush events highlight selected points by toggling a CSS class, and a clear button resets the selection.

TThanaporn-sk

75% match

Loading thumbnail…

Line chart scroller II

This interactive line chart visualization displays 100 randomly generated financial time series, each represented by a colored line. Users can navigate by scrolling over the chart to zoom, hovering over the table rows to highlight individual series, or scrolling the table to scroll through the data. The visualization uses the Visvalingam line simplification algorithm to dynamically adjust line detail based on zoom level, with opacity and stroke-width emphasizing the currently selected series. The y-axis rescales based on the visible data, and all interactions are animated via SVG transitions.

AAndresAnayaIsaza

75% match