[tor-commits] [metrics-tasks/master] Check in Thematic Mapping API prototype.
karsten at torproject.org
karsten at torproject.org
Tue Mar 15 15:43:55 UTC 2011
commit b76dd60885767c8246b732861f41af5489680d04
Author: Karsten Loesing <karsten.loesing at gmx.net>
Date: Tue Mar 15 16:43:22 2011 +0100
Check in Thematic Mapping API prototype.
---
task-2762/README | 19 ++
task-2762/css/stylesheet-ltr.css | 522 ++++++++++++++++++++++++++++++++++++++
task-2762/images/favicon.ico | Bin 0 -> 1150 bytes
task-2762/images/top-left.png | Bin 0 -> 11137 bytes
task-2762/images/top-middle.png | Bin 0 -> 240 bytes
task-2762/images/top-right.png | Bin 0 -> 607 bytes
task-2762/index.html | 93 +++++++
7 files changed, 634 insertions(+), 0 deletions(-)
diff --git a/task-2762/README b/task-2762/README
new file mode 100644
index 0000000..fccd988
--- /dev/null
+++ b/task-2762/README
@@ -0,0 +1,19 @@
+Thematic Mapping API prototype for Tor metrics data
+---------------------------------------------------
+
+ - Download the Thematic Mapping API JavaScript code from
+ http://thematicmapping.org/ and place it in this directory. In
+ particular, you'll need tmapi-0.1.js and worldborders.js.
+
+ - Create your own Google Spreadsheet and replace the link
+ "https://spreadsheets.google.com/tq?key=0AujpbDQoBXkX..." in index.html
+ with a link to your spreadsheet. Feel free to use the existing link,
+ but note that you cannot change the data in it.
+
+ - Register your domain at Google for using the Google Earth Plug-In on
+ your website. If you don't, the plugin won't load on your website, but
+ it will tell you where to register.
+
+ - Make your website available via thttpd, Apache, or the web server of
+ your choice.
+
diff --git a/task-2762/css/stylesheet-ltr.css b/task-2762/css/stylesheet-ltr.css
new file mode 100644
index 0000000..20a6b7f
--- /dev/null
+++ b/task-2762/css/stylesheet-ltr.css
@@ -0,0 +1,522 @@
+body {
+ background-color: white;
+ margin-top: 0px;
+ font-family: Arial, Helvetica, sans-serif;
+ font-size: 1em;
+ font-style: normal;
+ color: #000000;
+ padding-top: 0px;
+}
+
+/* images */
+
+img {
+ border: 0;
+}
+
+
+li {
+ margin: .2em .2em .2em 1em;
+}
+
+/* this centers the page */
+
+.center {
+ text-align: center;
+ background-color: white;
+ margin: 0px auto 0 auto;
+ width: 85%;
+}
+
+.center table {
+ margin-left: auto;
+ margin-right: auto;
+ text-align: left;
+}
+
+/* for the shadow box */
+
+table.shadowbox {
+ width: 788px;
+ border-collapse: collapse;
+ padding: 0;
+ margin-bottom: 2em;
+}
+
+table.shadowbox td {
+ margin: 0;
+ padding: 0;
+}
+
+/* spacer */
+
+td.spacer {
+ width: 110px;
+}
+
+div.banner {
+ text-align: center;
+ height: 79px;
+ margin-bottom: 10px;
+ width:100%;
+}
+
+table.table-banner {
+ margin: 0 auto 0 auto;
+ background-image: url("images/tor_mast.gif");
+ background-repeat: no-repeat;
+}
+
+div.bottom {
+ font-size: 0.8em;
+ margin-top: 0.5cm;
+ margin-left: 1em;
+ margin-right: 1em;
+ text-align: center;
+}
+
+/* the sidebars */
+
+div.sidebar {
+ -moz-border-radius: 5px;
+ -khtml-border-radius: 5px;
+ background-color: #e5e5e5;
+ float: right;
+ margin: 0 0 10px 10px;
+ /* border: 2px solid #666; */
+ padding: 10px;
+ width: 150px;
+ text-align: center;
+}
+
+div.sidebar-left {
+ -moz-border-radius: 5px;
+ -khtml-border-radius: 5px;
+ background-color: #e5e5e5;
+ float: right;
+ margin: 0 0 5px 5px;
+ /* border: 2px solid #666; */
+ padding: 5px;
+ width: 275px;
+ text-align: left;
+}
+
+/* The main column (left text) */
+
+div.main-column {
+ padding: 15px 0 10px 10px;
+ text-indent: 0pt;
+ font-size: 1em;
+ direction: ltr;
+ text-align: left;
+}
+
+/* formatting styles */
+
+h1 {
+ font-size: 1.6em;
+ margin-bottom: 0.5em;
+}
+
+h2 {
+ font-size: 1.4em;
+ margin-bottom: 0em;
+ font-weight: bold;
+ margin-top: 0;
+}
+
+h3 {
+ font-size: 1.2em;
+ margin-bottom: 0em;
+ font-weight: bold;
+ margin-top: 0;
+}
+
+h4 {
+ font-size: 1.1em;
+ margin-bottom: 0em;
+ font-weight: bold;
+ margin-top: 0;
+}
+
+h5 {
+ font-size: 1.0em;
+ margin-bottom: 0em;
+ font-weight: bold;
+ margin-top: 0;
+}
+
+p {
+ margin-top: 0;
+ margin-bottom: 1em;
+}
+
+a:link {
+ color: blue;
+ font-size: 1em;
+}
+
+a:visited {
+ color: purple;
+ font-size: 1em;
+}
+
+a.anchor:link {
+ font-size: 1em;
+ color: black;
+ font-weight: bold;
+ text-decoration: none;
+}
+
+a.anchor:visited {
+ font-size: 1em;
+ color: black;
+ font-weight: bold;
+ text-decoration: none;
+}
+
+a.anchor {
+ font-size: 1em;
+ color: black;
+ font-weight: bold;
+ text-decoration: none;
+}
+
+td {
+ vertical-align: top;
+}
+
+a.smalllink {
+ font-size: 0.8em;
+}
+
+/* the banner */
+
+table.banner {
+ width: 100%;
+ height: 79px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+td.banner-left {
+ /* This is done with an <img> in the HTML so it can be clickable
+ background-image: url("/images/top-left.png");
+ background-repeat: no-repeat; */
+ width: 193px;
+}
+
+td.banner-middle {
+ background-color: #00802B;
+ background-image: url("/images/top-middle.png");
+ background-repeat: repeat-x;
+ vertical-align: bottom;
+ padding-bottom: 10px;
+ color: white;
+ font-weight: bold;
+ font-size: 1.2em;
+}
+
+td.banner-middle a, td.banner-middle a:visited {
+ margin-right: 5px;
+ color: white;
+ font-weight: bold;
+ font-size: 1em;
+}
+
+td.banner-middle a:hover {
+ color: #FF7F00;
+ font-weight: bold;
+ font-size: 1em;
+}
+
+td.banner-right {
+ background-image: url("/images/top-right.png");
+ background-repeat: no-repeat;
+ width: 15px;
+ background-position: right;
+ padding-top: 8px;
+}
+
+.banner-middle a.current {
+ text-decoration: none;
+ color: #FF7F00;
+ font-weight: bold;
+ font-size: 1em;
+ width: auto;
+ left: -50px;
+}
+
+.donatebutton {
+ width: auto;
+ text-align: center;
+}
+
+.donatebutton a {
+ -moz-border-radius: 5px;
+ -khtml-border-radius: 5px;
+ margin: 10px 0 0 0;
+ font-weight: bold;
+ display: block;
+ padding: 6px;
+ background-color: #00802B;
+ border-top: 1px solid #00A838;
+ border-left: 1px solid #00A838;
+ border-bottom: 1px solid #00591E;
+ border-right: 1px solid #00591E;
+ color: #FFFFFF;
+}
+
+.donatebutton a:hover {
+ color: orange;
+}
+
+.donatebutton a:active {
+ color: orange;
+}
+
+.downloadbutton {
+ width: auto;
+ text-align: center;
+}
+
+.downloadbutton a {
+ -moz-border-radius: 5px;
+ -khtml-border-radius: 5px;
+ margin: 10px 0 0 0;
+ font-weight: bold;
+ display: block;
+ padding: 6px;
+ background-color: orange;
+ color: #FFFFFF;
+}
+
+.downloadbutton a:hover {
+ color: green;
+}
+
+.donatebutton a:active {
+ color: green;
+}
+
+/* these styles are for the menu on the gui contest pages */
+
+.guileft {
+ width: 25%;
+ float: left;
+ padding: 0;
+ margin: 0;
+}
+
+.guimenu {
+ border: 1px solid #AAA6AB;
+ background-color: #E2DFE3;
+ margin: 0 15px 15px 0;
+ padding: 0;
+}
+
+.guimenuinner a {
+ display: block;
+ text-decoration: none;
+ padding: 2px 0px 0px 12px;
+ margin: 0 0 0 0px;
+ color: #333333;
+}
+
+.guimenuinner a:visited {
+ color: #333333;
+}
+
+.guimenuinner a:hover {
+ background-image: url(gui/img/arrow.png);
+ background-repeat: no-repeat;
+ background-position: left;
+ color: #EF8012;
+}
+
+.guimenuinner a.on {
+ background-image: url(gui/img/arrow.png);
+ background-repeat: no-repeat;
+ background-position: left;
+ color: #EF8012;
+}
+
+
+.guimenu h1 {
+ width: 85%;
+ font-size: 16px;
+ margin: 0 0 8px 0;
+ padding: 0;
+ border-bottom: 1px solid #AAA6AB;
+}
+
+.curveleft {
+ background-image: url(gui/img/corner-topleft.png);
+ background-repeat: no-repeat;
+ background-position: top left;
+ margin: -1px;
+}
+
+.curveright {
+ background-image: url(gui/img/corner-topright.png);
+ background-repeat: no-repeat;
+ background-position: top right;
+}
+
+.guimenuinner {
+
+ padding: 0 10px 0 10px;
+}
+
+
+.curvebottomleft {
+ background-image: url(gui/img/corner-bottomleft.png);
+ background-repeat: no-repeat;
+ background-position: bottom left;
+ margin: -1px;
+}
+
+.curvebottomright {
+ background-image: url(gui/img/corner-bottomright.png);
+ background-repeat: no-repeat;
+ background-position: bottom right;
+}
+
+table.mirrors {
+ margin: 0 auto;
+ border-width: 3px;
+ border-color: gray;
+ border-style: ridge;
+ border-collapse: collapse;
+}
+table.mirrors th {
+ border: 1px solid gray;
+ background-color: #DDDDDD;
+}
+table.mirrors td {
+ border: 1px solid gray;
+ padding: 4px;
+}
+
+acronym {
+ border-bottom: none;
+}
+
+dt {
+ font-weight: bolder;
+ font-style: italic;
+}
+
+.nb {
+ -moz-border-radius: 5px;
+ -khtml-border-radius: 5px;
+ background-color:#EEEEFF;
+ border:1px solid #000000;
+ color:black;
+ font-size:10pt;
+ font-weight:bold;
+ margin:10px 0;
+ padding:15px 20px;
+ text-align:justify;
+}
+
+.warning {
+ -moz-border-radius: 5px;
+ -khtml-border-radius: 5px;
+ background-color:#FFFFFF;
+ background-image:url(images/distros/warning.png);
+ background-position:15px center;
+ background-repeat:no-repeat;
+ border:2px solid #FF0000;
+ color:#1A1A1A;
+ font-size:10pt;
+ font-weight:bold;
+ margin:10px 0;
+ padding:15px 20px 15px 67px;
+ text-align:justify;
+}
+
+hr {
+ background-color:#002200;
+ color:#666666;
+ font-size:1px;
+ height:1px;
+ line-height:0;
+ margin:15px 0 5px;
+}
+
+.underline {
+ border-bottom:1px solid #000022;
+ margin:10px 0 20px;
+ padding:5px 0;
+}
+
+div#graphmenu {
+ float:left;
+ margin-top:20px;
+ width:100%;
+ padding:5px;
+}
+
+#graphmenu div.formrow {
+ clear:both;
+}
+
+#graphmenu .formrow p {
+ float:left;
+}
+
+#graphmenu .formrow label {
+ float:left;
+ width:100px;
+ margin:0px 5px 0px 0px;
+ text-align:right;
+}
+
+#graphmenu .formrow label.graphname {
+ float:left;
+ width:100px;
+ margin:0px;
+ text-align:right;
+}
+
+#graphmenu .formrow label.startend {
+ width:50px;
+ margin:0px 10px 0px 0px;
+ text-align:right;
+}
+
+#graphmenu .formrow input {
+ float:left;width:100px;
+}
+
+#graphmenu .formrow input.submit {
+ width:100px;
+ margin:0px 0px 0px 10px;
+}
+
+#graphmenu .break {
+ clear:both;
+}
+
+#graphmenu .note {
+ float:left;
+ font-size:.8em;
+ font-style:italic;
+}
+
+#graphmenu div#torperfopts {
+ float:left;
+}
+
+#graphmenu div#gettoropts {
+ float:left;
+}
+
+#graphmenu div#regularopts {
+ float:left;
+}
+
+.error {
+ color:red;
+}
diff --git a/task-2762/images/favicon.ico b/task-2762/images/favicon.ico
new file mode 100644
index 0000000..48060b1
Binary files /dev/null and b/task-2762/images/favicon.ico differ
diff --git a/task-2762/images/top-left.png b/task-2762/images/top-left.png
new file mode 100644
index 0000000..9927355
Binary files /dev/null and b/task-2762/images/top-left.png differ
diff --git a/task-2762/images/top-middle.png b/task-2762/images/top-middle.png
new file mode 100644
index 0000000..1035dc5
Binary files /dev/null and b/task-2762/images/top-middle.png differ
diff --git a/task-2762/images/top-right.png b/task-2762/images/top-right.png
new file mode 100644
index 0000000..54623ef
Binary files /dev/null and b/task-2762/images/top-right.png differ
diff --git a/task-2762/index.html b/task-2762/index.html
new file mode 100644
index 0000000..014abf2
--- /dev/null
+++ b/task-2762/index.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html>
+<head>
+ <title>Tor Daily Users Thematic Mapping API Prototype</title>
+ <script src="http://www.google.com/jsapi?key=ABQIAAAAgej9iuh3YJNjEPuctrZMehRNZJOGGZ5AJFYnuNGvvgpHXAyWEBRJgywKSq0D3AFCjF17DTpYDdYu-w"></script>
+ <script src="tmapi-0.1.js"></script>
+ <script src="worldborders.js"></script>
+ <link href="/css/stylesheet-ltr.css" type="text/css" rel="stylesheet">
+ <link href="/images/favicon.ico" type="image/x-icon" rel="shortcut icon">
+</head>
+<body onload="init()">
+ <div class="center">
+ <table class="banner" border="0" cellpadding="0" cellspacing="0" summary="">
+
+<tr>
+ <td class="banner-left">
+ <img src="/images/top-left.png" width="193" height="79">
+ </td>
+ <td class="banner-middle"></td>
+ <td class="banner-right"></td>
+</tr>
+</table>
+
+ <div class="main-column">
+ <h2>Tor Daily Users Thematic Mapping API Prototype</h2>
+ <br>
+
+ <p>This website is a prototype of the
+ <a href="http://thematicmapping.org/">Thematic Mapping API</a>
+ to display daily Tor users.</p>
+
+ <div id='map_container' style='height: 800px; width: 800px;'>
+ <div id='map' style='height: 100%;'></div>
+ </div>
+ <script type="text/javascript">
+ google.load("visualization", "1");
+ google.load("earth", "1");
+
+ var earth = null;
+
+ function init() {
+ google.earth.createInstance("map", initCallback, failureCallback);
+ }
+
+ function initCallback(object) {
+ earth = object;
+ earth.getWindow().setVisibility(true);
+
+ // Load statistics from Google Spreadsheet.
+ var query = new google.visualization.Query('https://spreadsheets.google.com/tq?key=0AujpbDQoBXkXdHdrUHhDZTE4cTllWUwtTjdKWjZZWGc&hl=en&authkey=CJHb_p4F#gid=0');
+ // Send the query with a callback function.
+ query.send(handleQueryResponse);
+
+ // Called when the query response is returned.
+ function handleQueryResponse(response) {
+
+ var data = response.getDataTable();
+
+ var map = new TME.Map.Kml.GoogleViz();
+
+ var options = {
+ type: 'prism',
+ title: 'Daily Tor users on March 9, 2011',
+ maxHeight: 2000000,
+ colorType: 'scale',
+ classification: 'equal',
+ geometry: worldBorders
+ };
+
+ var kml = map.draw(data, options);
+
+ var kmlObject = earth.parseKml(kml);
+ earth.getFeatures().appendChild(kmlObject);
+
+ var lookAt = earth.getView().copyAsLookAt(earth.ALTITUDE_RELATIVE_TO_GROUND);
+ lookAt.setLatitude(35);
+ lookAt.setLongitude(-25);
+ lookAt.setRange(12000000);
+ earth.getView().setAbstractView(lookAt);
+ }
+ }
+
+ function failureCallback(object) {
+ }
+
+ </script>
+
+ </div>
+ </div>
+</body>
+</html>
+
More information about the tor-commits
mailing list