Multiples Barchart

Tp3_DV_Rendu2

This visualization compares monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010. It displays multiple small multiples, each showing a company’s price trend as a smooth line chart, with the data loaded from a CSV file. Using D3 v3, the code groups data by symbol via `d3.nest`, sorts companies by maximum price, and animates the drawing of each line progressively with a timer. An area fill, rendered via `d3.svg.area`, is added beneath each line, and the axis and scaling are computed dynamically per company.

AAminaSGitHub

Tp3_DV_Rendu5

This visualization compares the monthly stock prices of Microsoft, Amazon, and IBM from 2000 to 2010, showing both individual time series and a stacked area chart. The animation transitions through three views: individual line charts, horizon-style areas for each symbol, and finally a stacked layout. The code uses D3 v3 with SVG rendering, employing d3.svg.line, d3.svg.area, and d3.layout.stack for the layouts, while d3.time.scale handles the date axis. Data comes from a CSV file grouped by stock symbol via d3.nest.

AAminaSGitHub

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

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

Multiple lines

This visualization displays the monthly stock prices of Microsoft, Amazon, and IBM from 2000 to 2010 as multiple colored lines on a single chart. The chart uses a time-scaled x-axis and a linear y-axis for price, with each company’s line labeled directly. Built with D3 v4, the code loads data from a CSV, nests it by stock symbol, and renders using SVG paths. It also includes commented-out attempts at streamgraphs and area charts.

CCharlesGaydon

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

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