dc.graph
Version:
Graph visualizations integrated with crossfilter and dc.js
113 lines (102 loc) • 4.5 kB
HTML
<html>
<head>
<title>Vizgems co-viewer</title>
<meta charset="UTF-8">
<link rel="icon" href="img/favicon.png" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="css/dc.graph.css"/>
<link rel="stylesheet" type="text/css" href="css/vizgems.css"/>
<link rel="stylesheet" type="text/css" href="css/dc.css"/>
<link rel="stylesheet" type="text/css" href="css/fontawesome-all.css"/>
<script type="text/javascript" src="js/d3.js"></script>
<script type="text/javascript" src="js/crossfilter.js"></script>
<script type="text/javascript" src="js/dc.js"></script>
<script type="text/javascript" src="js/chart.registry.js"></script>
<script type="text/javascript" src="js/queue.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/lodash.js"></script>
<script type="text/javascript" src="js/cola.js"></script>
<script type="text/javascript" src="js/dc.graph.js"></script>
<script type="text/javascript" src="js/colorbrewer.js"></script>
<script type="text/javascript" src="js/timeline.js"></script>
<script type="text/javascript" src="js/runner.js"></script>
<script type="text/javascript" src="js/querystring.js"></script>
<script type="text/javascript" src="js/sync-url-options.js"></script>
<script type="text/javascript" src="js/dc.graph.tracker.domain.js"></script>
</head>
<body>
<div id="graph" class="chart"></div>
<div id="overlay">
<div id="run-indicator" style="display: none">
running
</div>
<label id="tenant-option" style="display:none">Tenant: <select id="tenant-select"></select></label>
<div id="time-stuff">
<span id="last-button" class="play-control"><i class="fas fa-step-backward"></i></span>
<span id="play-button" class="play-control"><i class="fas fa-play"></i></span>
<span id="next-button" class="play-control"><i class="fas fa-step-forward"></i></span>
<span id="timeline" style="margin: 5px 0px"></span>
</div>
<div id="type-views">
<a href="javascript:choose_view('user')">user view</a>
<a href="javascript:choose_view('image')">image view</a>
<a href="javascript:choose_view('all')">view all</a>
</div>
<div class="heading">
stats (<a id="show-stats" href="javascript:toggle_stats()"></a>)
</div>
<div id="graph-stats">
<table>
<tr>
<td>Showing</td>
<td><span id="shown-nodes">0/0</span> nodes</td>
</tr>
<tr>
<td></td>
<td><span id="shown-edges">0/0</span> edges</td>
</tr>
<tr>
<td>Time</td>
<td><span id="time-last">0</span>s (last)</td>
</tr>
<tr>
<td></td>
<td><span id="time-avg">0</span>s (avg)</td>
</tr>
</table>
</div>
<div class="heading">
options (<a id="show-options" href="javascript:toggle_options()"></a>)
</div>
<div id="options">
<div id="ostype-select"></div>
<div style="float: left; margin-left: 2px">
<div><label><input type="checkbox" id="use-colors">Use Colors</label></div>
<div><label><input type="checkbox" id="use-shapes">Use Shapes</label></div>
<div><label><input type="checkbox" id="show-arrows">Show Arrows</label></div>
<div style="margin-left: 5px"><label>Staged: <select id="stage-transitions">
<option value="none">None</option>
<option value="insmod">Insert-Modify</option>
<option value="modins">Modify-Insert</option>
</select></label></div>
<!--div><label><input type="checkbox" id="show-steps">Show Layout Steps</label></div-->
<!--div><label><input type="checkbox" id="layout-unchanged">Always Redraw</label></div-->
<!--div><label><input type="checkbox" id="fit-labels">Fit Labels</label></div-->
<div><label><input type="checkbox" id="layout-vms">Layout VMs</label></div>
<div><label><input type="checkbox" id="highlight-neighbors">Highlight Neighbors</label></div>
<div style="margin-left: 5px"><label>Flow: <select id="flow-direction">
<option value="none">None</option>
<option value="x">X</option>
<option value="y">Y</option>
</select></label></div>
</div>
</div>
</div>
<!-- an area, which is a "table", containing a bottom-aligned "cell", of variable height -->
<div id="charts-area">
<div id="charts-positioner">
<div id="charts-container">
</div>
</div>
</div>
<script type="text/javascript" src="js/vizgems.js"></script>