Skip to main content
SimilarExport ZIP
100%

vxv tree

✓ Published0🌍 Public
MMark Lam
Last edited Mar 30, 2022
Created on Mar 30, 2022
Forked from Fork of 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.

AI-generated description

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

See also React Starter.

MIT Licensed

Similar vizzes

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

Treemap Demo

This treemap demo shows a hierarchical dataset of a CEO’s employees, grouped into three boss-level parents, with each leaf rectangle sized by its numeric value. The interface includes buttons to mutate the data: changing leaf values, adding or removing child nodes, and adding or removing entire parent groups. The visualization updates with animated transitions on rectangles and text labels, rendered in SVG via React. It uses d3.hierarchy and d3.treemap for layout, d3.scaleOrdinal for color coding by parent, and d3.scaleLinear for opacity based on value.

Ggeorgeeeee
75% 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
74% 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…

Treemap Template in React

This treemap displays hierarchical data with three group leaders and fourteen employees, using color to distinguish parent categories and labels to show names and values. Built with React and D3 v5, the visualization constructs the layout using `d3.hierarchy` and `d3.treemap`, while `d3.scaleOrdinal` assigns colors. The chart renders as SVG, with React’s `.map()` method generating rectangles and text elements instead of traditional D3 joins. Data is fetched asynchronously from a remote JSON file using `d3.json` within a React hook.

Iiblub
71% match
Loading thumbnail…

API Heatmap - brand colors

This visualization displays a grid of company squares, each colored by a relevance score using a linear color scale from light gray to dark teal. The heatmap uses D3 v7 to render SVG rectangles and text labels for company symbols and scores. Data is loaded as JSON from a GitHub gist, and interactive tooltips show company details like industry and description on mouseover. A color legend along the bottom maps the VectorScore range from 0 to 10.

MMark Lam
71% match
Loading thumbnail…

Organizational chart using d3.v5

This example displays an interactive organizational chart for a fictional company, with employee nodes showing photos, names, and job titles. The hierarchy is rendered as a zoomable and pannable tree using SVG and animations. Built with React and d3.v5, it leverages `d3.layout.tree`, `d3.svg.diagonal`, and `d3.behavior.zoom` to manage layout, links, and pan/zoom interactions. The data comes from `flare.json`, with expand/collapse controls and a search feature for finding employees.

Ssrinivasjavvadi
70% match