Reusable Heat map

100%

Reusable Heat map

✓ Published0🌍 Public

Last edited Nov 9, 2021

Created on Nov 9, 2021

Forked from gme

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.

AI-generated description

MIT Licensed

Similar vizzes

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

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

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

85% match

Loading thumbnail…

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.

MMark Lam

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

81% match

Loading thumbnail…

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

This heatmap uses a red-to-grey-to-green gradient to visualize relevance scores for companies, with the color scale’s domain rounded to the nearest 0.2 to create 50 discrete color bins. A legend beneath the grid maps scores from 0 to 10, using a neutral grey midpoint for smoother transitions. The visualization renders company symbols and their scores as SVG tiles, generated with D3's `scaleLinear` and `.join()` operators, pulling JSON data from a GitHub gist. Tooltips and click interactions expose additional company details.

MMark Lam

81% match

Loading thumbnail…

Fork of API Heatmap - brand colors round 30 steps

This example displays a grid of company tiles colored by a relative score, with a gradient legend below. The color scale uses a continuous three-color gradient from gray to teal, rounded to 30 steps. Squares are arranged in five columns, each showing a company symbol and its score. Tooltips reveal company details on hover. The visualization uses d3.scaleLinear for color mapping, d3.json to load the data, and SVG rectangles to render the heatmap cells.

MMark Lam

80% match

Loading thumbnail…

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.

MMark Lam

80% match