D3 Examples - Inventory Cycle with External Data

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