Gist 8966870

100%

✓ Published0🌍 Public

Last edited Feb 12, 2014

Created on Feb 12, 2014

This visualization compares the percentage change in stock prices of Airbus and Boeing from 2000 to 2013. It uses D3 v3 with SVG and animation to render two line charts of the monthly returns for each company. The data, loaded from a tab-separated file, is plotted with separate colored lines for Airbus and Boeing, with hover or animation highlighting the differences over time.

AI-generated description

Similar vizzes

Loading thumbnail…

Animated path multi-series line chart

Two time series lines, for Airbus and Boeing stock prices, animate drawing themselves across a shared date axis. Each line uses D3’s SVG path transition with `stroke-dasharray` and `stroke-dashoffset` to reveal itself over 15 seconds, with a green line for Airbus and black for Boeing. Data comes from a TSV file parsed by `d3.tsv`, and axes are built with `d3.svg.axis` and `d3.time.scale`.

RRoxIv

80% match

Loading thumbnail…

Animated path multi-series line chart

This example demonstrates a multi-series line chart where two data lines—Airbus and Boeing stock values over time—are drawn progressively using SVG path animations. The chart uses D3.js v3 with a time-scaled x-axis and a linear y-axis, rendering the monthly data points from the provided TSV file. Each series animates along its path, creating a dynamic reveal of the data. The chart includes labeled axes, a legend, and hover tooltips for interactivity, making it easy to compare the two manufacturers' performance trends over the displayed period.

663anp3ca

77% match

Loading thumbnail…

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

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

71% match

Loading thumbnail…

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

70% match

Loading thumbnail…

[animated charts] stocks from dataset

This animated chart tracks monthly stock prices for Microsoft and Amazon from January 2000 through March 2010, using D3 v4 to render and animate lines. Drawn with SVG, the visualization smoothly transitions between data points over time, showing each stock's price fluctuations across the decade. The animation reveals how both stocks decline in the early 2000s, with Amazon’s drop to under $6 in late 2001 contrasting sharply with its later recovery to over $60 by 2010, while Microsoft’s price remains comparatively stable throughout.

EEssohanamKouyou

70% match

Loading thumbnail…

Tp3_DV_Rendu3

This interactive visualization displays the historical stock prices of Microsoft, Amazon, and IBM from January 2000 to March 2010. It uses a combination of individual line charts and a stacked area chart to compare the price trends and relative magnitudes across the three companies. The visualization is rendered as an SVG using D3 version 3, with animated transitions that convert between the line and stacked area representations. The code leverages D3’s time and linear scales, category color palette, and layout stack API to process and display the data from the provided CSV file.

AAminaSGitHub

70% match

Loading thumbnail…

etape2

The visualization displays monthly stock prices for Microsoft, Amazon, and IBM from 2000 to 2010, with each company’s price series separated into its own horizontal band. Animated SVG line charts draw progressively over time, while filled areas underneath each line use color to distinguish the symbols. The code uses d3.csv, d3.nest, d3.svg.line, d3.svg.area, and d3.timer to parse the data, group by symbol, and animate the rendering.

NNaamaNaa

70% match