STOCK EXPIRATION (SIMPLIFYING)

100%

STOCK EXPIRATION (SIMPLIFYING)

✓ Published0🌍 Public

Last edited Mar 30, 2020

Created on Mar 28, 2020

Forked from STOCK EXPIRATION (MODIFYING TOOLTIP)

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.

AI-generated description

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

MIT Licensed

Similar vizzes

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

93% match

Loading thumbnail…

STOCK EXPIRATION (MODIFYING TOOLTIP)

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.

GGuillamon

92% match

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

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

71% match

Loading thumbnail…

excercise_company_structure_with_d3

This example shows a hierarchical company structure as a color-coded tree diagram, with a root “HEAD” node branching into two categories: where items are referenced and what items are using. Each category is further grouped by type (Layout, CustomField, ApexClass), revealing individual labeled leaves with IDs. The code builds the data through `d3.hierarchy` and `d3.tree`, then renders nodes as SVG rectangles with embedded HTML via `foreignObject`. Node colors vary by depth using a helper function, while edges are drawn as paths. The visualization uses `d3.select` for DOM manipulation and static constants for dimensions and styling.

GGusnaRWX

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

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

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

69% match