traffic.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="app.css">
  </head>
  <body>
  </body>

<script>
  var states = [
  	{label:'a', y:30, x:10},
  	{label:'b', y:30, x:30},
  	{label:'c', y:30, x:90},
  	{label:'d', y:30, x:70},
  	{label:'queue', y:30, x:50},
  ]

  var transitions = [

  	{label: 'x', y: 20, x: 30,
  		pre: {a: 1},
  		post: {
  			queue: 1,
  			b: 1
  		}
  	},

  	{label: 'y', y: 40, x: 30,
  		pre: {b: 1, queue: 1},
  		post: {a: 1}
  	},

  	{label: 'w', y: 20, x: 70,
  		pre: {queue: 1, d: 1},
  		post: {c: 1}
  	},

  	{label: 'z', y: 40, x: 70,
  		pre: {c: 1},
  		post: {d: 1, queue: 1}}
  ];

  var marking = {a: 1, d: 1};
  
  function scaleModel(sx, sy) {
  	(states.concat(transitions)).forEach(function(s){s.x *= sx; s.y *= sy})	
  }

  scaleModel(4, 4);
  
</script>
  
  <script src="bundle.js"></script>
</html>