Interactive visualization of stocks

100%

Interactive visualization of stocks

✓ Published0🌍 Public

Last edited Feb 2, 2018

Created on Feb 2, 2018

This interactive visualization displays the average monthly stock prices of MSFT, AMZN, IBM, and AAPL from 2000 to 2010 as a stacked bar chart. Using D3 v4, the bars are rendered in SVG, with each color segment representing a different company. Clicking the chart triggers a smooth animation that separates the stacked segments into a grouped layout, using D3 transitions to shift positions and resize bar widths, allowing viewers to compare individual stock trends over time.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

BarChartAnimation

This visualization displays monthly average stock prices for MSFT, AMZN, and IBM from 2000 to 2010, using animated transitions between stacked and grouped bar charts. Users toggle between the two modes via radio buttons. The code uses d3.nest to aggregate the CSV data by year and symbol, d3.stack for the stacked layout, and chained transition calls to smoothly morph rectangle positions, sizes, and axis scales (d3.axisLeft) for each mode change.

OOussamaHOURIRA

89% match

Loading thumbnail…

Stocks Bar chart

This interactive chart displays monthly stock price data for MSFT, AMZN, and IBM from 2000 to 2010, aggregated by year. Clicking the chart toggles between stacked bars and grouped circles, each colored by company. The visualization uses d3.csv to load data, d3.nest for aggregation, d3.scaleBand and d3.scaleLinear for axes, and d3.stack for the stacked layout, with all elements rendered as SVG.

CCtuauden

89% match

Loading thumbnail…

Stocks - Grouped to stacked bars

This example visualizes monthly stock prices for MSFT, AMZN, and IBM from 2000 to 2010, allowing users to toggle between grouped and stacked bar charts. The grouped view shows each company’s price side-by-side, while the stacked view displays cumulative prices per month. Built with D3 v4, the visualization uses SVG for rendering and transitions to animate between the two modes. Data is loaded from a CSV file, processed with `d3.nest`, and mapped with `d3.scaleBand` and `d3.stack` to generate the bars.

JJboulery

88% match

Loading thumbnail…

Stacked to Grouped

This visualization displays monthly stock prices for four companies (MSFT, AMZN, IBM, AAPL) across selected years, initially rendered as stacked bars and toggling to grouped bars when a white circle is clicked. The code uses D3 v4 with SVG rendering, loading data from `stocks.csv` via `d3.csv`. It builds linear scales (`d3.scaleLinear`) for positioning and creates rectangles for each bar, with colors distinguishing companies. The chart updates by re-binding data and adjusting bar widths and heights, and includes labeled axes and a company legend.

BBaptisteL54

87% 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…

Transitions

This visualization shows a stacked bar chart of monthly stock prices for MSFT, AMZN, and IBM from 2000 to 2010, with each layer representing a different date range. The chart uses D3.js to load data from a CSV file, nest it by date, and apply the d3.layout.stack function to create the stacked layout. The code renders the chart as SVG, using d3.svg.axis for the x and y axes, d3.scale.ordinal and d3.scale.linear for scaling, and d3.legend.color to display a color legend for the date layers.

MMariamArabi

86% match

Loading thumbnail…

Stacked to Grouped

This visualization displays monthly stock prices for four companies (MSFT, AMZN, IBM, AAPL) across three selected years, rendered as SVG rectangles on a dark background. A click on a white circle toggles between stacked and grouped bar layouts. The code uses D3 v4 with `d3.scaleLinear` for axes and positioning, loading comma-separated stock data from an external CSV file.

BBaptisteL54

86% match

Loading thumbnail…

Bar charts everywhere

This example compares the average monthly stock prices of Microsoft, Amazon, IBM, and Apple across years (2000–2010) using bars that can switch between stacked and grouped layouts via radio buttons. The visualization uses D3 v4 with `d3.nest()` and `d3.rollup()` to aggregate the CSV data, `d3.stack()` for stacking, and ordinal and linear scales for positioning. An animated transition (800ms) updates the bar positions and heights when the mode changes, with SVG rendering and a custom color scale for each company.

RRaphAllier

85% match