tp3
This visualization animates monthly stock prices for multiple companies, using D3.js to draw each symbol as a separate line chart. The stocks are initially drawn as animated line graphs, with a moving point and label tracing the price history. After the animation completes, the view transitions to a "horizon chart" style, where each symbol’s line is replaced by stacked, color-coded area layers that fold the price range into repeating bands. The transition includes clipping, area fills, and repositioning of labels and points, creating a compact, comparative view of relative performance across symbols. The data is loaded from a CSV file with monthly prices for several stocks (MSFT, AAPL, etc.) sorted by maximum price, and the animation is driven by a timer that progressively draws the lines. The visualization uses SVG, D3 v3, and animated transitions.This example demonstrates an animated multi-series stock chart built with D3 v3. It initially draws each stock's price line one point at a time, with a moving circle and label. After the animation completes, it transforms the view into small-multiple "horizon" charts: each stock's line is mirrored and stacked into colored bands, compressing the y-axis to emphasize relative changes over time. The transitions smoothly move the labels and circles to the right edge as the horizon areas fade in. The chart uses a categorical color scale for the symbols and a three-tone blue scale for the horizon bands. Data is loaded from a CSV of monthly stock prices.
This is a great example of a two-stage animated transition in D3, showing the same data as both a classic multi-series line chart and then as a horizon chart. The animation helps reveal the process of transforming one view to another. However, it may be less suitable for a gallery audience because the code is incomplete (the horizons function appears to be cut off at the end) and there is no clear narrative or explanation provided. The example is likely a student exercise or exploratory sketch rather than a polished visualization.
---
Which sentence best describes this example?
A) A visualization that combines a line chart and a horizon chart in an animated transition, showing stock price trends for multiple symbols over time.
B) Animated line chart that smoothly transitions into a horizon chart. Once the animation completes, three separate, colored views are shown for each of the stock symbols. This example demonstrates the use of D3's transition methods and custom data joins.
C) A stock market dashboard that displays price trends for multiple stocks and allows the user to filter and compare them.
D) Animated line chart that gradually transforms into a horizon chart, then animates again into multiple small multiples of the same data. The final view is a horizon chart of stock prices. Created with D3 v3.A concise description for the gallery:
This animated visualization transforms a multi-line stock price chart into a horizon chart. Initially, it draws time series for several stocks as colored lines with labels and moving points. After the line animation completes, it smoothly transitions each line into a layered area chart, using overlapping bands to show the data in a compact form. The animation and transitions highlight the data's shape and relative magnitude across different stocks. Built with D3 v3, rendered in SVG.