Seismograph

100%

Seismograph - almost

✓ Published1🌍 Public

Last edited May 13, 2021

Created on May 13, 2021

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

AI-generated description

This line chart shows one week of temperature (in degrees Celcius) in cities around the world. The data comes from Data Canvas - Sense Your City.

MIT Licensed

Similar vizzes

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

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

89% match

Loading thumbnail…

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

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

87% match

Loading thumbnail…

Seismograph

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

PPiotr Paszek

85% match

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

83% match

Loading thumbnail…

Time based moving graph with no labels shift

Four parallel time-series lines show network bandwidth data for four services—Partner, PCL, GOLAN, and DriveU—over roughly two minutes. The chart animates by smoothly translating the entire plot area, including axes and lines, to the left, creating a moving-window effect while keeping the labels in place. The code uses D3 v6 with `scaleTime`, `scaleLinear`, and `scaleOrdinal` for axes, colors, and legends, plus `line` and `curveBasis` for paths. A `transition` with `easeLinear` drives the animation, and `clipPath` confines the visible region to the viewport.

PPiotr Paszek

82% match

Loading thumbnail…

Time based moving graph

A time-based line chart displays four network performance metrics—Partner, PCL, GOLAN, and DriveU—measured in MBPS over a two-minute period. The visualization animates by smoothly translating the x-axis and line paths leftward, creating the effect of a moving time window. Data is loaded from a CSV file and parsed into JavaScript Date objects. The chart uses D3 v6 scales, axes, line generators with basis curves, ordinal color scales, and clip paths to reveal the moving portion, with a linear transition controlling the animation speed.

PPiotr Paszek

80% match