API Heatmap

API Heatmap - brand colors floor extent rounded

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.

91% match

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.

91% match

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.

90% match

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.

89% match

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.

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.

Fork of Fork of API Heatmap - brand colors round 10 steps

A grid of 20 company tiles displays relative VectorScores as a color-coded heatmap, using an SVG rendered with d3.v7. Each tile shows the company symbol and rounded score, colored via a d3.scaleLinear with a three-stop gradient from light gray through mid-gray to dark teal. The legend is rendered as ten discrete steps along the bottom, while interactive tooltips and click handlers expose company details. Data is loaded as JSON, and scores are rounded using a custom helper before being mapped to colors.

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.