Inventory Management

100%

Inventory Management

✓ Published0🌍 Public

Last edited Apr 17, 2017

Created on Apr 17, 2017

This example simulates an inventory management system, showing five warehouses with fluctuating stock levels, incoming deliveries, and periodic donations. The animation runs on a `d3.timer` loop, updating rectangles and lines to reflect the dynamic simulation. SVG elements are pre-drawn and selected via `d3.select`, with their heights and stroke widths bound to computed values like capacity, demand, allocation, and clearance. The code leverages D3 v4’s data joins and attribute manipulation to visualize the flow of goods and stock changes in real time.

AI-generated description

This is a cleaned and simplified version of the core simulation / animation used in the Inventory Management section of the Stitch Fix Algorithms Tour.

The figure was drawn in a visual svg editor (based on a napkin sketch of the system) and the svg file was then copied into the html and cleaned up a bit. The dynamic elements are tagged with ids or classes for selection and manipulation within a d3.timer loop. Their line widths or rectangle heights are based on the timestep values of a dynamic system simulation which is also carried out within the d3.timer loop.

forked from <a href='http://bl.ocks.org/bricof/'>bricof</a>'s block: <a href='http://bl.ocks.org/bricof/1092925a9db66e814059be4345b153a6'>Inventory Management</a>

Similar vizzes

Loading thumbnail…

Inventory Cycle

This example visualizes an inventory cycle by simulating items as they move through a process flow, with each item’s location mapped to x-y coordinates on an SVG canvas. The animation, driven by d3.timer, shows items transitioning between marked points (point 1, 2, 3) along elliptical paths, with each item’s shape (square, triangle, circle) representing its silhouette. The code uses D3 v4 for DOM manipulation and transitions, generating paths via custom functions and updating attributes for each animation frame. The simulation randomly spawns items and updates their positions based on event timestamps, creating a continuous flow through the cycle.

TThanaporn-sk

82% match

Loading thumbnail…

Stock movement

This visualization tracks stock quantities across multiple warehouse categories over time. It displays each movement as a horizontal bar, where green bars show net increases and gray dashed bars show decreases, with remaining totals labeled above. The chart uses D3 v5 with an SVG rendering approach, scaling linear amounts within a point-based time scale and a band scale for stock categories. Data is loaded from a JSON file and parsed with Moment.js for date formatting on the x-axis.

PPedro Ernesto Tramontina

70% match

Loading thumbnail…

ME - Com Timescale

This example visualizes stock movements over time, showing quantities transferred between storage locations as horizontal bars linked by curved paths. The visualization uses a timeline on the x-axis and inventory locations on the y-axis, with each bar’s width proportional to the quantity moved. It implements zooming via d3.zoom on the x-axis and employs d3.scaleTime, d3.scaleBand, and d3.scaleLinear to map the data. The code uses d3.linkHorizontal to draw connecting curves between source and destination points, with data loaded from a local JSON file.

PPedro Ernesto Tramontina

70% match

Loading thumbnail…

New Draw

This chart shows the movement of inventory quantities over time across different stock locations. Each horizontal band represents a storage area, and the length of each green rectangle encodes the quantity moved at a specific timestamp. The visualization uses D3’s `scaleBand` for the y-axis categories and `scalePoint` for the time axis, with rectangles sized by a linear scale. The data comes from a local JSON file, and the SVG output includes a rotated time axis and a custom title.

PPedro Ernesto Tramontina

69% match

Loading thumbnail…

05_D3 Stock show

This example animates a small multi-line stock chart, showing three fictional symbols (AIC, Mada, VIZ) over time. The animation initially draws each line progressively, then transitions into a “horizon” view, where each series is stacked and colored to show its magnitude and direction. The code uses d3.csv to load the data, d3.nest to group by symbol, and d3.svg.line and d3.svg.area to define the shapes. Animated transitions are driven by d3.timer and the transition method, with SVG elements for rendering.

AAbdul Salam Almadani

68% match

Loading thumbnail…

ME - Com Timescale (Zoom)

This visualization shows the flow of inventory movements between stock locations over time, with each bar representing the quantity transferred and its position on the timeline indicating when the movement occurred. The chart uses an SVG rendering with D3 v5, employing `scaleTime` and `scaleBand` to map timestamps and stock names, while `drag` events enable horizontal panning of the timeline. Rectangles sized by `scaleLinear` display quantities, and the data comes from a static JSON file with fields for stock, quantity, and timestamp. The axis labels use the `timeFormat` function to display dates with seconds precision.

PPedro Ernesto Tramontina

67% match

Loading thumbnail…

P3

This example animates monthly stock prices for Microsoft, Amazon, and IBM, initially drawing lines by progressively revealing data points, then transitioning into filled area charts. The visualization uses the D3.js v3 library with SVG rendering, employing the `d3.svg.line` and `d3.svg.area` generators for line and area paths, and `d3.time.scale` and `d3.scale.linear` for axes. The animation leverages `d3.timer` to incrementally update the line, followed by clipping and transitions that convert the lines into stacked horizon charts.

SStephenMaturrin

66% match

Loading thumbnail…

D3 Show Reel

This example animates ten years of monthly stock closing prices for four tech companies, seamlessly transitioning through a series of chart types—lines, horizons, areas, stacked areas, streamgraphs, overlapping areas, grouped bars, stacked bars, bars, and a donut. It uses D3 v3 with SVG and custom transitions, driven by `d3.svg.line`, `d3.svg.area`, and `d3.timer`. The data comes from a CSV file, and the visualization demonstrates D3’s ability to morph between representations without axes, prioritizing motion over information.

AAjayyy

66% match