Skip to main content
SimilarExport ZIP
100%

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

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

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.

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 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
95% 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
92% 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
91% 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
90% match
Loading thumbnail…

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

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.

MMark Lam
90% 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
90% 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
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