rendu_TP3

tp3_d3

This example visualizes stock price histories as a sequence of animated line charts, then transforms them into stacked horizon graphs. Using D3.js v3, it loads data from a CSV file containing stock symbols and monthly prices. The code employs `d3.svg.line`, `d3.svg.area`, and `d3.time.scale` to render paths, while `d3.timer` drives the drawing animation. A `clipPath` and ordinal color scale create the horizon chart effect, with `transition` methods smoothly displacing and recoloring the area fills. The SVG output is generated entirely client-side from the external dataset.

MMilowB

82% match

TP3-p3-5

This visualization compares four area-chart layouts for multivariate stock data, showing the same series as stacked, centered, and separated regions to highlight alternative encodings of cumulative change. It loads CSV data via `d3.text` and `d3.dsvFormat`, parses dates with `d3.timeParse`, and uses `d3.nest()` to group by symbol. SVG rendering employs `d3.area()` with `d3.curveBasis` for each variant, while scales and axes come from `d3.scaleTime`, `d3.scaleLinear`, and `d3.axisBottom`. Animated transitions between layouts are driven by D3’s update pattern, though the code excerpts omit the final animation calls.

82% match

TP3-p3-3

This visualization displays a stacked area chart of stock prices over time, showing how each category contributes cumulatively to the total. It uses a time-scaled x-axis and a linear y-axis with gridlines, and includes a legend positioned at the right side. The code loads CSV data from a remote gist, parses dates, and nests the data by symbol. It computes the sum of other categories for each point to create the stacked effect, then renders the areas using `d3.area` with a basis curve, filling each series with a categorical color from `d3.schemeCategory10`.

81% match

TP3-p3-1

This visualization displays multiple time-series lines as filled areas, each representing a stock symbol over time, with overlapping semi-transparent regions stacked by date. It uses D3 v4 to fetch CSV data from an external gist, parse dates with `d3.timeParse`, and nest records by symbol. The chart draws smooth areas via `d3.area` with a basis curve, maps dates to an ordinal time scale, and values to a linear scale, including axes and a color-coded legend with opacity. A custom calculation sets each point’s lower price based on the maximum lower value among other symbols.

81% match

renduFinalTp3

This example animates a multi-series line chart of monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010. The visualization first draws each company’s price history as a separate line, then transitions into a stacked area chart. Using D3.js v3 and SVG, it employs `d3.svg.line`, `d3.svg.area`, `d3.layout.stack`, and `d3.timer` to orchestrate the sequential animation, with data loaded from a CSV file via `d3.csv`.

NNaamaNaa

tp2 dataviz

This example animates a transition from multi-line charts to horizon charts for stock price data. It first draws time-series lines for each symbol, with a moving marker tracing the data over time. The view then transforms each line into a stacked horizon plot using color-coded bands to encode value ranges. The code uses D3 v3’s SVG line and area generators, `d3.nest` for grouping, and `d3.timer` with transitions to animate the shift. Data comes from a CSV of monthly prices for MSFT, AMZN, and IBM.

RRomainCandy

TP3-p3-4

This example visualizes stock market data from a CSV file as a stacked area chart, using an ordinal color scheme to distinguish between multiple time series. The chart is centered vertically so that the combined data fills the plot area, with a legend placed to the right. It uses d3.area with a basis curve, d3.scaleTime, d3.scaleLinear, and d3.scaleOrdinal, all rendered as SVG paths. The data is first parsed with d3.dsvFormat, nested by symbol with d3.nest, and then processed to compute cumulative sums before plotting.

TP3

This example shows a stacked bar chart of average monthly stock prices for four companies over eleven years, with a click interaction that toggles between stacked and grouped modes. The bars animate smoothly between the two layouts using chained `transition` calls. It uses D3 v4’s `d3.nest()` to aggregate the CSV data, `d3.stack()` for stacking, and `d3.scaleBand`/`d3.scaleLinear` for positioning. The SVG rectangles transition their `x`, `y`, `width`, and `height` attributes over time.

AAlxClt