TP3-p3-2

100%

✓ Published0🌍 Public

Last edited Nov 25, 2017

Created on Nov 24, 2017

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

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>

wtfpl Licensed

Similar vizzes

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

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

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

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

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

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

86% match

Loading thumbnail…

TP3_DataViz

This visualization displays a line chart of stock prices over time, with data loaded from an external CSV file. The chart uses an SVG-based D3.js v3 layout, employing a time-scaled x-axis and a linear y-axis to map date and price values. The line itself is drawn using `d3.svg.line`, while axes are generated with `d3.svg.axis` (implied by `d3.axisBottom` and `d3.axisLeft`). Although the code references an area path and dataset.json, the visible rendering is a simple black line, suggesting a minimal line chart focused on temporal price trends.

BBarbierJeremy

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