multiple line chart

100%

multiple line chart

✓ Published0🌍 Public

Last edited Nov 23, 2017

Created on Nov 23, 2017

A multiple line chart visualizes stock price trends over time for several symbols, with each symbol rendered as a separate black curved line. The chart uses a time-based x-axis and a linear y-axis scaled to the maximum price, with symbols labeled in a list beside the plot. Data is loaded from an external CSV file via `d3.text`, then parsed with `d3.dsvFormat` and `d3.timeParse`. Lines are drawn using `d3.line` with `d3.curveBasis`, and the data is grouped by symbol using `d3.nest`. Axes are generated with `d3.axisBottom` and `d3.axisLeft`.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/romsson/'>romsson</a>'s block: <a href='http://bl.ocks.org/romsson/f205420d21ced66810058d4cdf25c6dd'>interactive line chart</a>

forked from <a href='http://bl.ocks.org/EssohanamKouyou/'>EssohanamKouyou</a>'s block: <a href='http://bl.ocks.org/EssohanamKouyou/e335ea87d2d326316dec5bf6d5953eeb'>multiple line chart</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/685c80f4e9a44ed5b83a56a111966a4d'>multiple line chart</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/3b79130a7bb39e5a98d20a877d8792a4'>multiple line chart</a>

mit Licensed

Similar vizzes

Loading thumbnail…

multiple line chart

This example shows multiple time-series lines plotted on the same axes, with each line representing a different stock symbol over several months. The chart displays price trends for various symbols, allowing easy visual comparison of their trajectories. Using D3 v4 with SVG rendering, the code loads external CSV data via `d3.text` and `d3.dsvFormat`, parses dates with `d3.timeParse`, and groups the data by symbol using `d3.nest()`. It then applies `d3.scaleTime` and `d3.scaleLinear` for the x and y axes, and draws each line with `d3.line`, while adding axis labels and a legend via text elements.

EEssohanamKouyou

94% match

Loading thumbnail…

multiple line chart

This multi-line chart visualizes stock data over time, plotting a series of data points connected by lines and displaying corresponding values. Built with D3.js v4, the visualization uses SVG for rendering and includes animated transitions on mouseover—circles change color and trigger a tooltip plus a dashed guide line. The chart employs `d3.scaleTime` for the x-axis, `d3.scaleLinear` for the y-axis, and processes data loaded from a JSON file with `d3.json` and `d3.dsvFormat` parsing.

EElisaDnr

88% match

Loading thumbnail…

explication multi-lignes

A multi-line chart displays monthly stock price trends for Microsoft, Amazon, and IBM, with each company’s series drawn as a smooth, colored path. The visualization uses nested data from a CSV file, parsed with `d3.csvParse` and organized by symbol via `d3.nest`. Time and linear scales map dates and prices, while `d3.line` with `d3.curveBasis` generates the paths in SVG. A legend identifies each series, and axes are rendered using `d3.axisBottom` and `d3.axisLeft`.

KKylaste

80% match

Loading thumbnail…

Multi-line graph 1 with v5: Lines

This example shows monthly stock prices for Microsoft, Amazon, and IBM as separate lines on a shared time axis. It demonstrates how to group data by symbol using `d3.nest` and render each group as a distinct path with the `d3.line` generator. The SVG output includes axes created with `d3.axisBottom` and `d3.axisLeft`, while scales are defined via `d3.scaleTime` and `d3.scaleLinear`. The stock data originates from Mike Bostock’s small multiples example, and the chart uses d3.v5.

Dd3noob

77% match

Loading thumbnail…

Multiple line graph in v4

This example displays two time-series lines, showing "close" and "open" stock prices over a month, with circular markers at each data point. Built with D3 v4, it maps dates on a time scale and values on a linear scale, then appends SVG paths for each line and circles for the observances. The chart uses `d3.timeParse`, `d3.scaleTime`, `d3.scaleLinear`, `d3.line`, `d3.axisBottom`, and `d3.axisLeft`, and loads its comma-separated data from a local CSV file.

GGerardoFurtado

77% match

Loading thumbnail…

Multi-line graph 3 with v4: Legend

This example displays multiple stock price time series in a single SVG line chart, using D3 v4 to plot data for Microsoft, Amazon, and IBM from January 2000 through March 2010. The visualization distinguishes each company’s line with a categorical color from `d3.schemeCategory10` and adds an automatically generated legend, positioning text labels evenly across the chart’s width. The data, loaded from a CSV file, is parsed with `d3.timeParse` and nested by symbol using `d3.nest` to create separate lines. Axes are rendered with `d3.axisBottom` and `d3.axisLeft`, while scales are defined via `d3.scaleTime` and `d3.scaleLinear`.

Dd3noob

77% match

Loading thumbnail…

Multi-line graph 1: Lines

This example shows a multi-line graph comparing the monthly stock prices of Microsoft, Amazon, and IBM from 2000 to 2010. The code uses D3.js v3, specifically the `d3.nest` function to group the CSV data by company symbol, then draws a separate SVG `path` for each group via `d3.svg.line`. Time and linear scales define the axes, with dates parsed using `d3.time.format`. The graph is rendered as SVG with steelblue lines, and the stock data originates from Mike Bostock's small multiples example.

Dd3noob

77% match

Loading thumbnail…

stock

A multi-line chart animates banking stock prices over time, with each series plotted in its own horizontal band and labeled by symbol. The visualization first draws lines progressively using a `d3.timer`, then transitions into horizon charts by stacking filled areas with a `clipPath`. Data is loaded via `d3.csv` from a gist and parsed with `d3.time.format`. The SVG rendering uses `d3.svg.line`, `d3.svg.area`, and `d3.scale.linear` to map dates and prices, with color assigned by `d3.scale.category10`.

SSheela2930

77% match