Fork of vxv tree

100%

Fork of vxv tree

✓ Published1🌍 Public

Last edited Mar 30, 2022

Created on Mar 30, 2022

Forked from vxv tree

This visualization displays a treemap of companies grouped by industry, with each cell sized by relative score and color-coded to show either relationship scores or percentage net change. The treemap is built using `d3.treemap` and `d3.hierarchy` with hierarchical data parsed from a JSON source. Cells contain clipped text labels, and a React interface toggles between the two color scales (`d3.scaleLinear`). The SVG rendering uses React with D3 v7 and updates colors via a `useEffect` hook.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

vxv tree

This interactive treemap visualizes companies organized by industry, with each cell’s size reflecting a relative score and its color mapping to the parent industry category. Users can toggle between summing by count or size, triggering animated transitions that smoothly reposition cells via d3.treemap and transition.attr. Built with React and d3.v7, the SVG rendering includes tooltips showing company names and values, using d3.hierarchy, scaleOrdinal, and clipPath to fit multi-line symbols within cells.

MMark Lam

92% match

Loading thumbnail…

vxv tree

This treemap visualization displays stock symbols grouped by their market industry, with each rectangle’s area proportional to the stock’s relative score. The SVG renders industry categories as colored regions, using a categorical color scale to distinguish sectors. Built with React and D3 v7, the code constructs a hierarchy via `d3.hierarchy` and `.sum()`, then applies `d3.treemap()` to compute layout. Stock tickers appear as text labels within each tile. Data comes from a JSON file containing company metadata, including industry classification and performance metrics.

MMark Lam

87% match

Loading thumbnail…

Fork of Treemap Demo

This interactive treemap displays a hierarchical company dataset with a CEO, three group leaders, and their employees. The visualization supports CRUD operations through buttons that update node values, add or remove employee nodes, and add or remove parent groups. Built with React and D3 v5, it uses `d3.hierarchy` and `d3.treemap` to compute layout, with SVG rectangles and text labels rendered, while `d3.transition` animates position and size changes over three seconds. Color and opacity scales encode group membership and node values.

Ddasari234

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

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

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

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

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

75% match