TP3_DataViz

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_DataViz_Area

This visualization displays monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010 using overlapping area charts and line paths. The code nests the CSV data by symbol, parses dates with `d3.timeParse`, and scales time and price with `d3.scaleTime` and `d3.scaleLinear`. It renders semi-transparent filled areas and stroked lines using `d3.area` with a basis curve, then adds axes via `d3.axisBottom` and `d3.axisLeft`, plus a color-coded legend based on `d3.scaleOrdinal`.

EElisaDnr

TP3 multiple line

This visualization displays monthly stock prices for Microsoft, Amazon, and IBM from January 2000 to March 2010, using a small multiple layout with one chart per company. Each chart contains a gray area path and a line path rendered as SVG, with the y-axis scaled independently to each stock’s maximum price. The code uses d3.csv to load the dataset, d3.nest to group by symbol, and d3.time.scale, d3.svg.area, and d3.svg.line to construct the charts. Data comes from a local CSV file.

TP3_DataViz_Steam

This visualization displays monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010 using multi-line chart. Each company’s price series is drawn as a separate colored line using D3 v4’s `d3.line` with a basis curve, while the x-axis uses `d3.scaleTime` and the y-axis uses `d3.scaleLinear`. The dataset is loaded via `d3.text` and parsed with a custom comma delimiter, then nested by stock symbol using `d3.nest`. A legend is generated from the ordinal color scale’s domain, and axes are rendered using `d3.axisBottom` and `d3.axisLeft`.

EElisaDnr

TP3 area simple line chart

This area chart visualizes a simple dataset of monthly values using a blue filled region beneath a black line. Built with D3 v4, it uses `d3.scaleTime` for the x-axis and `d3.scaleLinear` for the y-axis, with `d3.area` and `d3.line` generating the SVG paths. Data is loaded from a local `dataset.json` file, parsed with `d3.timeParse`, and labeled with formatted month-year strings. The chart also highlights the final value’s numeric label beside the line’s end.

TP3 DataViz

This example animates a multi-series line chart showing the monthly closing prices of Microsoft, Amazon, and IBM from 2000 to 2010. It first draws the lines progressively, then transitions to a horizon chart, using stacked, semi-transparent bands to encode price magnitude. Built with D3 v3, it relies on `d3.svg.line`, `d3.svg.area`, `d3.time.scale`, and `d3.timer` for the animation, with data loaded from a CSV file via `d3.csv`. The final view clips each band with a `clipPath` and uses a color scale to differentiate the series.

79% match

TP2_DataViz_Linechart

This example displays a simple line chart that plots seven data points, each labeled with a month abbreviation (e.g., "Jan 16") and a value. The chart uses a time-based x-axis and a linear y-axis, with the final value annotated in large text beside the line. Built with D3 v4, the visualization relies on `d3.timeParse`, `d3.scaleTime`, `d3.scaleLinear`, and `d3.line`, reading data from a local JSON file, and renders the line and labels as SVG elements within a fixed-width canvas.

BBarbierJeremy

79% match

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.