TP2 data viz final UCBL 2017

100%

TP2 data viz final UCBL 2017

✓ Published0🌍 Public

Last edited Nov 28, 2017

Created on Nov 28, 2017

This interactive visualization compares the monthly stock prices of Microsoft, Amazon, and IBM from 2000 to 2010. It first animates line charts for each company sequentially, then transforms them into stacked horizon graphs to highlight price trends and relative magnitudes. Built with D3 v4, it uses `d3.csv` to load the dataset and `d3.timeParse` for date handling, while SVG paths and animated transitions via `d3.timer` and `transition` methods drive the visual evolution. The horizon chart technique uses clipped, overlapping areas to encode values across multiple bands.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

Loading thumbnail…

TP2 Data viz UCBL 2017

This example visualizes monthly stock prices for Microsoft, Amazon, and IBM from January 2000 to March 2010. The chart shows multiple colored area and line series, each symbol assigned a distinct color from the d3.scaleOrdinal category scheme, with a legend identifying each company. Data is loaded from a CSV file and nested by symbol using d3.nest, with dates parsed via d3.timeParse and scales constructed with d3.scaleTime and d3.scaleLinear. Lines and areas are rendered as SVG paths using d3.line and d3.area with a curveBasis interpolation, alongside d3.axisBottom and d3.axisLeft for the time and price axes.

RRenaud-D-Harreville

93% match

Loading thumbnail…

TP2 Data viz stacked UCBL 2017

This stacked area chart visualizes the monthly closing prices of three technology stocks—Microsoft, Amazon, and IBM—from 2000 to 2010. The chart uses a time-scaled x-axis and a linear y-axis, with each stock represented as a colored layer using the d3.stack layout. The code parses a tab-separated dataset with d3.tsv, nests the data by symbol, and renders the areas with d3.area, applying a category10 color scale. Axis labels and final values appear at the right edge of each layer.

RRenaud-D-Harreville

90% match

Loading thumbnail…

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.

LLRobergeon

89% match

Loading thumbnail…

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

89% match

Loading thumbnail…

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.

LLRobergeon

89% match

Loading thumbnail…

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.

LLRobergeon

88% match

Loading thumbnail…

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

88% match

Loading thumbnail…

TP3_v3.11

This visualization compares monthly stock price trends for Microsoft, Amazon, and IBM using layered area charts. It presents the data in three distinct modes: separated, stacked, and centered displays, allowing viewers to compare price movements across companies. The D3.js v4 code loads data from a CSV file, parses dates with `d3.timeParse`, and renders the areas as SVG paths using `d3.area` with basis curve interpolation. Animated transitions would cycle through the different display modes, though the visible code primarily sets up the static chart structures.

GGaret005

88% match