multiple line chart

100%

multiple line chart

✓ Published0🌍 Public

Last edited Nov 23, 2017

Created on Nov 23, 2017

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.

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>

mit Licensed

Similar vizzes

Loading thumbnail…

multiple line chart

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

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…

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

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

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

81% match

Loading thumbnail…

Multiple line graph in v4

This example displays two time-series lines—one for closing prices and one for opening prices—in a single SVG chart using D3 v4. The chart uses `d3.csv` to load data from a CSV file, `d3.timeParse` to convert dates, and `d3.scaleTime` and `d3.scaleLinear` for the axes. Two `d3.line` generators create the paths, with the second line styled red via `.style("stroke", "red")`. Axis rendering uses `d3.axisBottom` and `d3.axisLeft`.

Dd3noob

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

81% match

Loading thumbnail…

loading multiple stock data from dataset

This example shows monthly stock prices for Microsoft, Amazon, and IBM from a CSV dataset, rendered as three colored lines on a single time-series chart. The code uses d3.nest to group records by symbol, then parses dates with d3.timeParse and computes per-symbol maximums and sums. Paths are drawn with d3.line using a basis curve, with d3.scaleTime and d3.scaleLinear handling axes. A color legend labels each stock, and SVG elements are used throughout for rendering.

EEssohanamKouyou

80% match