TP3 multiple line

TP3 simple line chart

This example shows monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010 as a single black line chart. The visualization uses D3 v4 with an SVG rendering approach, employing `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis. The `d3.line` generator creates the path, while `d3.timeParse` and `d3.timeFormat` handle date conversion and label formatting. Data is loaded from a JSON dataset, with the last value displayed as text annotation.

93% match

TP2

This visualization shows monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010 using multi-line time series. The data comes from a CSV file parsed with the `d3.dsvFormat` API. Each stock’s price trend is drawn as a colored line using `d3.line` with a basis curve, within an SVG rendered by D3 v4. The chart includes axes generated by `d3.axisBottom` and `d3.axisLeft`, plus a legend built with `d3.scaleOrdinal` and category colors. The code also computes per-symbol maximum and total prices via `d3.max` and `d3.sum`, though these values are not directly displayed.

93% match

TP3 animation

This visualization animates the monthly stock prices of Microsoft, Amazon, and IBM from 2000 to 2010 using an animated line chart. It first draws each company’s price line progressively, then transforms the view into a horizon chart by stacking three colored area bands per symbol. The code relies on D3 v3’s `d3.svg.line`, `d3.svg.area`, `d3.time.scale`, `d3.nest`, and `d3.timer` to build the SVG animation, reading data from a CSV file.

92% match

TP3_DataViz_SmallMulti

This example shows monthly stock price trends for Microsoft, Amazon, and IBM from 2000 to 2010 using small multiples, with one SVG chart per symbol. Each chart displays a pink area path and a black line, with the y-axis scaled independently based on each symbol’s maximum price. The code uses d3.csv to load data, d3.nest to group by symbol, and d3.area and d3.line with d3.scaleTime and d3.scaleLinear. The color of each area is selected from a hardcoded array, demonstrating per-chart styling.

EElisaDnr

TP3_Data_Viz

This visualization compares monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010, using a small-multiple layout of line charts. Each symbol is sorted by its maximum price and displayed in its own row, with a shared time axis and per-symbol price scales. The code uses d3.csv to load the dataset, d3.nest to group records by symbol, and d3.svg.line and d3.svg.area to render the paths. Animated transitions, driven by d3.timer and transition methods, first draw the lines progressively and then transform them into horizon-style area charts, moving labels to the right edge.

AAminaSGitHub

TP3 animation

The visualization animates monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010. It initially plots each company's price line individually, then transforms all three into a stacked horizon chart. The code uses d3.svg.line and d3.area generators with basis interpolation, d3.time.scale for the date axis, and d3.timer for the animation sequence. The final view uses d3.scale.ordinal colors and a clipPath to create the layered horizon effect. Data comes from the bundled dataset.csv file.

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