Skip to main content
SimilarExport ZIP
100%

API Heatmap

✓ Published1🌍 Public
MMark Lam
Last edited Nov 10, 2021
Created on Nov 10, 2021

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.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

API Heatmap - brand colors

This visualization displays a grid of company squares, each colored by a relevance score using a linear color scale from light gray to dark teal. The heatmap uses D3 v7 to render SVG rectangles and text labels for company symbols and scores. Data is loaded as JSON from a GitHub gist, and interactive tooltips show company details like industry and description on mouseover. A color legend along the bottom maps the VectorScore range from 0 to 10.

MMark Lam
92% match
Loading thumbnail…

API Heatmap - brand colors round 10 steps - reusable

This heatmap displays 20 company symbols arranged in a 5-column grid, with each cell colored by a relative score on a continuous d3.scaleLinear gradient from gray-green to dark teal. Scores are rounded to the nearest 0.3 unit using a custom rounding function, and a 10-step color legend is rendered beneath the grid. Built with D3 v7, the visualization reads JSON data from a GitHub gist, uses SVG rectangles and text for rendering, and includes interactive tooltips on mouseover that show company details alongside a fixed information panel.

MMark Lam
89% match
Loading thumbnail…

API Heatmap - brand colors round .2 3band rgg - 20

A grid of 20 company symbols forms an API heatmap, with each cell colored by a relatedness score. The visualization uses a three-band red-gray-green linear scale, mapping scores from 0 to 10 with values rounded to the nearest 0.2, creating 50 distinct bins. d3.scaleLinear assigns fill colors, while d3.json loads the data. Tooltips display company details on hover, and a legend shows the color scale's gradient.

MMark Lam
88% match
Loading thumbnail…

API Heatmap - brand colors floor

A grid of company tiles displays a numerical "VectorScore" as a color, using a D3 linear color scale with domain 0–10 and a teal-to-gray range. The color is applied via `d3.scaleLinear`; the code floors the score to create discrete color steps, so a score of 6.X appears distinct from 7.X. The data (company symbol, name, description, industry, market cap) is fetched as JSON from a GitHub gist, and each tile shows the symbol and its score. Hovering reveals a tooltip, and the company name links to a NASDAQ query.

MMark Lam
88% match
Loading thumbnail…

API Heatmap - brand colors round 20 steps

This visualization displays an API heatmap of 20 companies, each represented by a tile showing a ticker symbol and relevance score. The code uses a d3.scaleLinear color scale with a three-color gradient from gray to teal to dark green, rounded to 0.5 increments. Tiles are rendered as SVG rectangles with mouseover tooltips showing company details, while a legend indicates the vector score range from 0 to 10. The data comes from a remote JSON file containing company symbols and metadata from the ms_industry dataset.

MMark Lam
88% 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
87% 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
87% 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
86% match