Treemap navigator II (dbpedia)

100%

Treemap navigator II (dbpedia)

✓ Published0🌍 Public

Last edited Mar 11, 2017

Created on Mar 11, 2017

An interactive treemap navigator visualizes the DBpedia ontology, showing hierarchical categories as colored rectangles. Users can drag subtrees to reposition them, click nodes to explode open subtrees, and click again to collapse them, with links connecting parent and child subtrees. The visualization uses D3 v3 layout, drag, zoom, and transition APIs, rendering SVG paths and rectangles with section-specific colors. Data loads from a remote JSON file describing the ontology structure, and the coordinate-based treemap layout is recalculated on each interaction.

AI-generated description

An improved treemap navigator, displaying the ontology of DBpedia.

Besides some DBpedia-specific customization (e.g. colors), the navigator now features a better drag behavior and a way to collapse open subtrees (it is sufficient to click on an exploded node to collapse it back).

forked from <a href='http://bl.ocks.org/nitaku/'>nitaku</a>'s block: <a href='http://bl.ocks.org/nitaku/dd4dbb5dd80cad8662d0'>Treemap navigator II (dbpedia)</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Treemap

This interactive treemap visualizes the hierarchical structure of a JSON dataset with nested values. It uses D3.js to render nested rectangles, with each cell colored by category via `d3.scale.category20c`. Clicking a cell triggers a smooth animated transition that expands the selected branch, revealing its children with adjusted positions and sizes. The visualization employs `d3.layout.treemap` for layout calculations and uses JSON data loaded via `d3.json`.

TThanaporn-sk

80% 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

75% 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

75% match

Loading thumbnail…

Untitled

This interactive treemap visualizes a hierarchical dataset with nested rectangles sized by a primary numeric measure and colored by a secondary metric. Users can hover over nodes to see tooltips with additional data, while clicking parent and grandparent rectangles zooms into deeper levels of the hierarchy. Built with D3 v4, the implementation uses `d3.hierarchy`, `d3.treemap`, and `d3.nest` to aggregate data, with SVG rendering and smooth transitions between zoom states. The hover effects and tooltip functionality are implemented with CSS and JavaScript event handlers.

GGuillamon

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

71% match

Loading thumbnail…

Zoomable treemap template

This zoomable treemap displays hierarchical data through nested rectangles sized by value, allowing drill-down navigation to explore subregions. It visualizes Indian education statistics from a JSON file, grouping entries by region and subregion. The example uses d3.v3 with the d3.layout.treemap API and SVG rendering, implementing custom recursive layout and accumulate functions. Click transitions animate zooming between hierarchy levels, with an orange breadcrumb bar showing the current path and enabling navigation back to parent nodes.

Aabhineetsingh10

71% match

Loading thumbnail…

Zoomable treemap template

Built with D3.js v3 and jQuery, this interactive visualization presents education resource data as a zoomable treemap. The code uses `d3.layout.treemap` to hierarchically arrange rectangles by value, colored via `d3.scale.category20c`, with click-to-transition zooming between parent and child nodes. Data is loaded from a JSON array of entries containing subject, region, subregion, and count values, which the treemap aggregates and lays out recursively. The SVG renders responsive rectangles and a grandparent breadcrumb header, demonstrating a reusable template for hierarchical exploration.

Aabhineetsingh10

71% 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