Inventory Cycle

This is a cleaned and simplified version of the inventory cycle animation used in the Stitch Fix Algorithms Tour.

Inventory events (e.g. scan points) are simulated for inventory items over time and their events are their locations within the process flow are mapped to x-y coordinates.

<!DOCTYPE html>
<meta charset="utf-8">

<style>

.first-point-rect {
  fill: #fff;
  stroke: #000;
  stroke-miterlimit: 10;
}

.later-points-rect {
  fill: #fff;
  stroke: #939598;
  stroke-miterlimit: 10;
  stroke-dasharray: 4.023,4.023;
}

.label {
  fill: #939598;
  font-size: 14px;
}

</style>

<body>

<g id="point-1">
  <rect class="first-point-rect" x="200" y="133.4" width="176" height="144"/>
  <text class="label" transform="matrix(1 0 0 1 200.4859 297.0509)">point 1</text>
</g>

<g id="point-2">
  <rect class="later-points-rect" x="392.1" y="429.2" width="38" height="144" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -233.9965 437.497)"/>
  <text class="label" transform="matrix(0.7 -0.7 0.7 0.7 341 458)">point 2</text>
</g>

<g id="point-3">
  <rect class="later-points-rect" x="269" y="480.2" width="38" height="144"/>
  <text class="label" transform="matrix(1 0 0 1 269 472.3668)">point 3</text>
</g>

</svg>

start_inventory_animation()

</script>

https://d3js.org/d3.v4.min.js