Skip to main content
SimilarExport ZIP
100%

API Heatmap - brand colors floor extent rounded

✓ Published0🌍 Public
MMark Lam
Last edited Nov 12, 2021
Created on Nov 12, 2021

An interactive heatmap displays brand-relation scores for 20 companies in a 5x4 grid, using a diverging color scale to map minimum, midpoint, and maximum scores. The scale floors relation scores into 10 perceptible color steps, enabling easy comparison within the basket. D3 v7 handles SVG rendering, tooltips on hover, and click interactions showing company details. Data comes from a JSON file containing company names, industries, descriptions, and relation scores, with a linear color scale mapping values to muted teal and gray tones.

AI-generated description

The color uses a continuous 2-color scale which maps the minimum and maximum relation scores. The color scale floors the relation score to make 10 color steps. An advantage is that it shows perceptable differences within the basket selection. A disadvantage is that it may be misleading.

MIT Licensed

Similar vizzes

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
94% 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
92% match
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
91% 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
91% 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
91% 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
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
89% 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
86% match