loading multiple stock data from dataset

100%

loading multiple stock data from dataset

✓ Published0🌍 Public

Last edited Nov 23, 2017

Created on Nov 23, 2017

This example displays multiple stock price time series from a CSV dataset, with one line per company symbol (MSFT, AMZN, IBM) plotted over time. A legend identifies each series by color. The visualization uses D3 v4 with SVG rendering, loading data via `d3.text` and `d3.dsvFormat`, nesting records by symbol with `d3.nest`, and drawing paths with `d3.line` and `curveBasis`. Axes are generated using `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/57eb273e01761b829aaa95b28c8193c1'>loading multiple stock data from dataset</a>

forked from <a href='http://bl.ocks.org/Kylaste/'>Kylaste</a>'s block: <a href='http://bl.ocks.org/Kylaste/476ce79ab595cb3ea1f75a6fa2327fbb'>loading multiple stock data from dataset</a>

mit Licensed

Similar vizzes

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

90% match

Loading thumbnail…

loading multiple stock data from dataset

This example demonstrates how to load and visualize multiple stock price datasets from a CSV file, cycling through three different chart types: separate area charts for each symbol, a stacked area chart, and a streamgraph. The code uses D3 v4's `d3.text`, `d3.dsvFormat`, `d3.nest`, and `d3.stack` to parse, group, and structure the data, while `d3.scaleTime`, `d3.scaleLinear`, and `d3.area` handle the rendering as animated SVG paths. The visualization transitions automatically every 1.5 seconds, showing the shifting representation of the same monthly price data for MSFT, AMZN, IBM, and AAPL.

AAubret

89% match

Loading thumbnail…

loading multiple stock data from dataset

The visualization displays monthly stock prices for Microsoft, Amazon, and IBM from January 2000 through March 2010, with each company represented by a distinct colored line. A steel-blue area chart overlays the entire dataset, showing the combined price distribution across all symbols. The code loads the comma-separated dataset using `d3.dsvFormat`, nests entries by symbol with `d3.nest`, and applies a basis curve smoothing via `d3.line().curve(d3.curveBasis)`. Time and linear scales position the data, while `d3.axisBottom` and `d3.axisLeft` render the axes. A legend identifies each stock symbol using the ordinal color scheme from `d3.schemeCategory10`.

LLRobergeon

88% match

Loading thumbnail…

loading multiple stock data from dataset

A multi-line chart displays the monthly closing prices of three technology stocks (MSFT, AMZN, IBM) from January 2000 through March 2010, sourced from a local CSV file. The visualization distinguishes each stock with a distinct color via `d3.scaleOrdinal` and `d3.schemeCategory10`. The chart is rendered as an SVG canvas using D3 v4, with price data nested by symbol via `d3.nest`, dates parsed with `d3.timeParse`, and paths drawn using `d3.line` and `d3.curveBasis`. Axes, including a bottom x-axis and a left y-axis with 20 ticks, are generated using `d3.axisBottom` and `d3.axisLeft`. A legend maps each color to its stock symbol.

LLRobergeon

87% 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 3 with v5: Legend

This example shows a multi-line chart tracking monthly stock prices for three companies (MSFT, AMZN, IBM) from 2000 to 2010, with a color-coded legend placed below the x-axis. Using D3 v5, it nests the CSV data by symbol, draws each series as an SVG path, and assigns colors via `d3.scaleOrdinal` with `d3.schemeCategory10`. The legend labels are dynamically positioned and colored to match each line, and axes are generated with `d3.axisBottom` and `d3.axisLeft`.

Dd3noob

82% match

Loading thumbnail…

Multi-line graph 3: Legend

Three stock price time series are plotted as separate colored lines, with a legend beneath the x-axis identifying each series by its symbol (MSFT, AMZN, IBM). The SVG chart is built with D3.js, using `d3.nest` to group monthly CSV data by symbol and a categorical color scale to assign line and legend colors. Axes are generated with `d3.svg.axis`, and data spans January 2000 through March 2010.

Dd3noob

81% match

Loading thumbnail…

Multiple lines

This visualization displays the monthly stock prices of Microsoft, Amazon, and IBM from 2000 to 2010 as multiple colored lines on a single chart. The chart uses a time-scaled x-axis and a linear y-axis for price, with each company’s line labeled directly. Built with D3 v4, the code loads data from a CSV, nests it by stock symbol, and renders using SVG paths. It also includes commented-out attempts at streamgraphs and area charts.

CCharlesGaydon

81% match