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.
xxxxxxxxxx
<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>
<svg width="960" height="500" viewBox="-150 0 960 665">
<g id="inventory-cycle">
</g>
<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>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="inventory-cycle.js"></script>
<script>
start_inventory_animation()
</script>
https://d3js.org/d3.v4.min.js