TP3-p3-4

100%

✓ Published0🌍 Public

Last edited Nov 25, 2017

Created on Nov 25, 2017

This example visualizes stock market data from a CSV file as a stacked area chart, using an ordinal color scheme to distinguish between multiple time series. The chart is centered vertically so that the combined data fills the plot area, with a legend placed to the right. It uses d3.area with a basis curve, d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal, all rendered as SVG paths. The data is first parsed with d3.dsvFormat, nested by symbol with d3.nest, and then processed to compute cumulative sums before plotting.

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/855207ac5fb5c170de59b9c69ea56012'>simple line chart from dataset</a>

forked from <a href='http://bl.ocks.org/Rade-Mathis/'>Rade-Mathis</a>'s block: <a href='http://bl.ocks.org/Rade-Mathis/8bcf33a7ab32cc05916d1c99c08d93bc'>TP3-p1</a>

forked from <a href='http://bl.ocks.org/Rade-Mathis/'>Rade-Mathis</a>'s block: <a href='http://bl.ocks.org/Rade-Mathis/f9f90c3d2e8dd3f38088bed19aee3509'>TP3-p3-1</a>

forked from <a href='http://bl.ocks.org/Rade-Mathis/'>Rade-Mathis</a>'s block: <a href='http://bl.ocks.org/Rade-Mathis/a255a1d04990272c190eeeaae7f5e17b'>TP3-p3-3</a>

wtfpl Licensed

Similar vizzes

Loading thumbnail…

TP3-p3-3

This visualization displays a stacked area chart of stock prices over time, showing how each category contributes cumulatively to the total. It uses a time-scaled x-axis and a linear y-axis with gridlines, and includes a legend positioned at the right side. The code loads CSV data from a remote gist, parses dates, and nests the data by symbol. It computes the sum of other categories for each point to create the stacked effect, then renders the areas using `d3.area` with a basis curve, filling each series with a categorical color from `d3.schemeCategory10`.

RRade-Mathis

92% match

Loading thumbnail…

TP3-p3-2

This visualization displays a multi-series area chart showing stock price trends over time, with each series rendered as a filled area using a categorical color palette. The example uses D3 v4 with the `d3.area()` API, `d3.curveBasis` for smoothing, and `d3.scaleTime` and `d3.scaleLinear` for axes. Data is loaded from an external CSV file via `d3.text`, parsed with `d3.dsvFormat`, and grouped by symbol using `d3.nest()`. A legend showing series names is positioned on the right, with axes rendered using `d3.axisBottom` and `d3.axisLeft`.

RRade-Mathis

90% match

Loading thumbnail…

TP3-p3-1

This visualization displays multiple time-series lines as filled areas, each representing a stock symbol over time, with overlapping semi-transparent regions stacked by date. It uses D3 v4 to fetch CSV data from an external gist, parse dates with `d3.timeParse`, and nest records by symbol. The chart draws smooth areas via `d3.area` with a basis curve, maps dates to an ordinal time scale, and values to a linear scale, including axes and a color-coded legend with opacity. A custom calculation sets each point’s lower price based on the maximum lower value among other symbols.

RRade-Mathis

89% match

Loading thumbnail…

TP3-p3-5-backup

This example visualizes stock price trends for multiple symbols using several area chart variants: a basic filled area, a separated area plot, and stacked and centered area charts. The visualization cycles through these different representations, dynamically re-rendering the SVG with smooth transitions. Built with D3 v4, the code uses `d3.area`, `d3.curveBasis`, `d3.nest`, and time scales to process and plot data from a stocks CSV file. Each series is color-coded, and the animation highlights how different area chart layouts compare.

RRade-Mathis

88% match

Loading thumbnail…

TP3-p1

This chart displays multiple time series as an SVG line chart, with a legend identifying each series. It loads historical stock data from a remote CSV file, parses and nests it by symbol, and renders the lines with distinct colors. The code uses D3 v4 APIs including `d3.timeParse`, `d3.scaleTime`, `d3.scaleLinear`, `d3.line` with `d3.curveBasis`, `d3.axisBottom`, and `d3.axisLeft`, along with `d3.nest()` to group data, and applies a category color scheme via `d3.scaleOrdinal` and `d3.schemeCategory10`.

RRade-Mathis

87% match

Loading thumbnail…

TP3-p3-5

This visualization compares four area-chart layouts for multivariate stock data, showing the same series as stacked, centered, and separated regions to highlight alternative encodings of cumulative change. It loads CSV data via `d3.text` and `d3.dsvFormat`, parses dates with `d3.timeParse`, and uses `d3.nest()` to group by symbol. SVG rendering employs `d3.area()` with `d3.curveBasis` for each variant, while scales and axes come from `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisBottom`. Animated transitions between layouts are driven by D3’s update pattern, though the code excerpts omit the final animation calls.

RRade-Mathis

86% match

Loading thumbnail…

tp3_d3

This example visualizes stock price histories as a sequence of animated line charts, then transforms them into stacked horizon graphs. Using D3.js v3, it loads data from a CSV file containing stock symbols and monthly prices. The code employs `d3.svg.line`, `d3.svg.area`, and `d3.time.scale` to render paths, while `d3.timer` drives the drawing animation. A `clipPath` and ordinal color scale create the horizon chart effect, with `transition` methods smoothly displacing and recoloring the area fills. The SVG output is generated entirely client-side from the external dataset.

MMilowB

84% match

Loading thumbnail…

DataVizTP3_StackedArea

This stacked area chart visualizes monthly stock prices for multiple companies (MSFT, AMZN, IBM, AAPL) from 2000 to 2010, using a dataset loaded from a CSV file. The chart shows how each company’s price contributes to the total across time, with colored layers and a legend identifying each symbol. Built with D3 v4, it uses `d3.stack()`, `d3.area()`, and `d3.nest()` to structure the data, while `d3.scaleTime()`, `d3.scaleLinear()`, and `d3.scaleOrdinal()` handle scaling and colors. SVG paths render the areas, and axes are added with `d3.axisBottom()` and `d3.axisLeft()`.

KKylaste

81% match