D3 Example

D3 Example

This visualization shows monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010, using nested selections in D3. Each company is positioned along a horizontal ordinal axis, with its price history drawn as a pie chart where each slice represents one month and its radius is scaled by the closing price. The slices are colored by date using a categorical color scale, with a legend generated by the d3-legend library. The code uses d3.csv, d3.nest, d3.layout.pie, and d3.svg.arc to structure and render the data as SVG.

89% match

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.

86% match

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

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.

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

Transitions

A stacked bar chart displays monthly stock prices for Microsoft, Amazon, and IBM from 2000 onward, with each company represented as a distinct color layer. The chart uses D3.js’s `d3.nest`, `d3.layout.stack`, and ordinal and linear scales to structure and render the data. A color legend, built with `d3.legend`, identifies each series. The SVG visualization reads from a CSV file and updates its axes and bars based on the loaded dataset.

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