From: Alex Sadleir <maxious@lambdacomplex.org>
Date: Wed, 27 Feb 2013 10:12:02 +0000
Subject: add TOC
X-Git-Url: http://maxious.lambdacomplex.org/git/?p=tools.git&a=commitdiff&h=2e98fccbee85b75dd155b8a87d235a338586d2c2
---
add TOC
---


--- a/.gitmodules
+++ b/.gitmodules
@@ -1,4 +1,7 @@
 [submodule "php-markdown"]
 	path = php-markdown
 	url = git://github.com/michelf/php-markdown.git
+[submodule "js/toc"]
+	path = js/toc
+	url = https://github.com/jgallen23/toc
 

--- a/css/main.css
+++ b/css/main.css
@@ -92,20 +92,77 @@
 /* ==========================================================================
    Author's custom styles
    ========================================================================== */
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+/* stoc http://www.1stwebdesigner.com/css/jquery-plugin-smooth-scrolling/ */
+#items {
+    float: right;
+    width: 260px;
+    padding-bottom: 10px;
+    margin:0 0 10px 20px;
+    /* rgba with ie compatibility */
+    background-color: transparent;
+    background-color: rgba(255,255,255,0.4);
+    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#20ffffff,endColorstr=#20ffffff);
+    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#20ffffff,endColorstr=#20ffffff)";
+}
+#items ul {
+    margin: 0 0 0 20px;
+    padding: 0 0 5px;
+    list-style-type: none;
+}
+#items ul ul {
+    font-size: 90%;
+}
+#items ul a {
+    font-family: "arial";
+    text-decoration: none;
+    color: #c10000;
+}
+#items ul a:hover { color: #ff0000 }
+ /* toc https://github.com/jgallen23/toc */
+#wrapper {
+    margin: 0 20px 0 170px;
+}
+
+#toc {
+    top: 0px;
+    left: 0px;
+    height: 100%;
+    position: fixed;
+    background: #333;
+    box-shadow: inset -5px 0 5px 0px #000;
+    width: 150px;
+    padding-top: 20px;
+    color: #fff;
+}
+
+#toc ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+#toc li {
+    padding: 5px 10px;
+}
+
+#toc a {
+    color: #fff;
+    text-decoration: none;
+    display: block;
+}
+
+#toc .toc-h2 {
+    padding-left: 10px;
+}
+
+#toc .toc-h3 {
+    padding-left: 20px;
+}
+
+#toc .toc-active {
+    background: #336699;
+    box-shadow: inset -5px 0px 10px -5px #000;
+}
 
 
 

--- a/index.md
+++ b/index.md
@@ -116,9 +116,9 @@
 
 # The basics of being a data scientist
 
-*   Have a hypothesis – even if you&#8217;re making a tool/api that helps people with their questions too, remember what the objective of that is.
+*   Have a hypothesis � even if you&#8217;re making a tool/api that helps people with their questions too, remember what the objective of that is.
 *   Find the people and tools you need to prove/show/find. This rest of this page will help with the latter.
-*   Analyse and present results – were they what you expected? Do they help explain to others what you have found out? Can present as a interactive data visualisation or a web/mobile application or just a infographic/motion graphics video that tells a story.
+*   Analyse and present results � were they what you expected? Do they help explain to others what you have found out? Can present as a interactive data visualisation or a web/mobile application or just a infographic/motion graphics video that tells a story.
 Please note, there are a combination of Analysis and Visualisation tools in each of the major categories below.
 
 # API Development {#api-development}
@@ -144,7 +144,9 @@
 
 
 
-# Data Visualisation {#data-visualisation}
+# Infographics and Data Visualisation {#data-visualisation}
+
+Infographics try to contextualise charts and graphs to tell a story. Data vis builds on this to find new ways to design insight.
 
 Most of the categories to follow have visualisation tools specific to their purpose.
 
