summaryrefslogtreecommitdiff
path: root/bubble.html
diff options
context:
space:
mode:
authorPeter Wu <peter@lekensteyn.nl>2014-05-20 23:40:49 +0200
committerPeter Wu <peter@lekensteyn.nl>2014-05-20 23:40:49 +0200
commit7561200fd09d4e741f20ceb4dc6068fbb36e9ff7 (patch)
tree7af72ae4c86b036832828b0091e4bfc392811049 /bubble.html
parent8c871b799aa4b32dbc64dee994e15ed9a670f602 (diff)
downloadd3viz-7561200fd09d4e741f20ceb4dc6068fbb36e9ff7.tar.gz
Initial commit of users/tweets D3 demo
Diffstat (limited to 'bubble.html')
-rw-r--r--bubble.html139
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>