From e35f3a55a886a620f5db438d73636056dc8320bb Mon Sep 17 00:00:00 2001 From: opi Date: Wed, 11 Mar 2015 00:45:37 +0100 Subject: [PATCH] Add demo --- demo/graphnion-demo.css | 42 ++++++++++++++++++++++++++++ demo/graphnion-demo.js | 38 +++++++++++++++++++++++++ demo/index.html | 62 +++++++++++++++++++++++++++++++++++++++++ 3 files changed, 142 insertions(+) create mode 100644 demo/graphnion-demo.css create mode 100644 demo/graphnion-demo.js create mode 100644 demo/index.html diff --git a/demo/graphnion-demo.css b/demo/graphnion-demo.css new file mode 100644 index 0000000..d86c9ed --- /dev/null +++ b/demo/graphnion-demo.css @@ -0,0 +1,42 @@ +body { + background: #ddd; + max-width: 55em; + margin: auto; +} + + +h1, h2 {color: #57075F;} +header, +section, +footer {margin: 1em 2em;padding: 1em 2em;} +header p {font-style: italic;} +section {background: #fff;} + +.pie-chart { + display: inline-block; + vertical-align: top; + width: 48%; + text-align: center; +} +.pie-chart + .pie-chart { + border-left: 2px solid #eee; + margin-left: 1%; + padding-left: 1%; +} + +#graphnion-bandwidth {} +#graphnion-bandwidth form {text-align: center;} +#graphnion-bandwidth form div {display: inline-block;} + + +.axis path, +.axis line { + fill: none; + stroke: #ddd; + shape-rendering: crispEdges; +} + +.tick text, +.legend text { + fill: #666; +} \ No newline at end of file diff --git a/demo/graphnion-demo.js b/demo/graphnion-demo.js new file mode 100644 index 0000000..c3e9364 --- /dev/null +++ b/demo/graphnion-demo.js @@ -0,0 +1,38 @@ +/** + * Consensus and exit probability pies + */ + +// Minimal example for consensus pie chart +Graphnion.pie( + '#graphnion-pie-consensus', + { + 'type' : 'consensus', + 'onionoo' : { + 'contact' : 'adminsys@nos-oignons.net', + }, + } +); + +// Full example for exit probability pie chart +Graphnion.pie( + '#graphnion-pie-exit', + { + 'type' : 'exit', + 'onionoo' : { + 'family' : 'EFAE44728264982224445E96214C15F9075DEE1D' + }, + 'colors' : { + 'relays' : "#ffa430", + 'others' : "#57075f", + }, + 'size' : '250', + } +); + + +/** + * Bandwidth graph + */ +new BwDrawer("#graphnion-bandwidth").draw(); + + diff --git a/demo/index.html b/demo/index.html new file mode 100644 index 0000000..595dcd3 --- /dev/null +++ b/demo/index.html @@ -0,0 +1,62 @@ + + + + + Graphnion demo + + + + + + + + + +
+

Graphnion demo

+

Graphnion is a JavaScript library to display graphs for Tor relays

+
+ +
+

Pie charts

+ +
+

Consensus weight

+
+
+ +
+

Exit probabylity

+
+
+
+ +
+

Bandwidth charts

+
+
+ + + + + + + + + + + + + + + + + + + + + -- 2.39.2