diff options
| author | Peter Wu <peter@lekensteyn.nl> | 2014-05-21 15:20:33 +0200 |
|---|---|---|
| committer | Peter Wu <peter@lekensteyn.nl> | 2014-05-21 15:20:33 +0200 |
| commit | 28641ec5e1a5e819f92c715ba297d2cf2305941f (patch) | |
| tree | dabebe0a9a7613f28dd91abc8fe6dd778a874cea /spamviz.html | |
| parent | 0334aa5e0051b59ce4050fd306b26119466e2991 (diff) | |
| download | d3viz-28641ec5e1a5e819f92c715ba297d2cf2305941f.tar.gz | |
Better names / title
Diffstat (limited to 'spamviz.html')
| -rw-r--r-- | spamviz.html | 150 |
1 files changed, 150 insertions, 0 deletions
diff --git a/spamviz.html b/spamviz.html new file mode 100644 index 0000000..acebd5e --- /dev/null +++ b/spamviz.html @@ -0,0 +1,150 @@ +<!doctype html> +<html> +<head> +<meta charset="utf-8"> +<title>Network visualization</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 .user-stats, +#infobox .user-info .user-stats li { + padding: 0; + margin: 0; +} +#infobox .user-info .name { + margin: 0; + padding: 0; +} +/* style for svg contents */ +.node { + stroke: #fff; + stroke-width: 0.5px; +} +.node.spam { + fill: orange; +} +.node.ham { + fill: green; +} +.node.neighbor { + fill: #fcc; +} +.node.selected { + fill: #f00; +} +.link { + stroke: #999; + stroke-opacity: .6; + /* fill none to prevent arcs lines being too thick */ + fill: none; +} +.arrow-head { + fill-opacity: .6; +} +.link.neighbor { + stroke: #f99; +} +</style> +<body> + +<div id="infobox"> + <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> + <ul class="user-stats"> + <li>User ID: <span class="userid"></span> + <li>Tweets: <span class="tweet-count"></span> + <li>Spam: <span class="spam-status"></span> + <li>Relations (<span class="relations-from-count"></span> + + <span class="relations-to-count"></span>): + </ul> + <ul class="relations-from"></ul> + <ul class="relations-to"></ul> + </div> + </div> +</div> + +<div id="map"></div> + +<script src="lib/d3.js"></script> +<script src="js/collision.js"></script> +<script src="js/preprocess.js"></script> +<script src="js/spam.js"></script> +</body> +</html> |