<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <style>
    html{
        height: 100%;
    }
    body {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        margin: 5px;
    }
    .node {
        cursor: pointer;
    }
    .node text {
        font: 10px sans-serif;
        font-weight: bold;
    }
    .node text.atleast {
        font: 8px sans-serif;
        font-weight: bold;
    }
    .link {
        fill: none;
        stroke: #ccc;
        stroke-width: 1.5px;
    }
    div.tooltip {
        position: absolute;
        text-align: center;
        width: 120px;
        padding: 2px;
        font: 12px sans-serif;
        background: lightsteelblue;
        border: 0px;
        border-radius: 8px;
        pointer-events: none;
    }
  </style>
</head>
<body>
  <div id="body"></div>
</body>
<script>
  // global tree data
  window.data = <%= @tree %>;
</script>
<script src="/js/graph.js"></script>
