Fork of gme

100%

✓ Published1🌍 Public

Last edited Nov 9, 2021

Created on Nov 8, 2021

Forked from gme

This visualization displays stock symbols in a 5-column grid of colored squares, where each square's color represents a relative score from red to green. Hovering over a square highlights it and updates a tick indicator on a gradient legend below to show the exact score value. The code uses D3 v7 with `scaleLinear` for color encoding and positioning, `json()` for loading data, and event handlers for mouse interactions. Data comes from a JSON file containing company information, rendered as SVG rectangles and text elements.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Fork of gme

This visualization displays a grid of company symbols, each colored by a numeric “rel_score” on a red-to-green scale. Clicking a symbol updates a side panel with the company name, industry, score, and description. The code uses D3 v7 with `select`, `scaleLinear`, and `json` to load and render SVG elements, including a gradient legend and tick indicator. Data comes from a remote JSON file fetched from a gist.

MMark Lam

92% match

Loading thumbnail…

gme

A grid of colored cells shows relative scores for a set of financial symbols from a JSON dataset, with each cell labeled by its ticker symbol and score. A linear color scale maps scores from red to green, and a gradient legend below the grid indicates the mapping. The visualization renders as SVG using d3.v7, with mouseover interactions defined but not detailed, and a tick indicator labeled "HI" marks a reference point. Data is loaded via `d3.json`, and scales are created with `d3.scaleLinear`.

MMark Lam

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

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

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

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

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

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

76% match