--- /dev/null
+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
--- /dev/null
+/**
+ * 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();
+
+
--- /dev/null
+<html class="no-js" lang="fr" dir="ltr"><!--<![endif]-->
+ <head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width,initial-scale=1" />
+ <title>Graphnion demo</title>
+
+ <!-- Grahpnion legacy CSS -->
+ <!-- <link type="text/css" rel="stylesheet" href="../bw_graphs.css" media="all" /> -->
+
+ <!-- demo CSS -->
+ <link type="text/css" rel="stylesheet" href="graphnion-demo.css" media="all" />
+ </head>
+ <body>
+
+ <header>
+ <h1>Graphnion demo</h1>
+ <p>Graphnion is a JavaScript library to display graphs for Tor relays</p>
+ </header>
+
+ <section>
+ <h2>Pie charts</h2>
+
+ <div class="pie-chart">
+ <h3>Consensus weight</h3>
+ <div id="graphnion-pie-consensus" class="graphnion-pie"></div>
+ </div>
+
+ <div class="pie-chart">
+ <h3>Exit probabylity</h3>
+ <div id="graphnion-pie-exit" class="graphnion-pie"></div>
+ </div>
+ </section>
+
+ <section>
+ <h2>Bandwidth charts</h2>
+ <div id="graphnion-bandwidth"></div>
+ </section>
+
+ <footer>
+ <p>
+ Sources: <a href="https://nos-oignons.net/gitweb/graphnion.git">Git repository</a> on <a href="https://nos-oignons.net">Nos-oignons.net</a>.
+ </p>
+ </footer>
+
+ <!-- D3 library -->
+ <script src="http://d3js.org/d3.v3.min.js"></script>
+
+ <!-- Grahpnion legacy JS -->
+ <script src="../relays.js"></script>
+ <script src="../l10n.en.js"></script>
+ <script src="../l10n.fr.js"></script>
+ <script src="../bw_graphs.js"></script>
+
+
+ <!-- Grahpnion JS -->
+ <script src="../graphnion.js"></script>
+
+ <!-- demo JS -->
+ <script src="graphnion-demo.js"></script>
+
+ </body>
+</html>
projects / graphnion.git / commitdiff