Stocks Bar chart

100%

Stocks Bar chart

✓ Published0🌍 Public

Last edited Feb 2, 2018

Created on Jan 29, 2018

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.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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

91% match

Loading thumbnail…

Area_Chart

This area chart compares monthly stock prices for MSFT, AMZN, and IBM from 2000 to 2010. It displays both filled areas and overlaid lines per symbol, using color to distinguish each company. The visualization is rendered with SVG, and the code uses d3.nest, d3.line, and d3.area with basis curves, plus d3.scaleTime and d3.scaleLinear for axes. Data is loaded from a CSV file and parsed with d3.dsvFormat.

BBarbierJeremy

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

Tp3_DV_Rendu4

This visualization shows monthly stock prices for MSFT, AMZN, and IBM from 2000 to 2010, using layered area charts to compare trends across companies. Each symbol is displayed in its own horizontal band, with semi-transparent filled areas colored by company. The code uses D3 v3’s `d3.svg.area()`, `d3.svg.line()`, and `d3.time.scale()` to draw the SVG paths, while `d3.nest()` groups the CSV data by symbol. The chart sorts symbols by maximum price and applies basis interpolation for smooth curves.

AAminaSGitHub

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

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

85% match

Loading thumbnail…

Test

This line chart shows the monthly stock prices of Microsoft, Amazon, and IBM from January 2000 to March 2010, with each company’s price trend drawn as a separate colored line. The visualization uses the D3.js library (version 3.5.17) to parse dates, scale the axes, and render the SVG paths. Data is loaded from a CSV file, then grouped by symbol using `d3.nest()`, with the lines drawn using `d3.svg.line()` and the axes created via `d3.svg.axis()`. The color scale is generated dynamically with `d3.scale.category10()`.

Rrvdv

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

84% match