Skip to main content
SimilarExport ZIP
100%

Line chart scroller II

✓ Published0🌍 Public
AAndresAnayaIsaza
Last edited Feb 4, 2017
Created on Feb 4, 2017

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.

AI-generated description

Hehe

  • Scroll or mouse over table to navigate list
  • Scroll or touch over chart to zoom in or out

Revising this one

Using Visvalingam line simplification algorithm, hackily adapted from

forked from <a href='http://bl.ocks.org/tophtucker/'>tophtucker</a>'s block: <a href='http://bl.ocks.org/tophtucker/bfa88584f6855cd2af0fe8bc30a5264a'>Line chart scroller II</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Untitled

A real-time scrolling line chart displays a stream of random data points, with a new value appended each tick and the oldest discarded, creating a smooth sliding window. The visualization uses D3 v3’s `d3.svg.line` with basis interpolation and `d3.scale.linear` to map time and value ranges, while `d3.svg.axis` renders the x- and y-axes. Animated transitions with `transition.attr` and a linear easing shift the plot and axis leftward, with an SVG clipping container to hide edges. React’s `useData` hook loads CSV data, though the main simulation generates its own values.

NNYY
77% match
Loading thumbnail…

scrollytest1

This interactive scrollytelling visualization demonstrates the interplay between scrolling and data-driven graphics, built with D3 v4 and the graph-scroll library. The page uses a fixed-position chart that updates as the user scrolls through sections, with transitions between states driven by scroll position. The visualization leverages d3-dsv to parse tabular data, rendering it as an SVG/WebGL animation. As the user scrolls, the active section triggers changes in the displayed chart, creating a narrative flow. The design uses a clean, minimal aesthetic with the chart fixed on screen while text scrolls, and it supports both fixed and below-fold layouts for responsive storytelling.

335degrees
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
76% match
Loading thumbnail…

line chart

This line chart example presents two datasets: ticket prices by year and Klout scores by day. Clicking color swatches animates the chart between the two data sets, updating both the x- and y-axes, and the line’s gradient stroke. The visualization is built with D3 v4, using SVG rendering and transitions to animate axis rescaling and path redrawing. The code uses `d3.timeParse`, `d3.scaleTime`, `d3.scaleLinear`, `d3.axisBottom`, and `d3.line` for drawing the line.

MMike Z
76% match
Loading thumbnail…

Stylized Line Chart

This interactive visualization demonstrates a minimal line chart rendered as a scatter-like display of a synthetic dataset, with values [1, 200, 111, 222, 333] plotted on a grey 300×300 pixel SVG canvas. A single green rectangle serves as a decorative mark, while the chart uses D3.js v5’s selection and append methods to construct the SVG elements. The styling, defined in CSS, applies Poppins typography and green tones to the data points and paths, though the example focuses on the foundational structure of SVG-based chart rendering rather than complex data encoding.

Ppandafeeder
76% match
Loading thumbnail…

Line chart with information box

A line chart displays 200 randomly generated data points, with each point’s x-position based on its sequential ID and y-position on its value. Hovering over a point triggers an animated transition that highlights the selected point with a larger orange circle and reveals an information box on the right, showing the point’s ID and value. The visualization uses D3 v4 to build the SVG line and circles, while Bootstrap provides layout styling for the chart and info panel. The interaction relies on D3’s `mouseover` event and `transition` methods to update the box’s visibility and text content dynamically.

EEfratVil
75% match
Loading thumbnail…

line_Transition_4

This example shows a real-time updating line chart that scrolls new data points across an SVG canvas as the page is scrolled. The line continuously shifts left as new random values are appended and old ones removed. The implementation uses d3.line and d3.scaleTime for the x-axis, d3.axisBottom for the labels, and transitions tied to the window scroll event, with d3.randomNormal generating the initial data.

深深度碎片
75% match
Loading thumbnail…

Linechart2

This example shows multiple time series as colored lines, with each line representing a distinct category tracked over time on a shared axis. It uses D3 v6 to load a CSV dataset with `d3.csv`, group the data by category with `d3.group`, and render the lines with the `d3.line` generator. The visualization sets up a linear x-axis for years and a y-axis for values, applying a categorical color scale via `d3.scaleOrdinal`. The SVG is appended to a `div` container with explicit margins and dimensions, and axes are drawn using `d3.axisBottom` and `d3.axisLeft`.

Nnicolekevans
75% match