1 files changed, 139 insertions, 0 deletions
diff --git a/bubble.html b/bubble.html
new file mode 100644
index 0000000..c0ed167
--- /dev/null
+++ b/bubble.html
@@ -0,0 +1,139 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>D3 demo</title>
+</head>
+<style>
+html, body {
+    padding: 0;
+    margin: 0;
+}
+#map {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+}
+#map svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+}
+/* style for info panel */
+#infobox {
+    border-radius: 10px;
+    background-color: #f0f0f0;
+    width: 240px;
+    height: 340px;
+    position: fixed;
+    left: 6px;
+    top: 6px;
+    opacity: .5;
+    z-index: 2; /* show above the map */
+    display: flex;
+    flex-direction: column;
+}
+#infobox:hover {
+    opacity: 1;
+}
+#infobox .draggable {
+    background-color: #cfcfcf;
+    width: 100%;
+    height: 20px;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    cursor: move;
+}
+#infobox .content {
+    flex: 1; /* fill remaining space */
+    overflow: auto;
+    margin: 6px 3px;
+}
+#infobox .status, #infobox .status li {
+    margin: 0;
+    padding: 0;
+    /* hide too large text unless you hover over it */
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+#infobox .status li:hover {
+    overflow: visible;
+    white-space: normal;
+}
+#infobox:not(.user-locked) .not-auto {
+    display: none;
+}
+#infobox .zoom-level:after {
+    content: "%";
+}
+/* user info */
+#infobox .user-info {
+    /* initially there is no user to show info about */
+    display: none;
+}
+#infobox .user-info .name {
+    margin: 0;
+    padding: 0;
+}
+#infobox .user-info .relations:empty:before {
+    content: "(none)";
+}
+/* style for svg contents */
+.node {
+    stroke: #fff;
+    stroke-width: 0.5px;
+}
+.node.spam {
+    fill: orange;
+}
+.node.ham {
+    fill: green;
+}
+.node.selected {
+    fill: red;
+}
+.link {
+    stroke: #999;
+    stroke-opacity: .6;
+    /* fill none to prevent arcs lines being too thick */
+    fill: none;
+}
+.arrow-head {
+    fill-opacity: .6;
+}
+</style>
+<body>
+
+<div id="infobox">
+    <!-- TODO: make this bar the only initiator of dragging -->
+    <div class="draggable"></div>
+    <div class="content">
+        <ul class="status">
+            <li>Total nodes: <span class="node-count"></span>
+            <li>Total edges: <span class="edge-count"></span>
+            <li>Zoom: <span class="zoom-level"></span> (scroll to zoom)
+            <li>User info does <span class="not-auto">not</span> follow the
+                mouse (double-click node to toggle)
+        </ul>
+        <div class="user-info">
+            <h2 class="name"></h2>
+            <p>
+            Tweets: <span class="tweet-count"></span>.<br>
+            Spam: <span class="spam-status"></span>.<br>
+            Relations (<span class="relations-count"></span>):
+            </p>
+            <ul class="relations"></ul>
+        </div>
+    </div>
+</div>
+
+<div id="map"></div>
+
+<script src="d3.js"></script>
+<script src="collision.js"></script>
+<script src="bubble.js"></script>
+</body>
+</html>