TP3-p3-5-backup

100%

TP3-p3-5-backup

✓ Published0🌍 Public

Last edited Nov 27, 2017

Created on Nov 26, 2017

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.

AI-generated description

Built with blockbuilder.org

Etapes de fabrication :

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

wtfpl Licensed

Similar vizzes

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

89% match

Loading thumbnail…

TP3-p3-4

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.

RRade-Mathis

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

87% match

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

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

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

82% match

Loading thumbnail…

first_area

The visualization shows time-series stock data as filled area charts, with each symbol rendered as a separate SVG area plot. It displays price trends over time, using a light gray fill for the area beneath each line. The code loads comma-separated data from a CSV file, parses dates with `d3.timeParse`, and nests the data by symbol using `d3.nest`. It constructs the areas with `d3.area` and applies a basis curve via `d3.curveBasis` for smooth lines. Axes are generated using `d3.axisBottom` and `d3.axisLeft`, with scales from `d3.scaleTime` and `d3.scaleLinear`. A legend is added using `d3.scaleOrdinal` with the `schemeCategory10` palette.

EEssohanamKouyou

81% match

Loading thumbnail…

TP3 area chart

A small multiples area chart visualizes monthly closing prices for Microsoft, Amazon, and IBM from January 2000 through March 2010, with each symbol’s time series drawn as a filled steelblue region. The D3 v4 code uses `d3.text`, `d3.dsvFormat`, `d3.nest`, `d3.scaleTime`, `d3.scaleLinear`, `d3.curveBasis`, and `d3.axisBottom`/`d3.axisLeft` to parse the CSV, group by symbol, and render the SVG paths. A categorical color legend labels each stock.

LLRobergeon

80% match