Skip to main content
SimilarExport ZIP
100%

Final Project TreeMap

✓ Published1🌍 Public
Mmhzahdeh@dons.usfca.edu
Last edited Apr 28, 2025
Created on Mar 10, 2025

This treemap visualizes the distribution of hedge fund assets under management (AUM) by country, with each rectangle sized proportionally to the total AUM for that nation. The chart uses d3.hierarchy and d3.treemap to compute the layout, then renders rectangles as SVG elements with a categorical color scale via d3.scaleOrdinal. Hovering a rectangle triggers a tooltip showing the country name and its aggregated AUM value, which the code sums from the CSV data source. The visualization is fully responsive, recalculating dimensions on window resize.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Treemap

This fork of a D3 treemap visualizes hierarchical data from a CSV file, showing the production values of countries grouped by continent as nested rectangles. Each rectangle uses color to represent its leaf node, and hovering highlights it while a title tooltip displays the country name and production value. The code uses `d3.csv`, `d3.stratify`, and `d3.treemap` to compute layout, then renders SVG rectangles and text labels with D3 v6.

HHaili0109
72% match
Loading thumbnail…

Final Project Tree Map

This treemap visualization displays the average salaries and observation counts for various job titles, grouped by job category. It uses the D3.js `treemap` layout algorithm to partition a rectangular canvas into nested rectangles, with each rectangle’s area proportional to its data value. Each leaf node is rendered as an SVG `rect`, with fill color assigned via a categorical color scale based on the parent category. Interactive tooltips appear on mouseover, showing the category, title, average salary, and observation count. Text labels are added to each leaf node, with font size scaled to rectangle width. The data is loaded from a remote JSON file.

DDuc Pham
72% match
Loading thumbnail…

Treemap

This treemap visualizes hierarchical data from a CSV file, showing production values for countries grouped under parent categories as nested rectangles. The example uses D3.js v6 with a CSV-parsed hierarchy, stratifying the data via `d3.stratify()` and computing rectangle positions with `d3.treemap()`. Rectangles are rendered as SVG elements with a teal fill and black stroke, while country labels appear in white text within each cell. The layout uses a fixed canvas size with padding between nodes, and styling comes from the included CSS.

Hhanulik.ondrej@gmail.com
71% match
Loading thumbnail…

visualization9d3

A D3.js treemap displays hierarchical data as nested rectangular nodes, sized proportionally to each value. The visualization shows five course categories with descending values, using a spectral color scale for differentiation. The code embeds a static dataset directly and builds the hierarchy using `d3.hierarchy` with a sum accessor, then applies `d3.treemap` to compute the layout. Each leaf node renders as a positioned `div` element, with dimensions derived from the treemap’s computed coordinates and colors assigned via `d3.interpolateSpectral`.

GGanesh Gundekarla
70% match
Loading thumbnail…

D3 Treemap

This D3 Treemap visualizes hierarchical data by representing each leaf node as a rectangle, with size determined by the `Quantity` field and colored steelblue. It loads comma-separated data from a GitHub Gist using `d3.csv`, parses numeric columns, and applies the `d3.treemap` layout to compute tile positions. The SVG rendering appends grouped rectangles and text labels for each country, with cell dimensions derived from the layout's `x0`, `y0`, `x1`, and `y1` values.

GGayan Priyadarshana
70% match
Loading thumbnail…

Tree Map: MoMA Dataset

A treemap visualizes the distribution of artist nationalities in the MoMA dataset, with each rectangle's area proportional to the count of artists from that country. Hovering over a rectangle displays a tooltip showing the nationality and its exact count, while the color scale assigns a distinct hue to each nationality. The visualization uses D3 v7 APIs including `d3.treemap`, `d3.hierarchy`, and `d3.scaleOrdinal` with `schemeTableau10`. The code processes an in-memory array of nationality counts, renders rectangles via SVG, and manages the tooltip through D3's `select` method. The layout is computed using the default treemap algorithm with a padding of 4 pixels.

EEri Kim
70% match
Loading thumbnail…

Fork of Fork of TreeMap with Tooltips and colors correctly

A treemap visualization displays steel scrap exports by partner country, with rectangles sized and colored by total export value. The view supports drill-down through country nodes to reveal commodity-level breakdowns, with tooltips showing exact values. The code uses d3.csv to load data, d3.hierarchy and d3.treemap for layout, and d3.scaleSequential for color encoding. Rendered in SVG with d3 transitions for updates, a reset button restores the initial country-level view.

GGayan Priyadarshana
70% match
Loading thumbnail…

Treemap - Global Data

This interactive treemap visualizes global metrics—such as CO₂ emissions, population, and GDP—for countries grouped by region, with a dropdown to switch between twelve data dimensions. Built with D3.js, it uses `d3.treemap` and `d3.hierarchy` to compute the layout and `scaleSequential` with `interpolateWarm` for color encoding. Hovering reveals a tooltip with region, country, and metric-specific values. The viz renders as SVG, sourcing data from a bundled global dataset.

Nnitinramagiri1@gmail.com
70% match