gme

100%

✓ Published2🌍 Public

Last edited Nov 9, 2021

Created on Nov 8, 2021

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`.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of 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.

MMark Lam

86% match

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

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

76% match

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

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

74% match

Loading thumbnail…

gme correlation

This circular arc diagram visualizes correlations between financial market entities, showing nodes arranged horizontally with curved links of varying thickness representing connection strength. The interactive visualization uses D3 v7 with React, loading JSON data from a GitHub gist. On mouseover, the selected node and its related links are highlighted, while all other elements are dimmed. The implementation combines React state management via useEffect hooks with D3's selection and data joining APIs, including selectAll, join, and scalePoint for positioning.

MMark Lam

72% match

Loading thumbnail…

Reusable Heat map

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.

MMark Lam

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

72% match