Travail : Stacked bar chart v4

100%

Travail : Stacked bar chart v4

✓ Published0🌍 Public

Last edited Jan 29, 2018

Created on Jan 29, 2018

This stacked bar chart visualizes stock price data for Microsoft (MSFT) from January 2000 to December 2008, using D3 v4 to render an SVG. The x-axis uses a band scale to position 10 bar groups, while a linear y-axis maps the cumulative price ranges. Each bar is segmented into 5 stacked series, colored via an ordinal scale with a muted palette. The chart reads the `stocks.csv` dataset, nests records by symbol, and applies d3.stack to compute the stacking. Axes and bars are drawn without a visible domain line, giving the chart a cleaner appearance.

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/8aea86fddcf01380eb96a341509f394f'>Stacked bar chart v4</a>

forked from <a href='http://bl.ocks.org/456lumen/'>456lumen</a>'s block: <a href='http://bl.ocks.org/456lumen/cb21adbc5ce56a8341ebc7e76702b1da'>Travail : Stacked bar chart v4</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Travail : Stacked bar chart v4

This stacked bar chart, built with D3 v4, visualizes monthly closing prices for a single stock symbol (MSFT) over time, with each bar segmented by category. The visualization uses an SVG canvas and loads its data from a CSV file containing 216 monthly price observations spanning January 2000 through December 2008. The chart employs a linear y-scale and a band x-scale with 10 evenly spaced groups, while a categorical ordinal color scale assigns distinct colors to up to seven stacked series. The data is processed using d3.nest() to structure the records by symbol, then passed to d3.stack() to compute the cumulative y-positions for each bar segment. Although the code is written generically for multiple series and symbols, the included data contains only one symbol (MSFT), so the resulting chart displays stacked bars representing monthly price values, with the x-axis representing time samples and the y-axis representing the accumulated stock price. The visualization uses a muted color palette and SVG rendering, with axes that omit the domain line for a cleaner look.

4456lumen

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

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

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

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

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

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

82% match

Loading thumbnail…

Transitions

A stacked bar chart displays monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010. The visualization uses D3.js version 3.5.5 to create SVG elements, with a d3.layout.stack for layering data, d3.scale.ordinal for the x-axis, and d3.legend.color for the categorical color legend. Bars are grouped by date, colored by symbol, and rendered from the CSV data file.

MMariamArabi

82% match