A7 Heatmap Time Series

100%

A7 Heatmap Time Series

✓ Published0🌍 Public

Last edited Mar 19, 2024

Created on Mar 19, 2024

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.

AI-generated description

Data is from and edited to only include open prices from: https://finance.yahoo.com/ The white spaces are days that were not recorded in the csv file

MIT Licensed

Similar vizzes

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

83% 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…

Fork of Fork of Activity_7_1_Question_2

This chart displays the historical stock prices of Microsoft and Apple as overlaid semi-transparent area charts, using a time-series x-axis and a linear price y-axis. The visualization loads CSV data from a GitHub gist, parses dates with `d3.timeParse`, and renders the chart as SVG via the D3.js v7 library. It uses `d3.scaleTime` and `d3.scaleLinear` for axes, `d3.area` for path generation, and `d3.axisBottom` and `d3.axisLeft` for ticks. Quarterly date ticks are formatted as month-year, with a legend identifying each company.

LLarry Johnson

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

72% match

Loading thumbnail…

API Heatmap - brand colors round .2

This heatmap visualizes brand-related data for 20 companies, using a 3-color continuous scale from d3.scaleLinear that pivots at a value of 5 and rounds scores to 0.2 increments, creating 10 distinct color bands. Each SVG rectangle represents a company, colored by its relative score, with the ticker symbol and score overlaid. The code uses d3.json to load data from a NASDAQ-linked gist, d3.scaleLinear for color mapping, and d3.mouse for tooltip interactions. A color legend at the bottom displays the full gradient range from 0 to 10.

MMark Lam

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

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

71% match

Loading thumbnail…

temp

A small multiples line chart shows monthly stock price history for Microsoft, Amazon, and IBM, with each symbol rendered as a separate panel. The visualization animates through repeating cycles: areas smoothly fill beneath each price curve one by one, then reset, creating a continuous looping effect. Built with D3 v4, the code uses `d3.nest()` to group data by symbol, `d3.line()` and `d3.area()` with `d3.curveBasis` for smooth paths, and `d3.timeParse` for dates. Panels are sorted by maximum price, and each area fill cycles through a categorical color scale. Data comes from an external CSV file.

TTheo-Jaunet

71% match