Inventory Cycle with External Data

This is a modified version of the Inventory Cycle animation that uses external data instead of simulating the system in javascript. (The randomized external data for this example was produced with the accompanying events.py script.)

<!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