testrb/admin.html

<html>
    <head>
        <title>Ruleset Admin</title>        
    </head>
    <style>

    path.link {
      fill: none;
      stroke: #aaa;
      stroke-width: 1.5px;
      cursor: pointer;
    }

    path.link.selected {
      stroke-dasharray: 10,10;  
    }

    .linkDisplay {
      font: 11px arial;
      fill: #aaa;
      dy: ".90em";
      letter-spacing: 1.5;
      cursor: pointer;
    }

    .node {
      fill-opacity: 0;
      stroke: steelblue;
      stroke-width: 1px;
      cursor: pointer;
    }

    .sequenceNode {
      fill-opacity: 0;
      stroke: steelblue;
      stroke-width: 1.5px;
      cursor: pointer;
    }

    .id {
      font: 12px arial;
      dy: ".35em";
    }
    
    .axis line {
      fill: none;
      stroke: #000;
      stroke-width: 1px;
      shape-rendering: crispEdges;
    }

    .domain {
      fill: none;
      opacity: 1;
      stroke: #000;
      stroke-width: 1px;
    }

    .timeMarker {
      stroke: #000;
      stroke-width: 1px;
    }

    .axis text {
      font-size: 12px;
    }

    .label {
      fill: #777;
    }

    .time.label {
      font: 500 40px "Helvetica Neue";
      fill: #ddd;
    }

    .time.label.active {
      fill: #aaa;
    }

    .popup {
      fill: white;
      stroke: black;
      stroke-width: 1px;
    }

    .flowPopup {
      fill: white;
      stroke: steelblue;
      stroke-width: 1px;
    }

    .popupBack {
      fill: #aaa;
    }

    .popupProperty {
      font: 12px arial;
      dy: ".35em";
      text-anchor: right;
      font-weight: bold;
    }

    .popupValue {
      font: 12px arial;
      dy: ".35em";
      text-anchor: right;
    }

    </style>
    <body>  
        <script type="text/javascript" src="http://d3js.org/d3.v3.min.js?3.1.9"></script>       
        <script type="text/javascript" src="/durableVisual.js"></script>        
        <script type="text/javascript">     

        var url = window.location.pathname;
        var query = getQueryVariables(window.location.search);
        var state = rulesetState(url);
        rulesetGraph(url, state).createVisual(query.size);
        
        function getQueryVariables(query) {
            query = query.substring(1);
            var result = {};
            var vars = query.split('&');
            var pair;
            for (var i = 0; i < vars.length; i++) {
                pair = vars[i].split('=');
                result[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1]);
            }
            
            return result;
        }
        
        </script>       
    </body>
</html>