Transitions

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.

99% match

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.

98% match

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.

95% match

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

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

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

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

D3 Example

A grouped bar chart displays monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010, with months on the x-axis and price on the y-axis. Bars are color-coded by company using a categorical color scale, with a color legend for identification. The chart loads data from `stocks.csv` and renders with SVG, using D3.js version 3.5.5 for scales, axes, nesting, and stacking, alongside the d3-legend library to generate the color legend.