TP3-p1

100%

✓ Published0🌍 Public

Last edited Nov 23, 2017

Created on Nov 23, 2017

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

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>

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

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

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

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

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

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

82% 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…

tp3_d3

This example animates a small multi-series line chart of stock prices (sourced from a CSV file) into a horizon graph, a technique that visualizes magnitude through color intensity. Initially, each series is drawn sequentially as a black line using d3.svg.line with a time-scale x-axis and linear y-axis. The animation then transitions to a clipped view, applying d3.scale.ordinal colors to area fills composed of three stacked bands per series, compressing the y-domain to one-third the original value.

MMilowB

81% match