Skip to main content
100%

Shelter assault

✓ Published0🌍 Public
Aandrewwitherspoon
Last edited Mar 5, 2019
Created on Mar 4, 2019

A treemap shows the distribution of shelter assault incidents across geographic regions, with rectangle area encoding case counts and color distinguishing regional categories like Africa and the Americas. The visualization animates between two aggregation metrics—case size and equal weighting per incident—using a 750-millisecond transition triggered by radio inputs. Built with D3 v4, it employs `d3.hierarchy`, `d3.treemap`, and the squarified tiling algorithm to recursively subdivide space, while SVG rectangles, clip paths, and text labels render the hierarchical data from a local JSON file.

AI-generated description

A treemap recursively subdivides area into rectangles; the area of any node in the tree corresponds to its value. This example uses color to encode different packages of the Flare visualization toolkit. Treemap design invented by Ben Shneiderman. Squarified algorithm by Bruls, Huizing and van Wijk. Data courtesy Jeff Heer.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/4063582'>Treemap</a>

forked from <a href='http://bl.ocks.org/andrewwitherspoon/'>andrewwitherspoon</a>'s block: <a href='http://bl.ocks.org/andrewwitherspoon/6295da517c2ae4a0ef2e300de3b336f7'>Treemap</a>

forked from <a href='http://bl.ocks.org/andrewwitherspoon/'>andrewwitherspoon</a>'s block: <a href='http://bl.ocks.org/andrewwitherspoon/b2839890d0373b2dd20f1d129e2cadd7'>Google requests treemap</a>

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

Asylum total 2016

A treemap visualizes asylum applications by country in 2016, with the area of each rectangle proportional to the number of asylum seekers from that country. The visualization uses D3 v4 to recursively subdivide a 960×570 SVG canvas into rectangles, with color encoding different countries via a faded categorical color scale. Users can toggle between summing values by size, though the count mode is disabled. The animation and squarified treemap layout are rendered using SVG, with data loaded from a JSON file.

Aandrewwitherspoon
70% match
Loading thumbnail…

HomelessShelters data

The visualization presents HomelessShelters data, showing placements in homeless shelters through an interactive dashboard. It displays categorical summaries of project type and involvement episodes on the left panel, with duration of stay and project start/end dates as time-based intervals in the middle. The tool uses d3.forceSimulation for layout and d3.js for rendering, pulling data from a Google Spreadsheet via the kshf_config.json configuration. It filters records to show only episodes from 2012 to 2016, with unit labels for day counts and time scales.

Aadilyalcin
68% match
Loading thumbnail…

Google requests treemap

This treemap visualizes the geographical distribution of Google requests by recursively subdividing a rectangle into nested rectangles, where the area of each rectangle is proportional to the number of requests for that country, and color encodes continents. The squarified layout algorithm from d3.treemapResquarify arranges the tiles efficiently, while a categorical color scale with a white fade distinguishes the four continent groups—Africa, Americas, Asia, and Europe. The visualization is rendered with SVG and includes an animation effect. The data, sourced from a gist, shows the relative volume of Google requests across countries, with larger areas representing higher request counts. The design is a fork of Mike Bostock's treemap, adapted from the Flare visualization toolkit dataset, with the treemap concept originally invented by Ben Shneiderman and the squarified layout by Bruls, Huizing, and van Wijk.

Aandrewwitherspoon
67% match
Loading thumbnail…

Treemap

A treemap recursively subdivides a rectangle into smaller areas, where each node’s size corresponds to its value. This example encodes Flare visualization toolkit packages by color, using a squarified layout. The D3 v4 code loads hierarchical JSON data, applies `d3.hierarchy` with `.sum()`, and renders SVG rectangles and text with clip paths. A radio button toggles between size-based and count-based sums, triggering animated transitions via `cell.transition()` over 750 milliseconds.

Aandrewwitherspoon
66% 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
65% 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
65% match
Loading thumbnail…

Untitled

A zoomable treemap visualizes crime data from a JSON hierarchy, with rectangles sized by offense counts and colored by rate of change from blue (negative) to red (positive). Users click parent nodes to drill down between broad categories like violent and non-violent crimes, while hover effects reveal child rectangles. The implementation uses `d3.treemap`, `d3.hierarchy`, and `d3.scaleLinear` for color, rendering animated transitions via D3 v4 in React with SVG. A separate `flare.json` dataset and parsed `friends.js` array are included but not shown in the main chart.

LL1EO
65% 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
65% match