Skip to main content
100%

Websites

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

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.

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>

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

mit Licensed

Similar vizzes

Loading thumbnail…

Websites

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.

Aapolan
84% match
Loading thumbnail…

Stock Heatmap

A zoomable treemap displays stock market data, with each block sized by trading volume and colored by percentage gain or loss. The visualization organizes stocks by sector, using a threshold color scale that maps negative returns to reds, neutral to gray, and positive returns to greens. The D3 v3 layout uses `d3.layout.treemap` for the hierarchical structure, and the file also relies on `d3.queue` for asynchronous data loading. The color function uses `d3.scale.threshold` with specific domain intervals, while the interface supports zooming through the parent-child block navigation.

GGerardoFurtado
75% match
Loading thumbnail…

etape5

This interactive visualization animates the monthly stock prices of multiple companies, letting users toggle between three display modes—multiples, stacked, and stream—via radio buttons. Using D3 v3 with SVG, the chart renders price-over-time series for each symbol as colored areas. In the initial "multiples" view, each group is shown in its own small-multiple band with a shared ordinal time axis. Clicking "stacked" vertically offsets the series using a stack layout, and selecting "stream" centers them around a baseline for a streamgraph effect. The transitions between modes are animated, smoothly updating the y-positions of the areas and their group labels.

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

D3.js collapsible tree with boxes

This interactive visualization displays a hierarchical company structure as a collapsible tree diagram, where each node is rendered as a colored box representing different data types such as products, clinical trials, or disease areas. Users can click nodes to expand or collapse branches, with smooth animations transitioning the tree layout. Built with D3.js v3, the visualization uses SVG for rendering, includes zoom and drag functionality via d3.behavior.zoom, and loads hierarchical data from a JSON file. The code also implements custom tooltips and drop shadows to enhance readability of the node information.

1123ATFake
71% match
Loading thumbnail…

D3.js collapsible tree with boxes

This interactive visualization displays a hierarchical company structure as a collapsible tree diagram, where each node is rendered as a colored box representing different data types such as products, clinical trials, or disease areas. Users can click nodes to expand or collapse branches, with smooth animations transitioning the tree layout. Built with D3.js v3, the visualization uses SVG for rendering, includes zoom and drag functionality via d3.behavior.zoom, and loads hierarchical data from a JSON file. The code also implements custom tooltips and drop shadows to enhance readability of the node information.

1123ATFake
71% match
Loading thumbnail…

Interactive Visualisation

A treemap visualizes hierarchical sales data from a UK sales CSV, with regions and towns nested by country. Users hover over rectangles to see a breadcrumb showing the region, town, and total sales value. Built with React and D3 v7, the chart uses `d3.stratify`, `d3.treemap`, and `d3.scaleOrdinal` to structure and color the hierarchy, while SVG rendering and `mouseenter` events drive the interactive labels and layout.

Wwalesiam
71% match