Skip to main content
SimilarExport ZIP
100%

Reusable Treemap

✓ Published0🌍 Public
Sscheenmi@gmail.com
Last edited Dec 13, 2022
Created on Dec 11, 2022
Forked from Hello VizHub

This visualization displays the annual energy production of Courant d'Air for 2021, broken down by energy source (wind, solar, water), municipality, and enterprise. Users hover over rectangular cells to explore the hierarchical data through tooltips with production values in MWh. The treemap uses D3's `treemap` layout, `hierarchy`, and `scaleOrdinal` functions to compute and color the nested rectangles, with SVG rectangles and text labels rendered on canvas. Interactivity includes hover effects that adjust rectangle stroke and fill, plus tooltip transitions.

AI-generated description
MIT Licensed

Similar vizzes

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

Untitled

A treemap visualizes the distribution of Czech energy sources, with rectangles sized by value and labeled with names like uhlí, nafta, and plyn. The code uses D3 v4’s `d3.stratify` to build a hierarchy from CSV data and `d3.treemap` to compute layout positions. SVG rectangles and text labels are appended to the chart, with fills styled via a linked stylesheet.

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

Treemap from bl.ocks.org

A treemap visualization displays the hierarchical structure of the flare.json dataset, with nested rectangles sized by either node size or leaf count. The interactive chart allows toggling between these two aggregation modes via radio buttons, triggering a smooth animated transition. Built with D3 v4, the visualization uses `d3.treemap`, `d3.hierarchy`, and `d3.scaleOrdinal` for coloring, rendering SVG cells with clipped text labels and tooltips.

Bbootshine2
71% match
Loading thumbnail…

Untitled

This interactive treemap visualization displays hierarchical data using nested rectangles sized by a primary measure, with color encoding based on an optional secondary metric. The chart supports drill-down navigation through clickable parent nodes and shows tooltips on hover. Built with D3 v4, the implementation uses `d3.hierarchy`, `d3.treemap`, and `d3.nest` to transform flat data into a navigable structure, rendering SVG elements with smooth animated transitions between zoom levels.

Ttareefroustom
70% match
Loading thumbnail…

Treemap

A treemap recursively subdivides a rectangle into smaller rectangles, with each node's area proportional to its value, encoding the hierarchical structure and size of the Flare visualization toolkit's packages through both position and color. The visualization includes an interactive radio-button control that toggles between summing leaf sizes and counting leaves, triggering a 750-millisecond transition that animates rectangle boundaries using D3 v4's `d3.treemap` with the `d3.treemapResquarify` tiling algorithm. Rendered as SVG, the code uses `d3.hierarchy`, `d3.scaleOrdinal` with the `schemeCategory20` color palette, and `d3.json` to load the packaged flare.json dataset.

Mmbostock
70% match
Loading thumbnail…

Treemap2

A hierarchical treemap displays plant nutrient data, using colored rectangles to represent crop categories and individual species. Clicking a cell zooms into that branch, while the orange top label navigates back. The visualization uses the d3.v3 treemap layout with a custom recursive layout and accumulation function for zooming. Data is loaded from a CSV file via d3.csv, and transitions animate the zooming interaction.

MMariamArabi
70% match
Loading thumbnail…

Vizualisation

This visualization displays renewable energy levels by country on a natural Earth projection map, with a color legend categorizing ordinal data. It uses d3.geoPath and d3.geoNaturalEarth1 to render world shapes, d3.scaleOrdinal with schemeSpectral for color mapping, and d3.zoom for panning. Data comes from a TSV file joined to TopoJSON world atlas geometries via d3.tsv and d3.json. Hovering highlights countries in red, and tooltips show country names and renewable values.

KKahlaoui-Ismail
70% match