2020-stock-returns

100%

2020-stock-returns

✓ Published0🌍 Public

Last edited Jun 13, 2020

Created on Jun 13, 2020

A diverging bar chart compares stock returns for 30 major companies during 2020. Each company is represented by a horizontal bar, colored with `d3.interpolateTurbo` and sized by market capitalization. A brush control lets users scrub through the time series, updating the bars to show returns between any two dates. Built with `d3.brushX` and `d3.select`, the chart loads closing prices from a CSV via `d3.loadData` and renders as a static SVG with animated transitions.

AI-generated description

Based on a McKinsey chart.

I've added a brush and removed the bar height transition so you can scrub through the time series a little faster. It's a little jittery; adding a bit of momentum to the y position might help.

Closing prices from Google Finance, dividends and corporate actions might change returns.

Similar vizzes

Loading thumbnail…

30. 3-stock-return chart inner data

A multi-series line chart compares the daily return of three stocks (shls, ssgf, and jqr) over roughly ten months, with values indexed to a baseline of 1. The visualization displays each stock’s relative performance as a separate colored line, with a legend labeling the end of each series. Built with D3 v4, the chart loads data from a CSV file, parses dates with `d3.timeParse`, maps dates to the x-axis using `d3.scaleTime`, and encodes return values on the y-axis with `d3.scaleLinear`. Lines are rendered as SVG paths, with color assigned via `d3.schemeCategory10` and axes drawn using `d3.axisBottom` and `d3.axisLeft`.

深深度碎片

74% match

Loading thumbnail…

Tech Stock Visualization

This visualization shows scaled closing stock prices for 26 tech companies throughout 2020, grouped by industry category (Gaming, Streaming, Work-From-Home, Online-Retail, and Tech-Giants). The interactive line chart plots timestamps against scaled closing prices, with each company’s series distinguished by a unique color. Built with D3 v6, it uses `d3.csv` to load remote data, `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.line` for the paths, and `d3.curveBasis` for smoothing. The SVG rendering includes ordinal color mapping and a bottom legend, with no animations applied.

Yyamunayennem

74% match

Loading thumbnail…

30. stock return chart

A single red line charts the daily "return" of a stock, indexed to a base value of 1.0, over several months in 2011. The chart maps dates on the x-axis and the return value on the y-axis, using a basis curve for smoothness. It loads and parses the data from a CSV file with `d3.csv`, formats dates with `d3.timeParse`, and uses `d3.scaleTime` and `d3.scaleLinear` for the axes. The line is rendered as an SVG path via `d3.line`, with axis elements created using `d3.axisBottom` and `d3.axisLeft`.

深深度碎片

73% match

Loading thumbnail…

3d bar chart (TestCode)

This example presents a 3D bar chart visualizing the stock prices of major companies across the first six months of 2022. The visualization uses the d3-x3d library in conjunction with D3 v5 to render an interactive, three-dimensional scene that users can rotate and explore. Data is loaded asynchronously from a remote CSV file using D3's `csv` function and parsed into a multi-series format. The chart combines the bar chart component from d3-x3d with X3DOM for web-based 3D rendering, and includes AnyChart libraries for additional charting capabilities.

VVamsi Krishna

73% match

Loading thumbnail…

30. 3-stock-return-missing-data chart

This chart displays daily stock returns for three stocks—shls, ssgf, and jqr—over time, with only jqr having data while the other two series consist entirely of missing values. The line chart uses D3 v4 with SVG rendering, employing `d3.csv` for data loading, `d3.timeParse` for date parsing, and `d3.scaleTime`, `d3.scaleLinear`, and `d3.scaleOrdinal` for positioning and color. Lines are drawn with `d3.line` using a basis curve, and missing values are handled explicitly by returning null. Axis labels and series legends are added using `d3.axisBottom` and `d3.axisLeft`.

深深度碎片

73% match

Loading thumbnail…

IT return Bar Chart

This bar chart displays the one-year return of the top 10 most populous IT companies, sorted by company name along the vertical axis and return percentage on the horizontal axis. Built with React and D3 v5, it uses `scaleBand` for the categorical y-axis and `scaleLinear` for the continuous x-axis, rendering SVG rectangles as marks. The data comes from a CSV file of company returns, loaded via `d3.csv`, with tooltips showing exact values and axes labeled with tick marks and a descriptive title.

Mmeghshah612

72% match

Loading thumbnail…

3D bar chart

This interactive 3D bar chart visualizes the stock prices of top companies from January to June, with a multi-series dataset loaded from a CSV file. The visualization renders each company's monthly values as three-dimensional bars using the d3-x3d library, which integrates D3.js with X3DOM for WebGL-based rendering. The chart is animated and supports hover interactions, allowing users to inspect individual data points. Additional libraries including AnyChart are loaded but not utilized in the visible code, while the styling is handled through custom CSS.

Nnikhilagopi

72% match

Loading thumbnail…

Tech Stock Visualization

This interactive line chart visualizes the scaled closing prices of 26 tech companies throughout 2020, grouped by industry categories such as Gaming, Streaming, and Tech-Giants. The visualization uses D3 v6 with SVG rendering and animation, employing scales like d3.scaleTime and d3.scaleLinear, along with d3.line and d3.group to organize data by company index. The chart displays axes, grid lines, and industry labels, with color mapping via d3.scaleOrdinal to distinguish companies. Data is loaded from a CSV file containing daily stock price records for the year.

JJingyuan Liu

71% match