Skip to main content
100%

loading multiple stock data from dataset

✓ Published0🌍 Public
Aalicemontel
Last edited Nov 26, 2017
Created on Nov 26, 2017

This example visualizes monthly stock prices for multiple symbols as separate colored lines on a time-series chart. It loads raw CSV data from a GitHub gist, parses it with d3.dsvFormat, and nests records by symbol using d3.nest. Each line is rendered as an SVG path with d3.line and a basis curve, while d3.scaleTime and d3.scaleLinear map dates and prices to pixel coordinates. The chart includes axes via d3.axisBottom and d3.axisLeft, plus a legend built with SVG rectangles and text.

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>

mit Licensed

Similar vizzes

Loading thumbnail…

loading multiple stock data from dataset

This example displays multiple stock price time series as a set of overlaid line charts. It loads a CSV dataset containing monthly price data for Microsoft, Amazon, and IBM, then nests the data by stock symbol using `d3.nest()` to group the records. The visualization uses a D3 v4 SVG renderer with `d3.scaleTime()` and `d3.scaleLinear()` for the axes, and applies the `d3.curveBasis` interpolation to smooth the lines. The code attempts to color each line with `d3.schemeCategory10` and add a legend, though the active portion only renders the uncolored paths.

SSebDelSab
90% 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
90% match
Loading thumbnail…

loading multiple stock data from dataset (marche)

This example displays monthly stock price trends for multiple companies as a multi-line chart. The visualization loads CSV data containing symbols, dates, and prices, then nests the records by symbol to draw each stock’s price trajectory over time. The code uses d3.nest, d3.line, and d3.curveBasis to render smooth lines, with d3.scaleTime and d3.scaleLinear for axes, and d3.axisBottom/Left for ticks. A legend maps symbols to colors via d3.scaleOrdinal and d3.schemeCategory10, all rendered as SVG elements in D3 v4.

SSebDelSab
89% match
Loading thumbnail…

loading multiple stock data from dataset

This visualization displays the monthly closing stock prices for multiple companies from a local CSV dataset. The line chart plots the price trends over time for each company symbol, allowing for easy comparison of their performance and volatility. The code uses D3 v4 APIs such as `d3.timeParse`, `d3.dsvFormat`, `d3.nest`, `d3.line`, and `d3.axisBottom` to parse, group, and render the data as an SVG path for each symbol, with a color legend for identification.

SStephenMaturrin
89% match
Loading thumbnail…

loading multiple stock data from dataset

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

KKylaste
88% match
Loading thumbnail…

loading multiple stock data from dataset

This example displays monthly stock prices for Microsoft, Amazon, and IBM from January 2000 through March 2010, using a multi-line chart where each company’s price history is drawn as a colored line. The data is loaded from a CSV file containing symbol, date, and price columns, then grouped by symbol using `d3.nest()`. The visualization uses `d3.line()` with a basis curve, `d3.scaleTime()` for the x-axis, and `d3.scaleLinear()` for the y-axis, with an ordinal color scale for the three series. The chart is rendered as an SVG, with axes and a legend prepared via `d3.axisBottom` and `d3.axisLeft`.

NNpfn
88% 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
87% match
Loading thumbnail…

loading multiple stock data from dataset

This example shows monthly stock prices for Microsoft, Amazon, and IBM from a CSV dataset. It draws multi-series line charts in SVG, then transitions each series into a stacked area chart with a smooth animation. The code uses d3.nest to group data by symbol, d3.line and d3.area for geometry, and d3.transition with a delay to sequence the morphing effect. Colors are assigned via d3.scaleOrdinal with d3.schemeCategory10.

NNpfn
86% match