STOCK EXPIRATION (MODIFYING TOOLTIP)

100%

STOCK EXPIRATION (MODIFYING TOOLTIP)

✓ Published2🌍 Public

Last edited Mar 31, 2020

Created on Nov 18, 2019

This treemap visualizes stock inventory by product category, brand, and lot, with rectangle sizes proportional to remaining quantities. The tooltip displays detailed lot information, including expiration dates and remaining days. Built with D3 v4, the visualization uses the `d3.nest` and `d3.hierarchy` APIs to structure hierarchical data, `d3.treemap` for layout, and custom scales for color-coding items by alert level. SVG rendering and interactive hover effects are implemented through CSS transitions.

AI-generated description

V2 Example taken from here https://bl.ocks.org/amo6002/921e5933211ee996cd49420b21afca2c

MIT Licensed

Similar vizzes

Loading thumbnail…

STOCK EXPIRATION (MODIFYING TOOLTIP)

This interactive treemap visualizes stock expiration data from a CSV, using rectangle size to represent quantities and color to encode alert levels. The hierarchical layout, built with `d3.hierarchy` and `d3.treemap`, lets users click through levels from brand to item to lot. A custom tooltip, styled with CSS and shown on hover, displays detailed metrics like remaining days and lot percentages. The chart uses SVG rendering and smooth transitions via D3’s animation capabilities, with color scales defined per hierarchy level.

GGuillamon

95% match

Loading thumbnail…

STOCK EXPIRATION (SIMPLIFYING)

A hierarchical treemap visualizes stock expiration data, grouping products by brand, category, and lot, with rectangle size reflecting quantity. The view is interactive, allowing users to click parent nodes to drill down into subcategories. Built with D3.js v4, it uses `d3.treemap`, `d3.hierarchy`, and `d3.nest` to structure the data. Color scales encode alert levels and expiration urgency. SVG rendering with hover tooltips displays details. The hierarchy is derived from a CSV with dimensions like item name and expiration days.

GGuillamon

92% match

Loading thumbnail…

STOCK EXPIRATION

This visualization displays the expiration of stock items as an interactive treemap, showing hierarchical relationships across product levels with rectangle sizes scaled by a chosen measure such as budget. Users can zoom into different levels, with each level assigned its own color scale to encode a secondary metric like remaining days. Built with d3.v4, the example uses `d3.hierarchy`, `d3.treemap`, and `d3.nest` to structure the data, while SVG elements and animations support the zoom transitions. Hovering reveals tooltips with detailed information about each item.

GGuillamon

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

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

71% match

Loading thumbnail…

vxv tree

This treemap visualization displays stock symbols grouped by their market industry, with each rectangle’s area proportional to the stock’s relative score. The SVG renders industry categories as colored regions, using a categorical color scale to distinguish sectors. Built with React and D3 v7, the code constructs a hierarchy via `d3.hierarchy` and `.sum()`, then applies `d3.treemap()` to compute layout. Stock tickers appear as text labels within each tile. Data comes from a JSON file containing company metadata, including industry classification and performance metrics.

MMark Lam

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

70% match

Loading thumbnail…

TreeMap with Tooltips

This tree map displays US steel scrap exports by partner country and commodity type, with each rectangle sized according to trade value. The visualization supports drill-down interaction by clicking on a country to reveal its commodity breakdown, plus a reset button to return to the top level. Built with D3 v7, it uses `d3.hierarchy` and `d3.treemap` to compute the layout, renders SVG rectangles with native tooltips via the `title` element, and animates resizing through `transition`. Data comes from an external CSV file containing country, commodity, and value columns.

GGayan Priyadarshana

69% match