vxv tree

100%

✓ Published1🌍 Public

Last edited Apr 28, 2022

Created on Mar 30, 2022

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.

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

90% match

Loading thumbnail…

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

MMark Lam

87% match

Loading thumbnail…

Stock Heatmap

A zoomable treemap displays stock market data, with each block sized by trading volume and colored by percentage gain or loss. The visualization organizes stocks by sector, using a threshold color scale that maps negative returns to reds, neutral to gray, and positive returns to greens. The D3 v3 layout uses `d3.layout.treemap` for the hierarchical structure, and the file also relies on `d3.queue` for asynchronous data loading. The color function uses `d3.scale.threshold` with specific domain intervals, while the interface supports zooming through the parent-child block navigation.

GGerardoFurtado

76% match

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

74% match

Loading thumbnail…

vxv

This example loads a JSON dataset of thematic baskets and extracts the unique Morgan Stanley industry classifications from its symbols. The visualization does not yet render any graphical output; instead, it logs both the full data object and the resulting industries array to the browser console. The code uses d3.json from D3 v7 to fetch the remote data in an asynchronous async/await function, then applies standard array methods such as map and includes to process the response. The page itself displays only the large title “vxv” with no interactive elements.

MMark Lam

72% match

Loading thumbnail…

stock

This visualization animates the high prices of banking stocks over time, first drawing each stock’s line progressively, then transforming the chart into a horizon graph by stacking and compressing multiple area layers with distinct fill colors. It uses D3 v3’s `d3.svg.line`, `d3.svg.area`, and `d3.svg.axis` to render SVG paths, with transitions driven by `d3.timer` and `setTimeout`. Data is loaded from a CSV file via `d3.csv`, nested by symbol, and sorted by maximum price.

SSheela2930

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

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

71% match