Stacked to Grouped

100%

Stacked to Grouped

✓ Published0🌍 Public

Last edited Feb 2, 2018

Created on Feb 2, 2018

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

97% match

Loading thumbnail…

Stacked bar chart v4 Stocks

This stacked bar chart, built with D3 v4, visualizes the monthly closing stock prices for four major tech companies (MSFT, AMZN, IBM, AAPL) across four selected years. It uses `d3.csv` to load data from `stocks.csv`, then filters and aggregates the data to display stacked rectangles. The chart employs `d3.scaleLinear` for both the x and y axes, with each month’s bar segmented by company, colored in grayscale, and rendered as SVG. The visualization includes axis labels and company legends, with a dark background for contrast.

BBaptisteL54

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

89% match

Loading thumbnail…

Grouped bar chart v4 Stocks

A grouped bar chart displays monthly stock prices for Microsoft, Amazon, IBM, and Apple across four selected years. The visualization uses D3 v4's `d3.csv` to load data from a local CSV file and `d3.select` to append an SVG element with a dark blue background. Bars are drawn using `svg.selectAll("rect")` with a linear scale for the y-axis, and each group of four rectangles represents the four companies' prices for a given month. The chart includes axis elements created with `d3.axisBottom` and `d3.axisLeft`, plus text labels for each company.

BBaptisteL54

89% match

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

85% match

Loading thumbnail…

Stack_Graph

This stacked area chart shows monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010. The chart uses D3 v4’s `d3.stack()` to compute layered series and displays them as filled areas with `d3.area()`, using a basis curve for smoothing. Colored by `d3.schemeCategory10` and rendered as SVG, it includes time and linear axes via `d3.axisBottom` and `d3.axisLeft`. Data is loaded from a CSV file and nested by symbol with `d3.nest()`.

BBarbierJeremy

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

83% match

Loading thumbnail…

Transitions

A stacked bar chart displays monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010, with each layer colored by company. The visualization uses D3.js version 3.5.5 to load CSV data, nest and stack the series, and render SVG axes and rectangles. A d3-legend color scale identifies the three companies, while ordinal and linear scales map months and prices to the chart’s dimensions.

MMariamArabi

82% match