Stock Heatmap

100%

✓ Published0🌍 Public

Last edited Feb 2, 2021

Created on Feb 2, 2021

A zoomable treemap displays stock market data, with each block sized by trading volume and colored by percentage gain or loss. The visualization organizes stocks by sector, using a threshold color scale that maps negative returns to reds, neutral to gray, and positive returns to greens. The D3 v3 layout uses `d3.layout.treemap` for the hierarchical structure, and the file also relies on `d3.queue` for asynchronous data loading. The color function uses `d3.scale.threshold` with specific domain intervals, while the interface supports zooming through the parent-child block navigation.

AI-generated description

A zoomable heat map of stocks classified by sector. The size of the blocks is a function of the volume traded and the color shows the gains / loss. Based on Zoomable Treemap by Mike Bostock.

forked from <a href='http://bl.ocks.org/anilnairxyz/'>anilnairxyz</a>'s block: <a href='http://bl.ocks.org/anilnairxyz/754723d31dd14d50a3142e65d47c1057'>Stock Heatmap</a>

mit Licensed

Similar vizzes

Loading thumbnail…

vxv tree

This treemap visualization displays stock symbols grouped by their market industry, with each rectangle’s area proportional to the stock’s relative score. The SVG renders industry categories as colored regions, using a categorical color scale to distinguish sectors. Built with React and D3 v7, the code constructs a hierarchy via `d3.hierarchy` and `.sum()`, then applies `d3.treemap()` to compute layout. Stock tickers appear as text labels within each tile. Data comes from a JSON file containing company metadata, including industry classification and performance metrics.

MMark Lam

76% match

Loading thumbnail…

API Heatmap - brand colors floor extent

This visualization displays a 5-by-4 grid heatmap of stock symbols, where each cell’s color encodes a relation score between a company and a selected brand. The fill uses d3.scaleLinear with a three-stop domain mapping to a two-color range, while a separate scaleLinear floors scores into ten discrete legend steps. It renders as SVG using d3.v7, with tooltips and a side panel showing company details on hover.

MMark Lam

75% match

Loading thumbnail…

Fork of API Heatmap - brand colors round 20 steps

A responsive SVG heatmap displays companies from the GME-20 dataset, each rendered as a colored square labeled with a ticker symbol and a relative score. A three-stop linear color scale (`d3.scaleLinear`) transitions from light gray through teal to dark green, with continuous values rounded to the nearest 0.5 via `Math.ceil`, producing 50 discrete bins. Tooltips show company details on mouseover. The code imports specific functions from D3 v7, including `json`, `scaleLinear`, and `format`, and uses an API-hosted JSON file as the data source, positioning elements with a custom grid layout.

MMark Lam

75% match

Loading thumbnail…

API Heatmap

A grid of colored squares displays companies, each labeled with its ticker symbol and a numeric "rel_score." A red-to-green linear scale maps these scores, and hovering over a square reveals company details like name, industry, and description in a tooltip and a fixed info panel. The visualization is built with d3.v7, using `scaleLinear` for color mapping, `.join()` for SVG element creation, and mouse event handlers for interactivity. Data comes from a JSON file hosted on a GitHub gist.

MMark Lam

74% match

Loading thumbnail…

Fork of Fork of Fork of API Heatmap - brand colors round .2 3band

This exemplar displays a grid of company cells, with each cell labeled by its stock symbol and relevance score, colored according to a three-band diverging color scale (from teal to gray to dark green). The color mapping uses a continuous d3.scaleLinear domain from 0 to 10 with outputs rounded to the nearest 0.5 bin. The visualization includes a discrete color legend constructed from 25 rectangles, and tooltips providing company details. Data is loaded via d3.json from a GitHub gist containing 20 symbols.

MMark Lam

74% match

Loading thumbnail…

STOCK EXPIRATION (MODIFYING TOOLTIP)

This interactive treemap visualizes stock expiration data from a CSV, using rectangle size to represent quantities and color to encode alert levels. The hierarchical layout, built with `d3.hierarchy` and `d3.treemap`, lets users click through levels from brand to item to lot. A custom tooltip, styled with CSS and shown on hover, displays detailed metrics like remaining days and lot percentages. The chart uses SVG rendering and smooth transitions via D3’s animation capabilities, with color scales defined per hierarchy level.

GGuillamon

74% match

Loading thumbnail…

Reusable Heat map

This reusable heat map, built with D3 v7, visualizes the relative scores of companies as a grid of colored squares. Each square represents a company, displaying its symbol and score, with color transitioning from red to green based on the score value. The visualization includes a linear gradient legend to map scores to colors, and an interactive tick indicator that moves along the color scale on mouseover. Data is loaded from a JSON file via `d3.json`, with layout and scales managed by `d3.scaleLinear` and rendering done in SVG.

MMark Lam

73% match

Loading thumbnail…

STOCK EXPIRATION

This visualization displays the expiration of stock items as an interactive treemap, showing hierarchical relationships across product levels with rectangle sizes scaled by a chosen measure such as budget. Users can zoom into different levels, with each level assigned its own color scale to encode a secondary metric like remaining days. Built with d3.v4, the example uses `d3.hierarchy`, `d3.treemap`, and `d3.nest` to structure the data, while SVG elements and animations support the zoom transitions. Hovering reveals tooltips with detailed information about each item.

GGuillamon

73% match