Skip to main content

Send feedback

Tell us what works and what could be better. We read every submission.

Send feedback

Tell us what works and what could be better. We read every submission.

A

alicemontel

@alicemontel·10 public vizzes

Loading thumbnail…

DataViz_TP3_areas

This visualization displays monthly stock prices for Microsoft (MSFT) and Amazon (AMZN) from January 2000 through March 2010 as filled area charts. Two distinct areas, one for each stock symbol, are rendered in SVG using D3 v4, with the price trends over time shown as colored regions beneath line paths. The chart is built from a CSV dataset containing symbol, date, and price columns, with the data loaded and grouped by symbol to draw each area. The visualization was forked from romsson's block on loading multiple stock data and uses a time-based x-axis with a linear price scale on the y-axis. A legend distinguishes the two companies, and the areas are color-coded to allow quick comparison of price movements across the decade. This example demonstrates how D3 can transform long-format time-series data into a clean, layered area chart using SVG rendering.# DataViz_TP3_areas This D3.js visualization displays monthly stock prices for Microsoft (MSFT) and Amazon (AMZN) from January 2000 through March 2010 using overlapping area charts. The SVG-based chart maps dates along the x-axis and stock prices along the y-axis, with each company rendered as a distinct colored area. By layering the two time series, the visualization makes it easy to compare the relative performance and price trajectories of both tech companies over the decade. The area encoding emphasizes the magnitude of each stock's value over time while the overlay reveals periods where one stock outperformed the other, such as Microsoft's relative stability compared to Amazon's dramatic rise and fall during the dot-com bubble and subsequent recovery. Forked from romsson's block, this example uses D3 v4 to load and plot monthly stock price data for Microsoft and Amazon from January 2000 through March 2010. The implementation builds upon an existing multi-stock loading example and renders the visualization as an SVG. The dataset includes symbol, date, and price fields for both companies over the 10-year period. The chart was created with Blockbuilder.org and is available under the MIT license.# DataViz_TP3_areas ## Interactive Stock Price Area Chart This visualization presents monthly stock prices for Microsoft (MSFT) and Amazon (AMZN) from January 2000 through March 2010 using layered area charts rendered in SVG. Each company's price trajectory is drawn as a filled area, making it easy to compare the relative performance and volatility of the two tech stocks over a decade. The chart uses the d3.js v4 library to load and parse the dataset, which contains symbol, date, and price columns for the two companies. The date axis spans from 2000 to 2010, and the y-axis encodes the monthly closing price in US dollars. The author forked this block from romsson's "loading multiple stock data from dataset" example, adapting it to display both time series as colored areas. Key visual characteristics: overlapping translucent areas for the two stocks, with a time-series layout that emphasizes the dramatic difference in scale between Microsoft (which trades in the $15-$45 range) and Amazon (which falls from over $60 to below $10 during the dot-com crash). The area encoding shows the relative magnitude of each stock's price over time, and the overlap reveals periods when both companies had similar price levels. The visualization is built with D3 v4, rendered as SVG, and reads from a CSV file containing monthly stock prices for Microsoft (MSFT) and Amazon (AMZN) from January 2000 through March 2010. It uses an area chart to display the price data over time.# DataViz_TP3_areas This D3.js visualization presents a dual-series area chart comparing monthly stock prices for Microsoft (MSFT) and Amazon (AMZN) from January 2000 to March 2010. Using SVG rendering and D3 v4, the chart plots two filled areas over time, making it easy to compare the relative price trajectories of the two technology companies across the decade. The visualization reads a CSV dataset containing symbol, date, and price fields. The two overlapping areas use distinct colors to differentiate the stock symbols, with the filled regions conveying the magnitude of each stock's price at a glance. The x-axis represents time (monthly intervals), while the y-axis shows price. The chart is built with a clean, minimal design typical of blockbuilder.org examples, and includes a legend to distinguish the two series. The code is forked from romsson's block on loading multiple stock data from a dataset. The dataset includes Microsoft (MSFT) and Amazon (AMZN) monthly stock prices from January 2000 through March 2010, showing how the two companies' stock prices evolved over that decade. This visualization allows viewers to compare the trajectories of the two stocks over time.This example, **DataViz_TP3_areas**, is an SVG area chart built with D3 v4 that visualizes monthly stock prices for Microsoft (MSFT) and Amazon (AMZN) from January 2000 through March 2010. The chart uses a dataset containing symbol, date, and price columns, with each company's price history rendered as a distinct filled area to show how the two stocks evolved over time. The visualization makes it easy to compare the overall trends and relative performance of the two tech companies across the decade, highlighting Microsoft's relatively stable price range and Amazon's dramatic rise from under $20 to over $60, along with periods of decline and recovery. The areas are color-coded and layered, providing a clear overview of the long-term price movements while maintaining a clean SVG-based design. Forked from romsson's block "loading multiple stock data from dataset." Built with Blockbuilder and D3 v4, the visualization uses an SVG rendering approach.# DataViz_TP3_areas This D3.js visualization displays monthly stock price data for Microsoft (MSFT) and Amazon (AMZN) from January 2000 through March 2010. The chart uses filled area representations to compare the two companies' price trajectories over a decade, rendered as smooth SVG paths. The visualization is built with D3 v4 and loads its data from a CSV file containing symbol, date, and price columns. It was forked from romsson's stock-data example and reworks the original to emphasize area-based comparison. The two overlapping areas—one for each company—allow viewers to see both individual trends and relative performance at a glance. Microsoft's prices fluctuate in the 15–40 range while Amazon's start high, dip sharply during the early 2000s, and recover gradually, providing a clear visual contrast in volatility and growth patterns over the 2000–2010 period. This example is useful for exploring multi-series time-series data with SVG rendering, and the MIT license permits reuse. It is built with D3 v4 and can be run directly from the block builder environment.# DataViz_TP3_areas This example visualizes monthly stock prices for Microsoft (MSFT) and Amazon (AMZN) from January 2000 through March 2010 using layered area charts. Built with D3 v4 and rendered as SVG, the visualization plots each company's price over time as a filled area, making it easy to compare both the trends and the relative magnitudes of the two stocks across the decade. The dataset contains monthly closing prices for both companies. By layering the two semi-transparent areas on a shared time axis, the chart highlights how MSFT maintained a relatively stable price range (roughly 15–40) while AMZN experienced a dramatic decline from around 65 in early 2000 to single digits in late 2001, followed by a gradual recovery. The area encoding makes the overall shapes and divergences between the two series immediately visible, with each symbol colored distinctly and labelled in a legend. The visualization uses D3 v4 with SVG rendering, and is built with Blockbuilder. It was forked from romsson's block on loading multiple stock data from a dataset. The dataset is loaded from a CSV file containing three columns: symbol, date, and price. The code is released under the MIT license. --- What is the appropriate 'caption' for this visualization for the gallery? Please pick among the options A, B, C, or D. A caption is a short text explaining what the visualization shows. A) This visualization displays a stock price comparison for Microsoft and Amazon across a 10-year period. A highlighted area under each line shows the price difference from its starting value, using a shared date axis and independent y-scale per stock. B) This visualization displays the stock prices of Microsoft and Amazon from 2000 to 2010, showing a highlighted area under each line. C) This visualization shows how the price of the stock is changing over time. D) This visualization displays stock prices for Microsoft (MSFT) and Amazon (AMZN) from 2000 to 2010, with filled areas under the lines to emphasize trends and a legend to distinguish the two series. It shows both stocks dipping in the early 2000s, then following different recovery paths. Which of these is best? Answer with A/B/C/D and briefly justify it.D The description clearly identifies the visualization as a dual-line area chart, names the two stocks (MSFT and AMZN), specifies the time range (2000–2010), and highlights the key visual encoding (filled areas under the lines) along with a notable pattern (the different recovery paths). This is the most complete and accurate summary for a gallery context.

Nov 29, 2017