Seismograph

100%

✓ Published1🌍 Public

Last edited May 12, 2021

Created on May 10, 2021

A real-time scrolling line chart animates a single data series, PCL, from a CSV file with time-stamped network metrics. The visualization shifts a line drawing across the viewport as new data arrives, using `d3.interval` to append path segments that translate horizontally and then remove themselves. The SVG rendering relies on `d3.line` with `curveBasis` smoothing, paired with `scaleTime` and `scaleLinear` for axes, all built with D3 v5. The data is parsed with `d3.csv`.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Seismograph

A live seismograph-style chart streams time-series data from CSV, showing PCL, Partner, and GOLAN metrics plotted against time. The visualization continuously animates incoming data points, with the x-axis scaling time intervals as new slices are appended and old segments scroll off screen. Built with d3.csv for parsing, d3.line with curveBasis for smooth paths, and d3.interval to drive periodic updates. Each transition uses d3.transition with easeLinear to shift the line across the clipped SVG viewport, creating a real-time monitoring effect.

PPiotr Paszek

88% match

Loading thumbnail…

Seismograph - almost

Four high-speed network lines—Partner, PCL, GOLAN, and DriveU—animate as a scrolling seismograph of throughput values in Mbps, moving leftward over a two-minute window. Built with d3.v6, the SVG paths use `line()` generators, a time-scaled x-axis, and a linear y-axis capped at 16, while a `transition` with `easeLinear` translates the clipped chart continuously. Data are parsed from the CSV and colored via an ordinal scale with `schemeCategory10`.

PPiotr Paszek

85% match

Loading thumbnail…

Seismograph

This visualization displays network throughput data for four providers—Partner, PCL, GOLAN, and DriveU—as overlapping time-series lines with a seismograph aesthetic. The chart uses d3.scaleTime for the time axis and d3.scaleOrdinal with a categorical color scale to distinguish each provider. The data is sourced from a CSV file and processed into numeric values before being plotted. The implementation leverages d3.line with curveBasis, SVG rendering, and custom axes with tick formatting, along with a colorLegend module for the categorical mapping.

PPiotr Paszek

79% match

Loading thumbnail…

Seismograph Simple

This chart displays network throughput in megabits per second across four entities—Partner, PCL, GOLAN, and DriveU—over a short time period. Each entity is drawn as a distinct colored line using d3’s `line` generator, with the x-axis representing time via `scaleTime` and the y-axis set to a fixed range of 0 to 16. The data is parsed from a CSV file, and the visualization includes a color legend generated by a custom `colorLegend` function, with axes rendered using `axisLeft` and `axisBottom`. The SVG output is styled with thick, rounded line strokes.

PPiotr Paszek

79% match

Loading thumbnail…

Fork of Fork of Seismograph - almost almost almost

Four live network throughput lines animate leftward across a scrolling time axis, tracing megabits per second for Partner, PCL, GOLAN, and DriveU over a two-minute window. Built with d3.v6, the visualization uses d3.scaleTime, d3.scaleLinear, d3.line with curveBasis, and d3.axisBottom to render SVG paths. A d3.transition with easeLinear shifts the chart horizontally, revealing data parsed from a CSV file.

PPiotr Paszek

78% match

Loading thumbnail…

Fork of Seismograph - almost almost

This visualization presents a seismograph-style line chart displaying network throughput in megabits per second for four server endpoints (Partner, PCL, GOLAN, DriveU) over a two-minute period. Four colored lines, each representing an endpoint, trace the fluctuating data values across the timeline. The visualization uses a scrolling x-axis, which animates through the time series data to simulate a real-time monitoring view. The implementation uses d3.scaleTime, d3.scaleLinear, and a d3.line generator, with the x-axis positioned within a clipped group to enable the scrolling effect. Data comes from a CSV file containing per-second performance metrics.

PPiotr Paszek

77% match

Loading thumbnail…

Seismo - line simple

This line chart visualizes one week of temperature data in San Francisco, sourced from Data Canvas - Sense Your City. The smooth curve is rendered using an SVG path generated by d3.line with a curveBasis interpolation. The code employs d3.scaleTime and d3.scaleLinear for axes, with d3.axisBottom and d3.axisLeft creating gridlines and tick labels. The chart includes a title, axis labels, and data-driven styling via CSS, with margins and responsive sizing computed from the SVG dimensions.

PPiotr Paszek

76% match

Loading thumbnail…

Time based moving graph with no labels

Four time-series data columns—Partner, PCL, GOLAN, and DriveU—scroll horizontally across the SVG canvas, updating continuously. The animated chart uses D3's `scaleTime` for the x-axis and `scaleLinear` for the y-axis, with lines drawn via `line` and `curveBasis` geometry. A `transition` with `easeLinear` animates the sideways movement, clipped by a `clipPath` to reveal new data points. Each line has a distinct color from a `scaleOrdinal` range, and the visualization loads data from a CSV file.

PPiotr Paszek

76% match