DataViz_TP3_1transition

100%

DataViz_TP3_1transition

✓ Published0🌍 Public

Last edited Nov 29, 2017

Created on Nov 29, 2017

This animated line chart tracks the monthly closing prices of Microsoft (MSFT) and Amazon (AMZN) from January 2000 through March 2010. The visualization uses SVG and D3 v4 to render two smooth, multi-colored area/line series — one per stock symbol — and smoothly transitions between the two as the user interacts, likely by toggling or switching focus. Each series is drawn as a distinct colored area, with the transition animated to interpolate the paths, providing a clear visual comparison of the two stocks' price trends over time. The data is loaded from a CSV file containing symbol, date, and price columns, and the chart is built using an SVG rendering with animation.

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/57eb273e01761b829aaa95b28c8193c1'>loading multiple stock data from dataset</a>

forked from <a href='http://bl.ocks.org/alicemontel/'>alicemontel</a>'s block: <a href='http://bl.ocks.org/alicemontel/5c1e3b24fa03e16adcf507ae115c1648'>DataViz_TP3_areas</a>

mit Licensed

Similar vizzes

Loading thumbnail…

TP3 Data viz

This visualization shows the monthly adjusted closing prices of Microsoft (MSFT) and Amazon (AMZN) from January 2000 to March 2010. It uses an SVG line chart with D3 v4, where each company’s price trend is plotted over time. The chart likely includes axes for date and price, with separate lines for each symbol, making it easy to compare the two stocks’ trajectories over the decade. The dataset is loaded from a CSV file containing symbol, date, and price columns. The visualization is built with D3.js and rendered as scalable vector graphics, using standard D3 scales and line generators to map the temporal and price data. The example is part of a block forked from romsson and created with blockbuilder.org, licensed under MIT.TP3 Data viz is a multi-line chart that visualizes monthly closing stock prices for Microsoft (MSFT) and Amazon (AMZN) from January 2000 to March 2010. Rendered as an SVG using D3 v4, the chart plots time along the x-axis and price on the y-axis, with separate colored lines for each symbol, enabling quick comparison of the two tech stocks' performance trends over the decade.

JJoymangulJensen

89% match

Loading thumbnail…

TP3 Data viz Joymangul

This example visualizes monthly closing prices for Microsoft (MSFT) and Amazon (AMZN) from January 2000 to March 2010, using data from a CSV file loaded via d3. It renders the time series as an SVG line chart, with each stock’s price over time drawn as a separate line. The visualization, built with D3 v4 and inspired by earlier forks, emphasizes the contrast between the two tech stocks’ price trajectories over the decade. The chart uses a minimal blockbuilder.org template and is released under the MIT license.

JJoymangulJensen

89% match

Loading thumbnail…

TP3 DataViz

This example animates a multi-series line chart showing the monthly closing prices of Microsoft, Amazon, and IBM from 2000 to 2010. It first draws the lines progressively, then transitions to a horizon chart, using stacked, semi-transparent bands to encode price magnitude. Built with D3 v3, it relies on `d3.svg.line`, `d3.svg.area`, `d3.time.scale`, and `d3.timer` for the animation, with data loaded from a CSV file via `d3.csv`. The final view clips each band with a `clipPath` and uses a color scale to differentiate the series.

LLRobergeon

88% match

Loading thumbnail…

DataViz_TP3_stacked

This visualization shows the monthly stock prices of Microsoft (MSFT) and Amazon (AMZN) from January 2000 to March 2010, using stacked area charts to compare their relative performance over time. The data is loaded from a CSV dataset containing symbol, date, and price fields. The visualization renders as an SVG using D3 v4, with two layered area paths colored distinctly (blue for MSFT, orange for AMZN) to show the cumulative price contributions. The x-axis represents time in months, while the y-axis shows the stacked price values, with a legend identifying each company. A hover interaction reveals exact values, making it easy to compare the two stocks' trajectories and their combined total over the decade. The chart uses a clean white background with light gray gridlines, and the stacked areas provide a clear visual comparison of the two stocks' relative performance over time.

Aalicemontel

88% match

Loading thumbnail…

[animated charts] stocks from dataset

This animated chart tracks monthly stock prices for Microsoft and Amazon from January 2000 through March 2010, using D3 v4 to render and animate lines. Drawn with SVG, the visualization smoothly transitions between data points over time, showing each stock's price fluctuations across the decade. The animation reveals how both stocks decline in the early 2000s, with Amazon’s drop to under $6 in late 2001 contrasting sharply with its later recovery to over $60 by 2010, while Microsoft’s price remains comparatively stable throughout.

EEssohanamKouyou

86% match

Loading thumbnail…

TP3_Data_Viz

This visualization compares monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010, using a small-multiple layout of line charts. Each symbol is sorted by its maximum price and displayed in its own row, with a shared time axis and per-symbol price scales. The code uses d3.csv to load the dataset, d3.nest to group records by symbol, and d3.svg.line and d3.svg.area to render the paths. Animated transitions, driven by d3.timer and transition methods, first draw the lines progressively and then transform them into horizon-style area charts, moving labels to the right edge.

AAminaSGitHub

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

85% match

Loading thumbnail…

tp2 dataviz

This example animates a transition from multi-line charts to horizon charts for stock price data. It first draws time-series lines for each symbol, with a moving marker tracing the data over time. The view then transforms each line into a stacked horizon plot using color-coded bands to encode value ranges. The code uses D3 v3’s SVG line and area generators, `d3.nest` for grouping, and `d3.timer` with transitions to animate the shift. Data comes from a CSV of monthly prices for MSFT, AMZN, and IBM.

RRomainCandy

85% match