Skip to main content
100%

Websites

✓ Published0🌍 Public
Aapolan
Last edited Oct 31, 2016
Created on Oct 31, 2016

This treemap visualizes a hierarchical dataset of websites using D3’s treemap layout, with cell areas proportional to a numeric value. Hovering over any cell displays a tooltip with details about that website; clicking navigates to the corresponding site. The data is dummy data, and the example builds on a series of forked treemap blocks. The animation shows the treemap’s initial layout transition.

AI-generated description

D3 Treemap with mouseover events to show details about each website and link to the site. PLEASE NOTE - that this is using dummy data!

forked from <a href='http://bl.ocks.org/tomshanley/'>tomshanley</a>'s block: <a href='http://bl.ocks.org/tomshanley/eb91ef68c59e544ee312'>Treemap Websites 2</a>

forked from <a href='http://bl.ocks.org/cis321/'>cis321</a>'s block: <a href='http://bl.ocks.org/cis321/4258be786490840ccfcc450c0883f5d2'>Treemap BVC</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/78875e893cda9c53608d8bc35f5e27cf'>Treemap BVC</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/bd700476cb6982f58fb12aad593ea4d1'>Treemap BVC</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/cc4230402f285f2cea9ab917494c8862'>Treemap BVC</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/239ba46930f9228d8e2033e0a818d440'>Treemap BVC</a>

forked from <a href='http://bl.ocks.org/anonymous/'>anonymous</a>'s block: <a href='http://bl.ocks.org/anonymous/1f2df9dc9b02b5ff9900068cba6cc074'>Treemap BVC</a>

mit Licensed

Similar vizzes

Loading thumbnail…

Websites

This interactive D3 treemap visualizes a dataset of stock market transactions for various companies, using nested rectangles to represent hierarchical data. The view is animated, and hovering over any rectangle reveals details about the corresponding website. The data is dummy data (acciones.csv) containing financial fields such as date, ticker symbol, transaction amount, quantity, and price metrics. Users can click a rectangle to navigate to the associated website. Built with D3 v3, this block forks from a series of treemap examples and includes mouseover events for interactive exploration.

Aapolan
84% 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
76% match
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
74% 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
74% 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
74% 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
74% match
Loading thumbnail…

Untitled

This zoomable treemap visualizes hierarchical data with interactive drill-down navigation. The chart renders rectangles sized by a primary measure, with a grandparent breadcrumb bar at the top for navigating back through levels. Hovering highlights child rects and displays a custom light-blue tooltip with additional metrics. The implementation uses `d3.hierarchy`, `d3.treemap`, and SVG animations, while the data is preprocessed through `d3.nest` to build the nested structure from flat records.

GGuillamon
73% match
Loading thumbnail…

Untitled

This zoomable treemap visualizes hierarchical data with interactive drill-down navigation. The chart renders rectangles sized by a primary measure, with a grandparent breadcrumb bar at the top for navigating back through levels. Hovering highlights child rects and displays a custom light-blue tooltip with additional metrics. The implementation uses `d3.hierarchy`, `d3.treemap`, and SVG animations, while the data is preprocessed through `d3.nest` to build the nested structure from flat records.

GGuillamon
73% match