@@ -213,7 +215,7 @@
 
 [Miso Dataset](http://misoproject.com/dataset/)
 
-[![](http://www.govhack.org/wp-content/uploads/How-to-participate-in-GovHack_html_m53b7ee38-293x300.png "miso screenshot")](http://www.govhack.org/wp-content/uploads/How-to-participate-in-GovHack_html_m53b7ee38.png)Javascript data transformation library – especially good if you want to use the output for javascript interactive visualisations because the transformations can be done on-the-fly by users.
+[![](http://www.govhack.org/wp-content/uploads/How-to-participate-in-GovHack_html_m53b7ee38-293x300.png "miso screenshot")](http://www.govhack.org/wp-content/uploads/How-to-participate-in-GovHack_html_m53b7ee38.png)Javascript data transformation library � especially good if you want to use the output for javascript interactive visualisations because the transformations can be done on-the-fly by users.
 
 ### R Statistical Language
 
@@ -238,7 +240,8 @@
 # Unstructured (text documents, webpages, metadata, tweets etc) Data Tools
 
 Scraperwiki
-Overviewer
+Overviewer/ Jigsaw
+http://www.cc.gatech.edu/gvu/ii/jigsaw/
 R
 
 
@@ -248,7 +251,7 @@
 
 ### Neo4j
 
-[![](http://www.govhack.org/wp-content/uploads/webadmin-data-300x127.png "Neo4\. web admin screenshot")](http://www.govhack.org/wp-content/uploads/webadmin-data.png)Help understand relationships – how is X connected to Y and via what other entities they both are connected to. Imports and exports
+[![](http://www.govhack.org/wp-content/uploads/webadmin-data-300x127.png "Neo4\. web admin screenshot")](http://www.govhack.org/wp-content/uploads/webadmin-data.png)Help understand relationships � how is X connected to Y and via what other entities they both are connected to. Imports and exports
 
 can be done using a preexisting tool like Gremlin or by writing a simple Java/Python/Ruby application. Queries can be tested in the built in data browser.
 
@@ -268,7 +271,7 @@
 
 ### [Graphviz](http://www.graphviz.org/)
 
-[![](http://www.govhack.org/wp-content/uploads/How-to-participate-in-GovHack_html_7579906d-300x184.png "Graphviz Screenshot")](http://www.govhack.org/wp-content/uploads/How-to-participate-in-GovHack_html_7579906d.png)Classic directed graph visualisation tool, can even [generate images online without installing](http://ashitani.jp/gv/) or use in webpages with [javascript port of software](http://code.google.com/p/canviz/). File format [“dot” very easy to learn](http://en.wikipedia.org/wiki/DOT_language)
+[![](http://www.govhack.org/wp-content/uploads/How-to-participate-in-GovHack_html_7579906d-300x184.png "Graphviz Screenshot")](http://www.govhack.org/wp-content/uploads/How-to-participate-in-GovHack_html_7579906d.png)Classic directed graph visualisation tool, can even [generate images online without installing](http://ashitani.jp/gv/) or use in webpages with [javascript port of software](http://code.google.com/p/canviz/). File format [�dot� very easy to learn](http://en.wikipedia.org/wiki/DOT_language)
 
 ### Gephi
 
@@ -329,7 +332,7 @@
 Illustration from Data Journalism Handbook, CC BY-SA 3.0</dd>
 
 
-The best high level reference is the “Understanding Data” and “Delivering Data” chapters of the Data Journalism Handbook which is available online for free at
+The best high level reference is the �Understanding Data� and �Delivering Data� chapters of the Data Journalism Handbook which is available online for free at
 
 [datajournalismhandbook.org](http://datajournalismhandbook.org/)
 

--- a/index.php
+++ b/index.php
@@ -22,17 +22,31 @@
         <![endif]-->
 
         <!-- Add your site or application content here -->
-   
+        <div id="toc"></div>
+        <div id="wrapper">
+            <div id="items">
+            </div>
 <?php
 include_once "php-markdown/markdown.php";
 echo Markdown(file_get_contents("index.md"));
 ?>
-
+</div>
         <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
         <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.0.min.js"><\/script>')</script>
         <script src="js/plugins.js"></script>
         <script src="js/main.js"></script>
-
+        <script src="js/jquery.stoc.js"></script>
+        <script src="js/toc/dist/jquery.toc.min.js"></script>
+        <script>
+            $('#toc').toc({
+                'selectors': 'h1'
+            });
+            $(function(){
+                $("#items").stoc({
+                    search: "#wrapper"
+                });
+            });
+        </script>
         <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
         <script>
             var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];

--- /dev/null
+++ b/js/jquery.stoc.js
@@ -1,1 +1,80 @@
-
+(function($){
+ $.fn.stoc = function(options) {
+	//Our default options
+	var defaults = {
+		search: "body", //where we will search for titles
+		depth: 6, //how many hN should we search
+		start: 1, //which hN will be the first (and after it we go just deeper)
+		stocTitle: "<h2>Contents</h2>", //what to display before our box
+		listType: "ul", //could be ul or ol
+		smoothScroll: 1 
+	};
+	
+	//let's extend our plugin with default or user options when defined
+	var options = $.extend(defaults, options);
+	
+    return this.each(function() {
+		//"cache" our target and search objects
+		obj = $(this); //target
+		src = $(options.search); //search
+		//let's declare some variables. We need this var declaration to create them as local variables (not global)
+		var appHTML = "", tagNumber = 0, txt = "", id = "", before = "", after = "", previous = options.start, start = options.start, depth = options.depth, i = 0, srcTags = "h" + options.start, cacheHN = "";
+		
+		//which tags we will search
+		while ( depth > 1) {
+			start++; //we will just get our start level and numbers higher than it
+			srcTags = srcTags + ", h" + start;
+			depth--; //since went one level up, our depth will go one level down
+		}
+		src.find(srcTags).each(function() {
+			//we will cache our current H element
+			cacheHN = $(this);
+			//if we are on h1, 2, 3...
+			tagNumber = ( cacheHN.get(0).tagName ).substr(1);			
+			
+			//sets the needed id to the element
+			id = cacheHN.attr('id');
+			if (id == "") { //if it doesn't have only, of course
+				id = "h" + tagNumber + "_" + i;
+				cacheHN.attr('id', id);
+			}
+			//our current text
+			txt = cacheHN.text();
+			
+			switch(true) { //with switch(true) we can do comparisons in each case
+				case (tagNumber > previous) : //it means that we went down one level (e.g. from h2 to h3)
+						appHTML = appHTML + "<" + options.listType +"><li>"+ before +"<a href=\"#"+ id + "\">" + txt + "</a>";
+						previous = tagNumber;
+					break;
+				case (tagNumber == previous) : //it means that stay on the same level (e.g. h3 and stay on it)
+						appHTML = appHTML + "</li><li>"+ before +"<a href=\"#"+ id + "\">" + txt +  "</a>";
+					break;
+				case (tagNumber < previous) : //it means that we went up but we don't know how much levels  (e.g. from h3 to h2)
+						while(tagNumber != previous) {
+							appHTML = appHTML + "</" + options.listType +"></li>";
+							previous--;
+						}
+						appHTML = appHTML + "<li>"+ before +"<a href=\"#"+ id + "\">" + txt + "</a></li>";
+					break;
+			}
+			i++;			
+		});
+		//corrects our last item, because it may have some opened ul's
+		while(tagNumber != options.start) {
+			appHTML = appHTML + "</" + options.listType +">";
+			tagNumber--;
+		}
+		//append our html to our object
+		appHTML = options.stocTitle + "<"+ options.listType + ">" + appHTML + "</" + options.listType + ">";
+		obj.append(appHTML);
+		
+		//our pretty smooth scrolling here
+		// acctually I've just compressed the code so you guys will think that I'm the man . Source: http://css-tricks.com/snippets/jquery/smooth-scrolling/
+		if (options.smoothScroll == 1) {
+			$(window).load(function(){
+				function filterPath(string){return string.replace(/^\//,'').replace(/(index|default).[a-zA-Z]{3,4}$/,'').replace(/\/$/,'')}var locationPath=filterPath(location.pathname);var scrollElem=scrollableElement('html','body');obj.find('a[href*=#]').each(function(){var thisPath=filterPath(this.pathname)||locationPath;if(locationPath==thisPath&&(location.hostname==this.hostname||!this.hostname)&&this.hash.replace(/#/,'')){var $target=$(this.hash),target=this.hash;if(target){var targetOffset=$target.offset().top;$(this).click(function(event){event.preventDefault();$(scrollElem).animate({scrollTop:targetOffset},400,function(){location.hash=target})})}}});function scrollableElement(els){for(var i=0,argLength=arguments.length;i<argLength;i++){var el=arguments[i],$scrollElement=$(el);if($scrollElement.scrollTop()>0){return el}else{$scrollElement.scrollTop(1);var isScrollable=$scrollElement.scrollTop()>0;$scrollElement.scrollTop(0);if(isScrollable){return el}}}return[]}
+			});
+		}
+    });
+ };
+})(jQuery);

--- /dev/null
+++ b/js/toc

--- /dev/null
+++ b/tools/tools.iml
@@ -1,1 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$/.." />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>
 
+