Skip to main content
100%

Treasury

✓ Published0🌍 Public
Aamerval
Last edited Nov 15, 2015
Created on Nov 15, 2015

Treasury is an animated treemap built with D3 v3 that visualizes New Zealand income distribution across multiple demographic dimensions. The visualization encodes individual-level census data as colored tiles within nested rectangles, where each tile represents a combination of income tier, gender, ethnicity, and age group. Rectangles are sized proportionally to population counts, with colors mapping to income categories. The layout animates smoothly between different hierarchical groupings, allowing viewers to compare how demographic segments distribute across income brackets. SVG rendering and animation make the transitions between aggregation levels intuitive, revealing patterns in income inequality across gender, ethnicity, and age.

AI-generated description

Similar vizzes

Loading thumbnail…

Treasury

The visualization, titled “Treasury,” presents a detailed breakdown of income distribution across New Zealand’s population, segmented by income tier, gender, ethnicity, and age group. The data, sourced from a gist, is rendered using D3 v3 with SVG and animation. The visualization uses a stacked bar or area chart layout where each income tier (No Income, <5000) is represented as a horizontal band, with the height of each segment proportional to the population count for that demographic combination. The `tierPos` column likely defines the starting y-position for each tier, and `tierh` sets the band height. Colors encode ethnicity, and within each band, segments are grouped by gender and ordered by age, allowing comparisons across demographic categories. Animated transitions highlight changes or re-sort the data, making it easy to explore how income distribution varies across age groups, genders, and ethnicities.

Aamerval
91% match
Loading thumbnail…

treemap

This treemap visualizes hierarchical data by displaying nested rectangles whose sizes correspond to data values, with color encoding categories and group labels. The example demonstrates the d3.treemap layout with SVG rendering, applying a color scale via d3.scaleOrdinal and interactive tooltips on mouse events. It loads external JSON datasets from URLs, using D3's d3.json to fetch data. The visualization highlights the D3 v4 API for hierarchical layouts and data-driven styling, with the option to switch between video game, movie, and Kickstarter datasets.

Vvaynexie
70% match
Loading thumbnail…

Treemap from bl.ocks.org

This treemap visualizes hierarchical data, such as the flare.json dataset, using nested rectangles to represent size values, with an option to re-sort by count. It shows an interactive animation that smoothly transitions between these two aggregation modes. Built with D3.js v4, the code uses `d3.treemap`, `d3.treemapResquarify`, and `d3.hierarchy` to process data, while SVG rendering and `d3.transition()` handle the animated updates. The example also includes a color scale from `d3.schemeCategory20` for visual distinction.

MManoukK
69% match
Loading thumbnail…

d3-voronoi-treemap

The visualization displays global economic output by GDP, showing a treemap that morphs between rectangular and Voronoï layouts. It uses D3.js v4 with the d3-voronoi-treemap plugin, which iteratively partitions space to create weighted Voronoï polygons. Animated transitions between the two layouts are powered by flubber's `fromRect` interpolation, applied via `transition.attrTween` on SVG paths. The data comes from a JSON file of country GDP weights grouped by continent, with each region assigned a distinct color.

KKcnarf
68% match
Loading thumbnail…

Final Project TreeMap

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.

Mmhzahdeh@dons.usfca.edu
68% 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
68% match
Loading thumbnail…

d3.js - A zoomable treemap, dynamic width, with colors and wrap text

This zoomable treemap visualizes the budget of the Seine-Saint-Denis department, grouping datasets by political policy areas. Color encodes the rate of budget change, from negative (purple) to positive (blue), while rectangle size reflects monetary value. The d3.v3 layout uses `d3.layout.treemap` with dynamic width for mobile, animated transitions, and wrapped text labels. Data comes from `budget-data.json`, and the implementation builds on Mike Bostock's treemap and Zan Armstrong's adaptations.

SSigfried
68% 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
68% match