loading multiple stock data from dataset

100%

loading multiple stock data from dataset

✓ Published0🌍 Public

Last edited Nov 28, 2017

Created on Nov 28, 2017

This visualization shows monthly stock price trends for Microsoft, Amazon, and IBM from 2000 to 2010, with each company’s data plotted as a distinct colored line and identified in a legend. The code loads a comma-separated dataset, uses `d3.nest()` to group rows by symbol, and applies `d3.timeParse` and `d3.axisBottom`/`d3.axisLeft` for time and price scaling. It renders lines with `d3.line` and `d3.curveBasis`, and computes per-symbol maximum and sum values. The SVG is generated via D3 v4, with data sourced from a local CSV file.

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

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

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

93% match

Loading thumbnail…

loading multiple stock data from dataset

The visualization displays monthly closing prices for multiple technology stocks—Microsoft, Amazon, and IBM—as a set of overlaid line charts, with each stock distinguished by a unique color and identified by a legend. It encodes the data from a CSV file containing symbol, date, and price fields, parsed using `d3.dsvFormat`. The code leverages d3.v4's syntax, including `d3.nest` to group by symbol, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` with `d3.curveBasis` for smooth paths. A color scale via `d3.scaleOrdinal` applies the categorical palette, while axes are rendered with `d3.axisBottom` and `d3.axisLeft`.

RRade-Mathis

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

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

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

89% match

Loading thumbnail…

Tp3_DV_Rendu2

This visualization compares monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010. It displays multiple small multiples, each showing a company’s price trend as a smooth line chart, with the data loaded from a CSV file. Using D3 v3, the code groups data by symbol via `d3.nest`, sorts companies by maximum price, and animates the drawing of each line progressively with a timer. An area fill, rendered via `d3.svg.area`, is added beneath each line, and the axis and scaling are computed dynamically per company.

AAminaSGitHub

88% match