DataViz_TP3_stacked

100%

DataViz_TP3_stacked

✓ Published0🌍 Public

Last edited Nov 29, 2017

Created on Nov 29, 2017

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.

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…

DataVizTP3_StackedArea

This stacked area chart visualizes monthly stock prices for multiple companies (MSFT, AMZN, IBM, AAPL) from 2000 to 2010, using a dataset loaded from a CSV file. The chart shows how each company’s price contributes to the total across time, with colored layers and a legend identifying each symbol. Built with D3 v4, it uses `d3.stack()`, `d3.area()`, and `d3.nest()` to structure the data, while `d3.scaleTime()`, `d3.scaleLinear()`, and `d3.scaleOrdinal()` handle scaling and colors. SVG paths render the areas, and axes are added with `d3.axisBottom()` and `d3.axisLeft()`.

KKylaste

91% match

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

88% match

Loading thumbnail…

DataViz_TP3_1transition

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.

Aalicemontel

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

86% match

Loading thumbnail…

Tp3_DV_Rendu5

This visualization compares the monthly stock prices of Microsoft, Amazon, and IBM from 2000 to 2010, showing both individual time series and a stacked area chart. The animation transitions through three views: individual line charts, horizon-style areas for each symbol, and finally a stacked layout. The code uses D3 v3 with SVG rendering, employing d3.svg.line, d3.svg.area, and d3.layout.stack for the layouts, while d3.time.scale handles the date axis. Data comes from a CSV file grouped by stock symbol via d3.nest.

AAminaSGitHub

86% match

Loading thumbnail…

TP3_DataViz_Area

This visualization displays monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010 using overlapping area charts and line paths. The code nests the CSV data by symbol, parses dates with `d3.timeParse`, and scales time and price with `d3.scaleTime` and `d3.scaleLinear`. It renders semi-transparent filled areas and stroked lines using `d3.area` with a basis curve, then adds axes via `d3.axisBottom` and `d3.axisLeft`, plus a color-coded legend based on `d3.scaleOrdinal`.

EElisaDnr

86% match

Loading thumbnail…

Tp3_DV_Rendu3

This interactive visualization displays the historical stock prices of Microsoft, Amazon, and IBM from January 2000 to March 2010. It uses a combination of individual line charts and a stacked area chart to compare the price trends and relative magnitudes across the three companies. The visualization is rendered as an SVG using D3 version 3, with animated transitions that convert between the line and stacked area representations. The code leverages D3’s time and linear scales, category color palette, and layout stack API to process and display the data from the provided CSV file.

AAminaSGitHub

86% match

Loading thumbnail…

tp3

This visualization displays the monthly stock price of Microsoft from January 2000 to December 2009 as a filled area chart. The SVG graphic uses a time-scaled x-axis and a linear y-axis for price in dollars, with the area under the line filled in a color assigned via a categorical color scale. Data is loaded from a CSV file containing symbol, date, and price columns, parsed with D3's time parser and rendered using the d3.area generator. The chart includes axes with formatted month-year ticks and a rotated y-axis label reading “Price ($)”. The single-series area chart shows the rise and fall of MSFT's stock price over the decade, with the fill color determined by the symbol field.

Aanojoual

86% match