<!--
Download sources/binaries at https://github.com/Kappa-Dev/KaSim<Br>
<Br>
Command line is: KaSa add_remove.ka --influence-map-format HTML --output-directory output -syntax 4<Br>
<Br>
This file contains the description of the influence map in dot.<Br>
Please use graphviz (http://www.graphviz.org) or OmniGraffle to export it to a PDF<Br>
<Br>
-->
<!doctype html>

<html>
<head>
  <meta charset="utf-8">
  <title>Influence_map</title>
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script src="http://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.min.js" charset="utf-8"></script>
  <style>
    dt {float: left; clear: left; width: 20em;}
    dd {font-weight: bold; margin: 0 0 0 21em;}
    .node rect {stroke: #333; fill: #fff;}
    .edgePath path {stroke: #333; fill: #333; stroke-width: 1.5px;}
  </style>
</head>
<body>
  <div class="container">
  <h1>Influence_map</h1>
  <svg width=960 height=600><g/></svg>
  <script>
  // Create a new directed graph
  var g = new dagreD3.graphlib.Graph().setGraph({});
  g.setNode(1, { label: "label", shape: "rect", style: "fill: #8ce"  });
  g.setNode(2, { label: "1:A(x{p}[.])->A(x{u}[.])", shape: "rect", style: "fill: #8ce"  });
  g.setNode(3, { label: "2:B(x{u}[.])->B(x{p}[.])", shape: "rect", style: "fill: #8ce"  });
  g.setNode(4, { label: "3:B(x{p}[.])->B(x{u}[.])", shape: "rect", style: "fill: #8ce"  });
  g.setEdge(2,1,{ label: "[0->0]", style: "stroke: #0f0; fill: white", arrowheadStyle: "fill: #0f0; stroke: #0f0" });
  g.setEdge(3,4,{ label: "[0->0]", style: "stroke: #0f0; fill: white", arrowheadStyle: "fill: #0f0; stroke: #0f0" });
  g.setEdge(3,1,{ label: "[0->1]", style: "stroke: #0f0; fill: white", arrowheadStyle: "fill: #0f0; stroke: #0f0" });
  g.setEdge(4,3,{ label: "[0->0]", style: "stroke: #0f0; fill: white", arrowheadStyle: "fill: #0f0; stroke: #0f0" });
  g.setEdge(4,1,{ label: "[0->1]", style: "stroke: #f00; fill: white", arrowheadStyle: "fill: #f00; stroke: #f00" });
  g.setEdge(1,2,{ label: "[2->0]", style: "stroke: #0f0; fill: white", arrowheadStyle: "fill: #0f0; stroke: #0f0" });
  g.setEdge(1,4,{ label: "[1->0]", style: "stroke: #f00; fill: white", arrowheadStyle: "fill: #f00; stroke: #f00" });
  var svg = d3.select("svg"),inner = svg.select("g");
  // Set up zoom support
  var zoom = d3.behavior.zoom().on("zoom", function() {
  inner.attr("transform", "translate(" + d3.event.translate + ")" +
  "scale(" + d3.event.scale + ")");
  });
  svg.call(zoom);// Create the renderer
   var render = new dagreD3.render();
  // Run the renderer. This is what draws the final graph.
  render(inner, g);
  // Center the graph
  var initialScale = 0.75;
  zoom
  .translate([(svg.attr("width") - g.graph().width * initialScale) / 2, 20])
  .scale(initialScale)
  .event(svg);
  svg.attr('height', g.graph().height * initialScale + 40);
  </script>
  </div>
  </body>
</html>
