Skip to main content
SimilarExport ZIP
100%

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

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

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.

AI-generated description

The color uses a continuous color scale rounding to the nearest .2 resulting 50 bins.

The color scale is a 3 color gradient with 5 being gray, allowing for a smoother transition.

MIT Licensed

Similar vizzes

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
93% match
Loading thumbnail…

Fork of API Heatmap - brand colors round .2

This fork of an API heatmap displays stock symbols and their related scores in a 5-column grid of rounded rectangles. The cells are colored using a continuous linear scale from white to black, with the score values rounded to the nearest 0.2 before mapping, creating a deliberate visual discontinuity between scores like 6.X and 7.X. The visualization uses D3 v7 to render SVG elements, fetching data from a local JSON with company names, descriptions, and market data. A tooltip and side panel show company details on hover, while a color legend at the bottom maps the color range to the score domain.

MMark Lam
92% 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
90% 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
89% 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
89% match
Loading thumbnail…

Fork of API Heatmap - brand colors round 20 steps

This example uses a linked dataset of company descriptions and relative scores to create a 20-step heatmap grid. Rendering as a flexible HTML/CSS grid, each of the 20 cells is colored by a three-color gradient from light gray to dark teal, based on the company's relative score rounded to the nearest half. The visualization includes interactive tooltips, a mouse-following indicator, and a details panel that appears on click, showing company information like industry and a link to its Nasdaq page. The chart uses D3's `scaleLinear` for color mapping and `json()` for data loading.

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