tp3

100%

✓ Published0🌍 Public

Last edited Nov 26, 2017

Created on Nov 26, 2017

This visualization displays the monthly closing stock prices of several technology companies as a streamgraph, with layers stacked in a silhouette layout. The chart uses an ordinal color scale with an orange palette and animates opacity transitions on mouseover to highlight individual series. A vertical guide line follows the cursor, and a tooltip reveals the symbol and price for the nearest data point. The axes include a time-based x-axis and a value-based y-axis on the right, while the layered area paths use cardinal interpolation for smooth curves. The visualization is built with D3 v2 and rendered as SVG with interactive hover effects.

AI-generated description

Built with blockbuilder.org

forked from <a href='http://bl.ocks.org/anojoual/'>anojoual</a>'s block: <a href='http://bl.ocks.org/anojoual/786488d230cb6f47675128e5467b82b2'>tp3</a>

forked from <a href='http://bl.ocks.org/anojoual/'>anojoual</a>'s block: <a href='http://bl.ocks.org/anojoual/816aa44abb2520142dbd3cea9d34d302'>tp3</a>

forked from <a href='http://bl.ocks.org/anojoual/'>anojoual</a>'s block: <a href='http://bl.ocks.org/anojoual/60300daab2ab53a0a30710f77a99e60e'>tp3</a>

mit Licensed

Similar vizzes

Loading thumbnail…

tp33

This example visualizes monthly stock prices for multiple companies using an interactive streamgraph-like layout built with D3 v3. It renders small multiples of grouped bars for each stock symbol, with a color scale distinguishing the groups. A form-driven toggle animates between two views: in the "multiples" view, each stock’s bars are aligned to its own baseline; in the "stacked" view, the bars are stacked cumulatively by value offset. The transition loops automatically every few seconds, smoothly interpolating bar positions and labels via SVG transitions.

Aanojoual

87% match

Loading thumbnail…

TP3 animation

The visualization animates monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010. It initially plots each company's price line individually, then transforms all three into a stacked horizon chart. The code uses d3.svg.line and d3.area generators with basis interpolation, d3.time.scale for the date axis, and d3.timer for the animation sequence. The final view uses d3.scale.ordinal colors and a clipPath to create the layered horizon effect. Data comes from the bundled dataset.csv file.

LLRobergeon

83% match

Loading thumbnail…

TP3 animation

This visualization animates the monthly stock prices of Microsoft, Amazon, and IBM from 2000 to 2010 using an animated line chart. It first draws each company’s price line progressively, then transforms the view into a horizon chart by stacking three colored area bands per symbol. The code relies on D3 v3’s `d3.svg.line`, `d3.svg.area`, `d3.time.scale`, `d3.nest`, and `d3.timer` to build the SVG animation, reading data from a CSV file.

LLRobergeon

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

81% match

Loading thumbnail…

etape5

This interactive visualization animates the monthly stock prices of multiple companies, letting users toggle between three display modes—multiples, stacked, and stream—via radio buttons. Using D3 v3 with SVG, the chart renders price-over-time series for each symbol as colored areas. In the initial "multiples" view, each group is shown in its own small-multiple band with a shared ordinal time axis. Clicking "stacked" vertically offsets the series using a stack layout, and selecting "stream" centers them around a baseline for a streamgraph effect. The transitions between modes are animated, smoothly updating the y-positions of the areas and their group labels.

Aanojoual

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

81% match

Loading thumbnail…

TP3 multiple line

This visualization displays monthly stock prices for Microsoft, Amazon, and IBM from January 2000 to March 2010, using a small multiple layout with one chart per company. Each chart contains a gray area path and a line path rendered as SVG, with the y-axis scaled independently to each stock’s maximum price. The code uses d3.csv to load the dataset, d3.nest to group by symbol, and d3.time.scale, d3.svg.area, and d3.svg.line to construct the charts. Data comes from a local CSV file.

LLRobergeon

80% match

Loading thumbnail…

tp2 dataviz

This example animates a multi-series line chart, plotting monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010. It first draws each series as a dark, interpolated path in its own small multiples panel, highlighting the latest point with a colored circle. The animation then transitions each panel into a horizon chart, layering three clipped, stacked area fills to show the same data with greater vertical resolution. The code uses d3.svg.line and d3.svg.area generators, d3.time.scale for dates, and d3.select transitions to orchestrate the sequential reveal of lines and horizons.

EEnzoTheBrown

80% match