Tech Stock Visualization

100%

Tech Stock Visualization

✓ Published0🌍 Public

Last edited Apr 8, 2023

Created on Apr 8, 2023

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.

AI-generated description

This gives interactive plot of tech stocks of 2020.

MIT Licensed

Similar vizzes

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

95% match

Loading thumbnail…

Tech Stock Visualization

This visualization displays the scaled closing prices of tech stocks over time, grouped into industry categories such as Gaming, Streaming, and Tech-Giants. It uses d3.csv to load stock price data, d3.scaleTime and d3.scaleLinear for axes, and d3.line with curveBasis to render smooth lines for each company. Interactive filtering is provided through clickable legend circles, which toggle visibility of specific industries using d3.group and ordinal color scales. The SVG output includes gridlines, axis labels, and animated transitions when filtering.

JJingyuan Liu

91% match

Loading thumbnail…

A7 Small Multiples

This gallery example presents a small multiples chart displaying the opening stock prices of five technology companies—Oracle, Apple, Nvidia, Avago, and Microsoft—from 2023 to 2024. The D3.js visualization uses a CSV data source, splitting the time series into three separate time-scaled plots, each with its own x-axis and y-axis scaling. The code constructs the SVG layout with custom margins, applies a quantized color scale, and renders line charts for each company. The data is parsed from the `tech.csv` file using `d3.csv` and `d3.timeParse`, with axes and scales implemented via `d3.scaleTime` and `d3.scaleLinear`.

AAllen Jake Polintan

78% match

Loading thumbnail…

stock

This visualization animates the high prices of banking stocks over time, first drawing each stock’s line progressively, then transforming the chart into a horizon graph by stacking and compressing multiple area layers with distinct fill colors. It uses D3 v3’s `d3.svg.line`, `d3.svg.area`, and `d3.svg.axis` to render SVG paths, with transitions driven by `d3.timer` and `setTimeout`. Data is loaded from a CSV file via `d3.csv`, nested by symbol, and sorted by maximum price.

SSheela2930

74% match

Loading thumbnail…

2020-stock-returns

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.

11wheel

74% match

Loading thumbnail…

stock

This visualization presents a comparative analysis of banking stock opening prices over time, with each stock plotted as a separate line chart arranged vertically. The animation begins by progressively drawing each line, then transitions to filled area charts beneath them, using a categorical color palette. Built with D3.js v3, the code employs `d3.svg.line` and `d3.svg.area` for the graphics, `d3.time.scale` for the date axis, and `d3.timer` for the animated draw sequence. Data is loaded from a CSV file containing stock symbols and their daily opening values.

SSheela2930

74% match

Loading thumbnail…

A7 Heatmap Time Series

This heatmap visualizes the daily opening prices of five major tech companies—Oracle, Apple, Nvidia, Avago, and Microsoft—throughout 2024. Data from Yahoo Finance is encoded using a sequential color scale (interpolateGnBu) mapped to stock price values, with white spaces indicating missing days in the CSV. The x-axis uses a time scale for dates, while the y-axis uses an ordinal band scale for companies. Rows represent companies, columns represent trading days, and color intensity encodes open price. The visualization includes labeled axes, a color legend, and hover interactions on rectangles, with the color scale ranging from light blue for lower prices to dark blue for higher prices.

AAllen Jake Polintan

74% match

Loading thumbnail…

stock

A multi-line chart animates banking stock prices over time, with each series plotted in its own horizontal band and labeled by symbol. The visualization first draws lines progressively using a `d3.timer`, then transitions into horizon charts by stacking filled areas with a `clipPath`. Data is loaded via `d3.csv` from a gist and parsed with `d3.time.format`. The SVG rendering uses `d3.svg.line`, `d3.svg.area`, and `d3.scale.linear` to map dates and prices, with color assigned by `d3.scale.category10`.

SSheela2930

74% match