Tech Stock Visualization

100%

Tech Stock Visualization

✓ Published0🌍 Public

Last edited Dec 16, 2020

Created on Dec 16, 2020

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.

AI-generated description

A program that loads and parses some CSV data: CSS Named Colors.

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

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

91% match

Loading thumbnail…

Untitled

This visualization displays the closing prices and trading volumes of ten stocks over time, using a logarithmic scale to compare relative changes across different price and volume ranges. Each stock is drawn as a colored line, with a dropdown or toggle option to switch between close price and volume metrics. The chart uses D3 v6 with SVG rendering and includes gridlines, axis ticks, and a time-based x-axis. Data is loaded from a CSV file hosted on GitHub, and the color palette assigns a distinct hue to each stock symbol.

Lluxingyu

78% match

Loading thumbnail…

loading multiple stock data from dataset

The visualization displays monthly closing prices for multiple technology stocks—Microsoft, Amazon, and IBM—as a set of overlaid line charts, with each stock distinguished by a unique color and identified by a legend. It encodes the data from a CSV file containing symbol, date, and price fields, parsed using `d3.dsvFormat`. The code leverages d3.v4's syntax, including `d3.nest` to group by symbol, `d3.scaleTime` and `d3.scaleLinear` for axes, and `d3.line` with `d3.curveBasis` for smooth paths. A color scale via `d3.scaleOrdinal` applies the categorical palette, while axes are rendered with `d3.axisBottom` and `d3.axisLeft`.

RRade-Mathis

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

77% match

Loading thumbnail…

Stock Price

This interactive visualization shows stock prices for various companies over time, using horizontal bar charts grouped by company symbol. Each panel displays the price distribution for a specific stock, with bars representing individual price points and a prominent zero line for reference. The chart is built with React and D3 v6, using D3's `scaleBand` for the categorical date axis and `scaleLinear` for the price axis. Data is loaded from a remote CSV file, and bar heights and positions are computed dynamically using these scales.

Ttrucntx007

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

76% match

Loading thumbnail…

Tech gaints

This interactive tree visualization shows the evolution of five major tech companies (Apple, Microsoft, Meta, Google, and Amazon) across five years, with each company branching into yearly nodes that display financial attributes like open, close, high, low, and volume. The hierarchy is constructed from CSV data using `d3.hierarchy`, then rendered with `d3.tree()` and `d3.linkHorizontal()` to create the branching paths, while node rectangles and circles are positioned via SVG transforms. Interactive tooltips appear on hover, and the layout animates within an SVG canvas using D3 v7.

NNanditha Reddy

76% match