edits
edits

[submodule "php-markdown"] [submodule "php-markdown"]
path = php-markdown path = php-markdown
url = git://github.com/michelf/php-markdown.git url = git://github.com/michelf/php-markdown.git
  [submodule "js/toc"]
  path = js/toc
  url = https://github.com/jgallen23/toc
   
file:b/.idea/ant.xml (new)
  <?xml version="1.0" encoding="UTF-8"?>
  <project version="4">
  <component name="AntConfiguration">
  <defaultAnt bundledAnt="true" />
  </component>
  </project>
 
 
file:a/README.md -> file:b/README.md
# [HTML5 Boilerplate](http://html5boilerplate.com) # GovHack toolkit
   
HTML5 Boilerplate is a professional front-end template for building fast, Collection of resources for data analysis and visualisation
robust, and adaptable web apps or sites.  
   
This project is the product of many years of iterative development and combined  
community knowledge. It does not impose a specific development philosophy or  
framework, so you're free to architect your code in the way that you want.  
   
* Source: [https://github.com/h5bp/html5-boilerplate](https://github.com/h5bp/html5-boilerplate)  
* Homepage: [http://html5boilerplate.com](http://html5boilerplate.com)  
* Twitter: [@h5bp](http://twitter.com/h5bp)  
   
   
## Quick start  
   
Choose one of the following options:  
   
1. Download the latest stable release from  
[html5boilerplate.com](http://html5boilerplate.com/) or a custom build from  
[Initializr](http://www.initializr.com).  
2. Clone the git repo — `git clone  
https://github.com/h5bp/html5-boilerplate.git` - and checkout the tagged  
release you'd like to use.  
   
   
## Features  
   
* HTML5 ready. Use the new elements with confidence.  
* Cross-browser compatible (Chrome, Opera, Safari, Firefox 3.6+, IE6+).  
* Designed with progressive enhancement in mind.  
* Includes [Normalize.css](http://necolas.github.com/normalize.css/) for CSS  
normalizations and common bug fixes.  
* The latest [jQuery](http://jquery.com/) via CDN, with a local fallback.  
* The latest [Modernizr](http://modernizr.com/) build for feature detection.  
* IE-specific classes for easier cross-browser control.  
* Placeholder CSS Media Queries.  
* Useful CSS helpers.  
* Default print CSS, performance optimized.  
* Protection against any stray `console.log` causing JavaScript errors in  
IE6/7.  
* An optimized Google Analytics snippet.  
* Apache server caching, compression, and other configuration defaults for  
Grade-A performance.  
* Cross-domain Ajax and Flash.  
* "Delete-key friendly." Easy to strip out parts you don't need.  
* Extensive inline and accompanying documentation.  
   
   
## Documentation  
   
Take a look at the [documentation table of  
contents](/h5bp/html5-boilerplate/blob/master/doc/README.md). This  
documentation is bundled with the project, which makes it readily available for  
offline reading and provides a useful starting point for any documentation  
you want to write about your project.  
   
   
## Contributing  
   
Anyone and everyone is welcome to  
[contribute](/h5bp/html5-boilerplate/blob/master/doc/contribute.md). Hundreds  
of developers have helped make the HTML5 Boilerplate what it is today.  
   
/* /*
* HTML5 Boilerplate * HTML5 Boilerplate
* *
* What follows is the result of much research on cross-browser styling. * What follows is the result of much research on cross-browser styling.
* Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal, * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
* Kroc Camen, and the H5BP dev community and team. * Kroc Camen, and the H5BP dev community and team.
*/ */
   
/* ========================================================================== /* ==========================================================================
Base styles: opinionated defaults Base styles: opinionated defaults
========================================================================== */ ========================================================================== */
   
html, html,
button, button,
input, input,
select, select,
textarea { textarea {
color: #222; color: #222;
} }
   
body { body {
font-size: 1em; font-size: 1em;
line-height: 1.4; line-height: 1.4;
} }
   
/* /*
* Remove text-shadow in selection highlight: h5bp.com/i * Remove text-shadow in selection highlight: h5bp.com/i
* These selection declarations have to be separate. * These selection declarations have to be separate.
* Customize the background color to match your design. * Customize the background color to match your design.
*/ */
   
::-moz-selection { ::-moz-selection {
background: #b3d4fc; background: #b3d4fc;
text-shadow: none; text-shadow: none;
} }
   
::selection { ::selection {
background: #b3d4fc; background: #b3d4fc;
text-shadow: none; text-shadow: none;
} }
   
/* /*
* A better looking default horizontal rule * A better looking default horizontal rule
*/ */
   
hr { hr {
display: block; display: block;
height: 1px; height: 1px;
border: 0; border: 0;
border-top: 1px solid #ccc; border-top: 1px solid #ccc;
margin: 1em 0; margin: 1em 0;
padding: 0; padding: 0;
} }
   
/* /*
* Remove the gap between images and the bottom of their containers: h5bp.com/i/440 * Remove the gap between images and the bottom of their containers: h5bp.com/i/440
*/ */
   
img { img {
vertical-align: middle; vertical-align: middle;
} }
   
/* /*
* Remove default fieldset styles. * Remove default fieldset styles.
*/ */
   
fieldset { fieldset {
border: 0; border: 0;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
   
/* /*
* Allow only vertical resizing of textareas. * Allow only vertical resizing of textareas.
*/ */
   
textarea { textarea {
resize: vertical; resize: vertical;
} }
   
/* ========================================================================== /* ==========================================================================
Chrome Frame prompt Chrome Frame prompt
========================================================================== */ ========================================================================== */
   
.chromeframe { .chromeframe {
margin: 0.2em 0; margin: 0.2em 0;
background: #ccc; background: #ccc;
color: #000; color: #000;
padding: 0.2em 0; padding: 0.2em 0;
} }
   
/* ========================================================================== /* ==========================================================================
Author's custom styles 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;
  }
   
   
   
/* ========================================================================== /* ==========================================================================
Helper classes Helper classes
========================================================================== */ ========================================================================== */
   
/* /*
* Image replacement * Image replacement
*/ */
   
.ir { .ir {
background-color: transparent; background-color: transparent;
border: 0; border: 0;
overflow: hidden; overflow: hidden;
/* IE 6/7 fallback */ /* IE 6/7 fallback */
*text-indent: -9999px; *text-indent: -9999px;
} }
   
.ir:before { .ir:before {
content: ""; content: "";
display: block; display: block;
width: 0; width: 0;
height: 100%; height: 100%;
} }
   
/* /*
* Hide from both screenreaders and browsers: h5bp.com/u * Hide from both screenreaders and browsers: h5bp.com/u
*/ */
   
.hidden { .hidden {
display: none !important; display: none !important;
visibility: hidden; visibility: hidden;
} }
   
/* /*
* Hide only visually, but have it available for screenreaders: h5bp.com/v * Hide only visually, but have it available for screenreaders: h5bp.com/v
*/ */
   
.visuallyhidden { .visuallyhidden {
border: 0; border: 0;
clip: rect(0 0 0 0); clip: rect(0 0 0 0);
height: 1px; height: 1px;
margin: -1px; margin: -1px;
overflow: hidden; overflow: hidden;
padding: 0; padding: 0;
position: absolute; position: absolute;
width: 1px; width: 1px;
} }
   
/* /*
* Extends the .visuallyhidden class to allow the element to be focusable * Extends the .visuallyhidden class to allow the element to be focusable
* when navigated to via the keyboard: h5bp.com/p * when navigated to via the keyboard: h5bp.com/p
*/ */
   
.visuallyhidden.focusable:active, .visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus { .visuallyhidden.focusable:focus {
clip: auto; clip: auto;
height: auto; height: auto;
margin: 0; margin: 0;
overflow: visible; overflow: visible;
position: static; position: static;
width: auto; width: auto;
} }
   
/* /*
* Hide visually and from screenreaders, but maintain layout * Hide visually and from screenreaders, but maintain layout
*/ */
   
.invisible { .invisible {
visibility: hidden; visibility: hidden;
} }
   
/* /*
* Clearfix: contain floats * Clearfix: contain floats
* *
* For modern browsers * For modern browsers
* 1. The space content is one way to avoid an Opera bug when the * 1. The space content is one way to avoid an Opera bug when the
* `contenteditable` attribute is included anywhere else in the document. * `contenteditable` attribute is included anywhere else in the document.
* Otherwise it causes space to appear at the top and bottom of elements * Otherwise it causes space to appear at the top and bottom of elements
* that receive the `clearfix` class. * that receive the `clearfix` class.
* 2. The use of `table` rather than `block` is only necessary if using * 2. The use of `table` rather than `block` is only necessary if using
* `:before` to contain the top-margins of child elements. * `:before` to contain the top-margins of child elements.
*/ */
   
.clearfix:before, .clearfix:before,
.clearfix:after { .clearfix:after {
content: " "; /* 1 */ content: " "; /* 1 */
display: table; /* 2 */ display: table; /* 2 */
} }
   
.clearfix:after { .clearfix:after {
clear: both; clear: both;
} }
   
/* /*
* For IE 6/7 only * For IE 6/7 only
* Include this rule to trigger hasLayout and contain floats. * Include this rule to trigger hasLayout and contain floats.
*/ */
   
.clearfix { .clearfix {
*zoom: 1; *zoom: 1;
} }
   
/* ========================================================================== /* ==========================================================================
EXAMPLE Media Queries for Responsive Design. EXAMPLE Media Queries for Responsive Design.
Theses examples override the primary ('mobile first') styles. Theses examples override the primary ('mobile first') styles.
Modify as content requires. Modify as content requires.
========================================================================== */ ========================================================================== */
   
@media only screen and (min-width: 35em) { @media only screen and (min-width: 35em) {
/* Style adjustments for viewports that meet the condition */ /* Style adjustments for viewports that meet the condition */
} }
   
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), @media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-resolution: 144dpi) { only screen and (min-resolution: 144dpi) {
/* Style adjustments for high resolution devices */ /* Style adjustments for high resolution devices */
} }
   
/* ========================================================================== /* ==========================================================================
Print styles. Print styles.
Inlined to avoid required HTTP connection: h5bp.com/r Inlined to avoid required HTTP connection: h5bp.com/r
========================================================================== */ ========================================================================== */
   
@media print { @media print {
* { * {
background: transparent !important; background: transparent !important;
color: #000 !important; /* Black prints faster: h5bp.com/s */ color: #000 !important; /* Black prints faster: h5bp.com/s */
box-shadow:none !important; box-shadow:none !important;
text-shadow: none !important; text-shadow: none !important;
} }
   
a, a,
a:visited { a:visited {
text-decoration: underline; text-decoration: underline;
} }
   
a[href]:after { a[href]:after {
content: " (" attr(href) ")"; content: " (" attr(href) ")";
} }
   
abbr[title]:after { abbr[title]:after {
content: " (" attr(title) ")"; content: " (" attr(title) ")";
} }
   
/* /*
* Don't show links for images, or javascript/internal links * Don't show links for images, or javascript/internal links
*/ */
   
.ir a:after, .ir a:after,
a[href^="javascript:"]:after, a[href^="javascript:"]:after,
a[href^="#"]:after { a[href^="#"]:after {
content: ""; content: "";
} }
   
pre, pre,
blockquote { blockquote {
border: 1px solid #999; border: 1px solid #999;
page-break-inside: avoid; page-break-inside: avoid;
} }
   
thead { thead {
display: table-header-group; /* h5bp.com/t */ display: table-header-group; /* h5bp.com/t */
} }
   
tr, tr,
img { img {
page-break-inside: avoid; page-break-inside: avoid;
} }
   
img { img {
max-width: 100% !important; max-width: 100% !important;
} }
   
@page { @page {
margin: 0.5cm; margin: 0.5cm;
} }
   
p, p,
h2, h2,
h3 { h3 {
orphans: 3; orphans: 3;
widows: 3; widows: 3;
} }
   
h2, h2,
h3 { h3 {
page-break-after: avoid; page-break-after: avoid;
} }
} }
   
 Binary files /dev/null and b/img/129-Screenshot-LobbyClue_-_Chromium-300x180.png differ
 Binary files /dev/null and b/img/129-Screenshot-LobbyClue_-_Chromium.png differ
 Binary files /dev/null and b/img/How-to-participate-in-GovHack_html_209ee972.jpg differ
 Binary files /dev/null and b/img/How-to-participate-in-GovHack_html_2f0199ff1-300x221.png differ
 Binary files /dev/null and b/img/How-to-participate-in-GovHack_html_2f0199ff1.png differ
 Binary files /dev/null and b/img/How-to-participate-in-GovHack_html_3789acae-300x253.jpg differ
 Binary files /dev/null and b/img/How-to-participate-in-GovHack_html_3789acae.jpg differ
 Binary files /dev/null and b/img/How-to-participate-in-GovHack_html_4dda24a4-300x261.jpg differ
 Binary files /dev/null and b/img/How-to-participate-in-GovHack_html_4dda24a4.jpg differ
 Binary files /dev/null and b/img/How-to-participate-in-GovHack_html_512fcbe1-300x173.jpg differ
 Binary files /dev/null and b/img/How-to-participate-in-GovHack_html_512fcbe1.jpg differ
 Binary files /dev/null and b/img/How-to-participate-in-GovHack_html_74d01d05-300x195.jpg differ
 Binary files /dev/null and b/img/How-to-participate-in-GovHack_html_74d01d05.jpg differ
 Binary files /dev/null and b/img/How-to-participate-in-GovHack_html_7579906d-300x184.png differ
 Binary files /dev/null and b/img/How-to-participate-in-GovHack_html_7579906d.png differ
 Binary files /dev/null and b/img/How-to-participate-in-GovHack_html_m11006fce-300x199.jpg differ
 Binary files /dev/null and b/img/How-to-participate-in-GovHack_html_m11006fce.jpg differ
 Binary files /dev/null and b/img/How-to-participate-in-GovHack_html_m50afbe88-300x160.jpg differ
 Binary files /dev/null and b/img/How-to-participate-in-GovHack_html_m50afbe88.jpg differ
 Binary files /dev/null and b/img/How-to-participate-in-GovHack_html_m53b7ee38-293x300.png differ
 Binary files /dev/null and b/img/How-to-participate-in-GovHack_html_m53b7ee38.png differ
 Binary files /dev/null and b/img/How-to-participate-in-GovHack_html_m6006eaf3-300x130.jpg differ
 Binary files /dev/null and b/img/How-to-participate-in-GovHack_html_m6006eaf3.jpg differ
 Binary files /dev/null and b/img/How-to-participate-in-GovHack_html_m6a65720f-300x199.gif differ
 Binary files /dev/null and b/img/How-to-participate-in-GovHack_html_m6a65720f.gif differ
 Binary files /dev/null and b/img/How-to-participate-in-GovHack_html_m90d8020-300x277.jpg differ
 Binary files /dev/null and b/img/How-to-participate-in-GovHack_html_m90d8020.jpg differ
 Binary files /dev/null and b/img/Screenshot-at-2012-04-29-172132-300x235.png differ
 Binary files /dev/null and b/img/Tableau-Screenshot-300x190.jpg differ
 Binary files /dev/null and b/img/Tableau-Screenshot.jpg differ
 Binary files /dev/null and b/img/cartographerjs-300x187.png differ
 Binary files /dev/null and b/img/cartographerjs.png differ
 Binary files /dev/null and b/img/chess_masters-300x300.png differ
 Binary files /dev/null and b/img/chess_masters.png differ
 Binary files /dev/null and b/img/fusiontablesscreenshot-300x168.jpg differ
 Binary files /dev/null and b/img/fusiontablesscreenshot.jpg differ
 Binary files /dev/null and b/img/google_refine_interface.png differ
 Binary files /dev/null and b/img/postgisexample-300x130.jpg differ
 Binary files /dev/null and b/img/postgisexample.jpg differ
 Binary files /dev/null and b/img/rstudio-windows-300x249.png differ
 Binary files /dev/null and b/img/rstudio-windows.png differ
 Binary files /dev/null and b/img/webadmin-data-300x127.png differ
 Binary files /dev/null and b/img/webadmin-data.png differ
file:a/index.md -> file:b/index.md
Below is a whole bunch of information to help you prepare hackfest entries. These tools can be used to make entries like: mobile apps, web apps, data visualisations/inforgraphics #GovHack Toolkit
  Welcome to the GovHack toolkit. This page provides all the information you need to prepare hackfest entries.
govhack library These tools can be used to make entries like mobile apps, web apps and data visualisations/infographics.
   
- http://hpneo.github.com/gmaps/examples.html The text of this toolkit is open for reuse under a Creative Commons Attribution licence and improvements are encouraged via Git http://github.com/maxious/govhack-tools or via email patches to govhack@lambdacomplex.org
- android datviz  
- http://code.google.com/p/afreechart/ http://code.google.com/p/snowdon/ http://code.google.com/p/chartdroid/ http://androidplot.com/ http://code.google.com/p/achartengine/ # How to register and submit your entry
- https://graphics.stanford.edu/wikis/cs448b-12-fall/ data viz theory ## Registering your team
- https://mixpanel.com/education/understanding-the-first-five-minutes Coming Soon: how to use the website "Hacker Space" to register and find teams.
- http://drawingbynumbers.org/toolsandresources  
- http://wmbriggs.com/blog/?p=6465 ## Preparing your submission
- http://ofps.oreilly.com/titles/9781449339739/k_00000002.html list of d3 alternatives  
- http://craigkerstiens.com/2012/10/01/understanding-postgres-performance/ You should record a 3 minute speech and mix images/text to accompany.
- https://github.com/clips/pattern for easy NLP/network analysis/data mining [Screenr] (http://www.screenr.com/) , [ActivePresenter Free Edition](http://atomisystems.com/activepresenter/free-edition/) and other screencasting tools allow you to demo apps.
- https://github.com/theodi/open-data-tech-review/wiki othr cleanup/linked data toola To mix together clips, you can use youtube video editor http://www.youtube.com/editor or local software like http://www.videolan.org/vlmc/ or http://www.lwks.com/
- http://www.opentripplanner.org/apidoc/rest.plan.html  
- http://selection.datavisualization.ch/ data viz tools catalog You also need to submit your "source material". For an application this may be source code, for another work it might be your notes or prototypes.
- http://www.slideshare.net/OReillyStrata/visualizing-networks-beyond-the-hairball The key thing here is that your source material demonstrates to the judges that some of the end result was your own work and that it is possible for another person to replicate that work.
- http://blog.sciencenet.cn/blog-554179-622011.html SNA tools catalog  
- https://github.com/jacomyal/osdc2012-sigmajs-demo sigmajs filtering/searching  
- manipulating data - grep/find replace/sed/regex # General References
- d3 tools and tutorial http://enjalot.com/ http://news.ycombinator.com/item?id=4608440  
- Why d3 is the way it is and how to make charts http://bost.ocks.org/mike/chart/  
- how to make an xkcd chart http://bl.ocks.org/3914862 ## The basics of being a data scientist
- http://blog.josephwilk.net/ruby/latent-semantic-analysis-in-ruby.html similar terms usually found together  
- data viz * Have a hypothesis - even if you're making a tool/api that helps people with their questions too, remember what the objective of that is.
- http://k2company.com/blog/2012/09/06/toolbox-for-learning-machine-learning-and-data-science/ * Find the people and tools you need to prove/show/find. This rest of this page will help with the latter.
- http://williamparry.blogspot.com.au/2011/04/putting-data-into-google-fusion-tables.html google fusion tutorial * Analyse and present results - were they what you expected? Do they help explain to others what you have found out?
- andrewharvey4.wordpress.com postgis/asgs tutorial Can present as a interactive data visualisation or a web/mobile application or just a infographic/motion graphics video that tells a story.
- http://www.slideshare.net/maxdemarzi/etl-into-neo4j  
- http://www.twotorials.com/ for R [![](img/How-to-participate-in-GovHack_html_m6a65720f-300x199.gif "Data Journalism Diagram")](img/How-to-participate-in-GovHack_html_m6a65720f.gif)</dt>
- http://www.r-bloggers.com/gradient-word-clouds/ http://www.rstudio.com/shiny/ http://blog.ouseful.info/2012/11/28/quick-shiny-demo-exploring-nhs-winter-sit-rep-data/ https://github.com/timelyportfolio/shiny-d3-plot https://github.com/trestletech/shiny-sandbox/tree/master/grn Illustration from Data Journalism Handbook, CC BY-SA 3.0</dd>
- http://is-r.tumblr.com/post/38240018815/making-prettier-network-graphs-with-sna-and-igraph  
- http://www.r-bloggers.com/video-simpler-tricks-and-tools-help-debugging-git-latex-and-workflow-with-r-by-prof-rob-hyndman/ 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
- http://yihui.name/knitr/ makes reports including google widgets/charts/maps via http://www.r-bloggers.com/googlevis-0-3-2-is-released-better-integration-with-knitr/ [datajournalismhandbook.org](http://datajournalismhandbook.org/)
- http://chartsnthings.tumblr.com/post/36978271916/r-tutorial-simple-charts http://flowingdata.com/2012/12/17/getting-started-with-charts-in-r/  
- http://dydra.com/ You can learn the technical skills from scratch in Visualize This: The FlowingData Guide to Design, Visualization, and Statistics by Nathan Yau or for more advanced
- http://selection.datavisualization.ch/ data viz tools list practical advice check out Data Analysis with Open Source Tools by Philipp K. Janert
- http://nodexl.codeplex.com/ network graphs for excel For further reading in this space
- http://sunfoundation.tumblr.com/ [http://flowingdata.com/2012/04/27/data-and-visualization-blogs-worth-following/](http://flowingdata.com/2012/04/27/data-and-visualization-blogs-worth-following/)
- css framework like bootstrap or zurb foundation  
- analysing - linked data tools  
- http://govcampau.wikispaces.com/useful+tools **Statistics**
- http://linkeddata.org/home  
- analysing - unstructured/nlp incl overviewer, opennlp/nltk, lucene/solr A great guide to statistics is
- http://www.r-bloggers.com/simple-text-mining-with-r/ [Think Stats](http://greenteapress.com/thinkstats/html/index.html)
   
# Hosted Developer Tools {#hosted-developer-tools} **Programming**
   
  Programming is valuable skill for manipulating and displaying data.
  Basic tutorials for a variety of languages are available for free online or you can learn interactively with websites like [Codecademy for JavaScript](http://www.codecademy.com/#!/exercises/0), [Learn Python](http://www.learnpython.org/) or [Try Ruby](http://tryruby.org/)
   
  For web applications and visualisations, you'll need a basic understanding of JavaScript in order to configure pre made libraries like jQuery. A good source for Javascript information is the [Mozilla Development Network Javascript Page](https://developer.mozilla.org/en/JavaScript)
   
  **Accessibility/User Experience**
   
  Following accessibility guidelines not only make a application accessible but make it a better experience for all users! Even if not making an app, good to consider these things to do and not do when designing for humans: [http://www.w3.org/TR/WCAG/](http://www.w3.org/TR/WCAG/)
   
   
   
  # Developer Tools For Your Computer
  No matter what kind of application you have for the data, there are many tools you can use to better collaborate and manage your project.
   
  ### Source Control
  Using a version control system like Git or Subversion allows you to keep many different versions of what you have been working on so you can collaborate with others or simply back up your files so you don't lose them!
   
  [![](img/Screenshot-at-2012-04-29-172132-300x235.png "Git Screenshot")](http://progit.org/book/)
   
  There are [tutorials on git](http://progit.org/book/) and GUIs to help you like [TortoiseGit for Windows](http://code.google.com/p/tortoisegit/) and [Atlassian SourceTree for Windows and OSX](http://sourcetreeapp.com/) (or if you prefer the console [tig](http://blogs.atlassian.com/2013/05/git-tig/))
  There is also a [manual for Subversion](http://svnbook.red-bean.com/) and a [similar GUI for Subversion](http://tortoisesvn.net/)
   
   
  ### Task Tracking
   
  Issue/task trackers allow you to outline the tasks required for your project and assign them to people to do.
   
  [Trello](https://trello.com/) and [Workflowy](https://workflowy.com/) are free, lightweight project management tools suitable for a rapid project!
   
  ## Virtual Servers
  Many free services to try out virtual/cloud servers before scaling up: https://www.chunkhost.com/ or heroku or https://www.appfog.com/pricing/
   
  ## Hosted Developer Tools
   
  Can get many tools (source control, issue tracking) combined into one service cloud hosted so there's no setup required.
   
  ### Github / BitBucket
  Github provides Git but [Subversion (svn)](https://github.com/blog/626-announcing-svn-support) and [Mercurial (hg)](http://hg-git.github.io/) interfaces are also available. Github provide their own GUI for Windows/OSX or you can use a variety of Git capable tools https://github.com/
  Similarly Atlassian provide BitBucket accessible via Git and Mercurial (hg) https://bitbucket.org/
   
### Sourceforge ### Sourceforge
   
Subversion, Git, Mercurial, Bazaar, CVS, issue tracker, wiki, release file downloads. Unlimited free use for open source projects. Subversion, Git, Mercurial, Bazaar, CVS, issue tracker, wiki, release file downloads. Unlimited free use for open source projects.
   
You can create your own Sourceforge project at [http://sourceforge.net/](http://sourceforge.net/) You can create your own Sourceforge project at [http://sourceforge.net/](http://sourceforge.net/)
   
### Google Code Project Hosting ### Google Code Project Hosting
   
Git, Mercurial, and Subversion code. Issue tracker, wiki, release file downloads. Unlimited free use for open source projects. Git, Mercurial, and Subversion code. Issue tracker, wiki, release file downloads. Unlimited free use for open source projects.
   
You can host your Google Code project and get access to developer tools, APIs and documentation at [http://code.google.com/](http://code.google.com/) You can host your Google Code project and get access to developer tools, APIs and documentation at [http://code.google.com/](http://code.google.com/)
   
   
  # Applications of data hacking
# The basics of being a data scientist  
  ## API Development
 
* Find the people and tools you need to prove/show/find. This rest of this page will help with the latter.  
So an API isn't just an XML file!
Please note, there are a combination of Analysis and Visualisation tools in each of the major categories below.  
   
# API Development {#api-development}  
   
   
So an API isn&#8217;t just an XML file ![;)](http://www.govhack.org/wp-includes/images/smilies/icon_wink.gif)  
   
A good web based data API: A good web based data API:
   
* Is logically organised * Is logically organised
* Can filter returned data * Can filter returned data
* Can return results in different open formats (CSV/JSON etc.) * Can return results in different open formats (CSV/JSON etc.)
* Is efficient and responsive by using caching and databases appropriately * Is efficient and responsive by using caching and databases appropriately
* Handles errors gracefully * Handles errors gracefully
* Monitors and controls access (to show benefit realised of API and prevent abuse) * Monitors and controls access (to show benefit realised of API and prevent abuse)
* Provides appropriate documentation with examples * Provides appropriate documentation with examples
   
Some people like sensis [http://](http://developers.sensis.com.au/)[developers.sensis.com.<wbr>au</wbr>](http://developers.sensis.com.au/)[/](http://developers.sensis.com.au/) use a provider like[http://](http://mashery.com/)[mashery.com](http://mashery.com/)[/](http://mashery.com/) or [https](https://apigee.com/)[://](https://apigee.com/)[apigee.com](https://apigee.com/) or [http://](http://apiaxle.com/)[apiaxle.com](http://apiaxle.com/)[/](http://apiaxle.com/) or [http://www.3scale.net/](http://www.3scale.net/) which handles making a good API for them. Some people like sensis [http://](http://developers.sensis.com.au/)[developers.sensis.com.<wbr>au</wbr>](http://developers.sensis.com.au/)[/](http://developers.sensis.com.au/) use a provider like[http://](http://mashery.com/)[mashery.com](http://mashery.com/)[/](http://mashery.com/) or [https](https://apigee.com/)[://](https://apigee.com/)[apigee.com](https://apigee.com/) or [http://](http://apiaxle.com/)[apiaxle.com](http://apiaxle.com/)[/](http://apiaxle.com/) or [http://www.3scale.net/](http://www.3scale.net/) which handles making a good API for them.
   
Atlassian have a great page on what makes a good API [https](https://developer.atlassian.com/display/REST/Atlassian+REST+API+Design+Guidelines+version+1)[://](https://developer.atlassian.com/display/REST/Atlassian+REST+API+Design+Guidelines+version+1)[developer.atlassian.<wbr>com</wbr>](https://developer.atlassian.com/display/REST/Atlassian+REST+API+Design+Guidelines+version+1)[/display/REST/](https://developer.atlassian.com/display/REST/Atlassian+REST+API+Design+Guidelines+version+1)[Atlassian](https://developer.atlassian.com/display/REST/Atlassian+REST+API+Design+Guidelines+version+1)[+<wbr>REST+API+Design+Guidelines+<wbr>version+1</wbr></wbr>](https://developer.atlassian.com/display/REST/Atlassian+REST+API+Design+Guidelines+version+1) Atlassian have a great page on what makes a good API https://developer.atlassian.com/display/REST/Atlassian+REST+API+Design+Guidelines+version+1)
   
  HowTo.gov has a bunch of api resources about choosing SOAP vs. REST etc. http://www.howto.gov/mobile/apis-in-government
   
  API documentation is important too! Traditionally for SOAP APIs, you use WSDL but for REST try [Swagger](http://swagger.wordnik.com/) or [iodocs](https://github.com/mashery/iodocs)
  Many web app frameworks can generate the documentation for you. For example Symfony for PHP http://symfony.com/ https://github.com/FriendsOfSymfony/FOSRestBundle http://williamdurand.fr/2012/08/02/rest-apis-with-symfony2-the-right-way/ https://github.com/nelmio/NelmioApiDocBundle https://github.com/liip/LiipHelloBundle
# Data Visualisation {#data-visualisation} Or for Ruby on Rails there is is https://github.com/elc/rapi_doc https://github.com/Pajk/apipie-rails
   
  For example [Stripe's API](http://amberonrails.com/building-stripes-api/) or previous GovHack entrant [WeatheredOak](http://www.govhack.org/2012/06/02/weatheredoak/)
   
   
  ## Infographics and 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. Most of the categories to follow have visualisation tools specific to their purpose.
   
You can find some data visualisation &#8220;essential&#8221\. tools below: You can find some data visualisation tools below:
   
[http://www.visualisingdata.com/index.php/2011/07/part-6-the-essential-collection-of-visualisation-resources/](http://www.visualisingdata.com/index.php/2011/07/part-6-the-essential-collection-of-visualisation-resources/) [Essential Colletion](http://www.visualisingdata.com/index.php/2011/07/part-6-the-essential-collection-of-visualisation-resources/)
  [Drawing By Numbers Tools and Resources](http://drawingbynumbers.org/toolsandresources)
  - http://selection.datavisualization.ch/ data viz tools catalog
Also check out [http://thejit.org](http://thejit.org/) &amp; [http://www.senchalabs.org/<wbr>philogl/</wbr>](http://www.senchalabs.org/philogl/) (contributed by Matt Adcock) Also check out [http://thejit.org](http://thejit.org/) &amp; [http://www.senchalabs.org/<wbr>philogl/</wbr>](http://www.senchalabs.org/philogl/) (contributed by Matt Adcock)
   
  A good infographic should use visual art concepts and [good color schemes](http://www.r-bloggers.com/the-paul-tol-21-color-salute/). See the [data visualisation guidelines from the international journalism festival](http://schoolofdata.org/2013/04/26/data-visualization-guidelines-by-gregor-aisch-international-journalism-festival/)
  For more information on the theory of data visualisation check out the [Stanford CS448B notes](https://graphics.stanford.edu/wikis/cs448b-12-fall/) or [The Ultimate Collection of Data Storytelling Resources](http://www.juiceanalytics.com/writing/the-ultimate-collection-of-data-storytelling-resources/)
# Augmented Reality Tools {#augmented-reality-tools}  
  Some examples of data visualisation can be seen on [the Sunlight Foundation tumblr](http://sunfoundation.tumblr.com/) or at the GovHack alumn [The Open Budget](http://www/.theopenbudget.org)
### buildAR  
   
buildAR was the world&#8217;s first AR Content Management System with the first early version launched back in 200\. as a bit of a test to see if people were interested in being able to create their own augmented experiences. MOB Labs officially launched the new improved buildAR at the Augmented Reality event in Silicon Valley in May 2011. ## Web Applications
   
[http://buildAR.com](http://buildar.com/) (normally a 1\. day free trial but GovHack attendees on the day will get a fully activated account for a month. If you are a GovHack attendee want full access now to play, just sign up for a trial and then forward your GovHack Eventbrite registration email to govhack [at] buildar.com and they&#8217;ll set you up for the free month fully activated account within a couple of days. With the rise of HTML5 technologies it is easier than ever to make a web application for engaging use of data.
  It's easy to quickly make a good looking and accessible webpage if you use a CSS framework like Bootstrap or Zurb Foundation.
### Other AR tools and references There are a variety of bootstrap themes like [Flat-UI](http://designmodo.com/flat-free/)
   
theAWEsomeWEB &#8211\. Future of the Augmented Web [http://theAWEsomeWEB.com](http://theawesomeweb.com/) Check out the visualisation tools listed in the data sections for web application tools like these [CSS Dashboard gauges](http://www.larentis.eu/donuts/)
   
Layar &#8211\. AR Browser - [http://layar.com](http://layar.com/) ### Examples
   
Junaio &#8211\. AR Browser - [http://junaio.com](http://junaio.com/)  
  #### PlanningAlerts
Aurasma &#8211\. AR Browser - [http://aurasma.com/](http://aurasma.com/)  
  [![Planning Alerts Screenshot](img/How-to-participate-in-GovHack_html_2f0199ff1-300x221.png "Planning Alerts Screenshot")](img/How-to-participate-in-GovHack_html_2f0199ff1.png)Description: Planning Alerts takes data from local government development applications and sends alerts to users based on what applications are lodged in their area.
Vuforia &#8211\. NFT based AR SDK - [http://qualcomm.com/solutions/<wbr>augmented-reality</wbr>](http://qualcomm.com/solutions/augmented-reality)  
  Programming Language: Ruby
String &#8211\. Marker based AR SDK - [http://poweredbystring.com/](http://poweredbystring.com/)  
  Source Control: [Git](https://github.com/openaustralia/planningalerts-app)
[pointcloud.io](http://pointcloud.io/) - SLAM based AR SDK - [http://pointcloud.io/](http://pointcloud.io/)  
  Issue Tracking: [Atlassian JIRA](http://tickets.openaustraliafoundation.org.au/browse/PA/)
ARToolkit &#8211\. Marker based AR SDK - [http://en.wikipedia.org/wiki/<wbr>ARToolKit</wbr>](http://en.wikipedia.org/wiki/ARToolKit)  
  #### LobbyLens
FLARToolkit &#8211\. Marker based AR SDK - [http://saqoo.sh/a/en/<wbr>flartoolkit/start-up-guide</wbr>](http://saqoo.sh/a/en/flartoolkit/start-up-guide)  
  [![](img/129-Screenshot-LobbyClue_-_Chromium-300x180.png "LobbyLens screenshot")](img/129-Screenshot-LobbyClue_-_Chromium.png)
Kooaba &#8211\. Visual search platform - [http://kooaba.com](http://kooaba.com/)  
  Description: Displays connections between government contracts, business details, politician responsibilities, lobbyists, clients of lobbyists, political donors and the location of these entities.
Catchoom &#8211\. Visual search platform - [http://catchoom.com/](http://catchoom.com/)  
  Programing Language: PHP
Google Googles &#8211\. Visual search app - [http://www.google.com/mobile/<wbr>goggles/#text</wbr>](http://www.google.com/mobile/goggles/#text)  
  Source Control: SVN (Subversion)
Vuzix 920AR &#8211\. Wearable display - [http://www.vuzix.com/consumer/<wbr>products_wrap920ar.html</wbr>](http://www.vuzix.com/consumer/products_wrap920ar.html)  
  Issue Tracking: A whiteboard
Project Glass &#8211\. Googles wearable display project - [http://www.youtube.com/watch?<wbr>v=9c6W4CCU9M4</wbr>](http://www.youtube.com/watch?v=9c6W4CCU9M4)  
  #### bus.lambdacomplex.org
Mixed Reality &#8211\. Nokia&#8217;s vision for wearable displays [http://www.youtube.com/watch?<wbr>v=CGwvZWyLiBU</wbr>](http://www.youtube.com/watch?v=CGwvZWyLiBU)  
  [![](img/How-to-participate-in-GovHack_html_3789acae-300x253.jpg "Bus.lambda screenshot")](img/How-to-participate-in-GovHack_html_3789acae.jpg)
City Lens &#8211\. Nokia&#8217;s latest AR app - [http://www.youtube.com/watch?<wbr>v=63lNPkl-EPE&amp;feature=youtu.be</wbr>](http://www.youtube.com/watch?v=63lNPkl-EPE&amp;feature=youtu.be)  
  Description: Online Canberra Bus Timetables and Trip Planner.
AR &#8211\. Wikipedia page - [http://en.wikipedia.org/wiki/<wbr>Augmented_reality</wbr>](http://en.wikipedia.org/wiki/Augmented_reality)  
  Programing Language: PHP/Ruby
Steve Mann &#8211\. Wearable Computing Pioneer - [http://en.wikipedia.org/wiki/<wbr>Steve_Mann</wbr>](http://en.wikipedia.org/wiki/Steve_Mann)  
  Source Control: Git
Thad Starner &#8211\. Wearable Computing Pioneer [http://en.wikipedia.org/wiki/<wbr>Thad_Starner</wbr>](http://en.wikipedia.org/wiki/Thad_Starner)  
  Issue Tracking: Github
Mark Weiser &#8211\. Father of Pervasive Computing [http://en.wikipedia.org/wiki/<wbr>Mark_Weiser</wbr>](http://en.wikipedia.org/wiki/Mark_Weiser)  
  ## Mobile
   
# Geographical Data Tools {#geographical-data-tools} If you want to get stared quickly with mobile application development, it's worth considering cross platform frameworks like http://www.sencha.com/products/touch http://phonegap.com/ http://cordova.apache.org/
   
Check out the[ GeoRabble Boundary Mapper&#8217;s Cookbook](http://georabble.org/2012/05/31/the-boundary-mappers-cookbook/) to see how you can tie all these things together! For a simple mobile app, a web application with a framewrok like jQuery Mobile can work quite well (as used on directory.gov.au)
   
  For data visualisation, there are a variety of graph widgets http://code.google.com/p/afreechart/ http://code.google.com/p/snowdon/ http://code.google.com/p/chartdroid/ http://androidplot.com/ http://code.google.com/p/achartengine/
   
  You may wish to consider backend frameworks like http://helios.io/ or https://www.parse.com/
   
  ### Examples
   
  Bureau of Meteorology Water Storage App http://icelab.com.au/work/bureau-of-meteorology/
   
  NZ Gov budget http://www.treasury.govt.nz/budget/app
   
   
  # Geographical Data Tools
   
  Check out the [GeoRabble Boundary Mapper's Cookbook](http://georabble.org/2012/05/31/the-boundary-mappers-cookbook/) to see how you can tie all these things together!
   
   
  ## Key datasets
  There are a variety of base layers like AGRI aerial imagery of Australia http://agri.openstreetmap.org/ or WMS services like http://irs.gis-lab.info/ wms or http://www.gdal.org/frmt_wms_openstreetmap_tms.xml
   
  Check out the [Geoscience Australia Geo Dataset search and preview](http://www.ga.gov.au/search/index.html#/showMap)
   
  ASGS from ABS including suburbs/postcodes andrewharvey4.wordpress.com postgis/asgs tutorial
  You can also get KML layers for various statistical measures on the ABS TableBuilder tool.
   
  ## Wrangling
   
  ### Converting
  There are many spatial data formats and often the one your tool requires is not the one the dataset is provided in.
  You can convert spatial datasets online with http://converter.mygeodata.eu/vector or locally using GDAL (which better for >10 megabyte datasets)
   
  ### Geocoding
   
  See this [introduction to geocoding](http://schoolofdata.org/2013/02/19/geocoding-part-i-introduction-to-geocoding/)
   
  Google Maps APIs allow you to convert an address to map co-ordinates (geocoding) but you must display on a Google Map. The easiest way to do is with a Google Spreadsheet/Fusion Table http://schoolofdata.org/2013/02/19/geocoding-part-ii-geocoding-data-in-a-google-docs-spreadsheet/
   
  If you need geocoding for more than display (working out the distance between points etc) or you don't want to use Google Maps, Cloudmade offers free OpenStreetMap based geocoding http://developers.cloudmade.com/projects/show/geocoding-http-api
   
## Analysis ## Analysis
   
   
### PostGIS ### PostGIS
   
[![](http://www.govhack.org/wp-content/uploads/postgisexample-300x130.jpg "postgisexample")](http://www.govhack.org/wp-content/uploads/postgisexample.jpg)PostGIS is an extension for the PostgreSQL database server that allows you to store and manipulate geospatial data on a large scale. For example finding which points are in an area or what points are closest . It is also very useful for storing geospatial data because it can convert between all major formats including ESRI Shape files and Google Earth/Maps KML. [![](img/postgisexample-300x130.jpg "postgisexample")](img/postgisexample.jpg)PostGIS is an extension for the PostgreSQL database server that allows you to store and manipulate geospatial data on a large scale. For example finding which points are in an area or what points are closest . It is also very useful for storing geospatial data because it can convert between all major formats including ESRI Shape files and Google Earth/Maps KML.
   
### Quantum GIS ### Quantum GIS
   
[![](http://www.govhack.org/wp-content/uploads/How-to-participate-in-GovHack_html_m50afbe88-300x160.jpg "QGIS Screenshot")](http://www.govhack.org/wp-content/uploads/How-to-participate-in-GovHack_html_m50afbe88.jpg)QGIS is a graphical desktop application that allows viewing and editing of geospatial data. Some good base maps are available by adding the WMS layer/server [http://irs.gis-lab.info/](http://irs.gis-lab.info/) [![](img/How-to-participate-in-GovHack_html_m50afbe88-300x160.jpg "QGIS Screenshot")](img/How-to-participate-in-GovHack_html_m50afbe88.jpg)QGIS is a graphical desktop application that allows viewing and editing of geospatial data. Some good base maps are available by adding the WMS layer/server [http://irs.gis-lab.info/](http://irs.gis-lab.info/)
   
  See this [Creating a Map in QGIS tutorial](http://schoolofdata.org/2013/04/27/creating-a-map-using-qgis/)
   
## Visualisation ## Visualisation
   
  ### Layar and other augmented reality tools
  [Layar](http://www.layar.com/) provides a platform for exploring a dataset by travelling to the actual locations of the data and looking through a smartphone. Custom markers (2D or 3D) seem to float in the air and can be clicked on for more information. You can even trigger an event like playing music when within a certain range of a location.
   
### Google Fusion Tables/ChartsBin/[OpenHeatMap](http://www.openheatmap.com/) ### Google Fusion Tables/ChartsBin/[OpenHeatMap](http://www.openheatmap.com/)
   
[![](http://www.govhack.org/wp-content/uploads/fusiontablesscreenshot-300x168.jpg "fusiontablesscreenshot")](http://www.govhack.org/wp-content/uploads/fusiontablesscreenshot.jpg)Input a numerical values and areas to a spreadsheet and maps are produced [![](img/fusiontablesscreenshot-300x168.jpg "fusiontablesscreenshot")](img/fusiontablesscreenshot.jpg)Input numerical values and areas to a spreadsheet and maps are produced where the areas are colored on a scale of the values
   
  http://www.peteraldhous.com/CAR/Making_maps_with_Google_Fusion_Tables.pdf tutorial or http://support.google.com/fusiontables/topic/2592754?hl=en&ref_topic=27020 for google help files
   
### [Cartographer.js](http://cartographer.visualmotive.com/) ### [Cartographer.js](http://cartographer.visualmotive.com/)
   
[![](http://www.govhack.org/wp-content/uploads/cartographerjs-300x187.png "cartographerjs screenshot")](http://www.govhack.org/wp-content/uploads/cartographerjs.png)Input data as JSON and maps are produced. [![](img/cartographerjs-300x187.png "cartographerjs screenshot")](img/cartographerjs.png)Input data as JSON and interactive maps are produced.
  You can also try d3 maps: http://bost.ocks.org/mike/map/
   
   
### OpenLayers/Google Maps/[Leaflet](http://leaflet.cloudmade.com/) ### OpenLayers/Google Maps/[Leaflet](http://leaflet.cloudmade.com/)
   
[![](http://www.govhack.org/wp-content/uploads/How-to-participate-in-GovHack_html_512fcbe1-300x173.jpg "OpenLayers Screenshot")](http://www.govhack.org/wp-content/uploads/How-to-participate-in-GovHack_html_512fcbe1.jpg)Display points and different layers. Leaflet is the easiest to use if you just want to show points with popups when clicked on. [![](img/How-to-participate-in-GovHack_html_512fcbe1-300x173.jpg "OpenLayers Screenshot")](img/How-to-participate-in-GovHack_html_512fcbe1.jpg)Display points and different layers. Leaflet is the easiest to use if you just want to show points with popups when clicked on.
  There are wrappers for Google maps like http://hpneo.github.com/gmaps/examples.html and Mapstraction that can make it easier to use too.
   
  If you need to customise the base map, try TileMill. See the [THE INSANELY ILLUSTRATED GUIDE TO YOUR FIRST DATA-DRIVEN TILEMILL MAP](http://dataforradicals.com/the-insanely-illustrated-guide-to-your-first-tile-mill-map/)
   
### NASA World Wind/Google Earth ### NASA World Wind/Google Earth
   
[![](http://www.govhack.org/wp-content/uploads/How-to-participate-in-GovHack_html_4dda24a4-300x261.jpg "WorldWind screenshot")](http://www.govhack.org/wp-content/uploads/How-to-participate-in-GovHack_html_4dda24a4.jpg)Google Earth provides 3\. viewing of KML/GML files which represent points and shapes, both through a desktop application and a web plugin. These can be extended with interactive features that allow you to view by timeline or have animated tours between different points. You can also develop and customise your own viewer with the open source [NASA World Wind toolkit.](http://goworldwind.org/demos/) [![](img/How-to-participate-in-GovHack_html_4dda24a4-300x261.jpg "WorldWind screenshot")](img/How-to-participate-in-GovHack_html_4dda24a4.jpg)Google Earth provides 3\. viewing of KML/GML files which represent points and shapes, both through a desktop application and a web plugin. These can be extended with interactive features that allow you to view by timeline or have animated tours between different points. You can also develop and customise your own viewer with the open source [NASA World Wind toolkit.](http://goworldwind.org/demos/)
   
### ###
   
# Tabular Data Tools {#tabular-data-tools} # Tabular Data Tools
   
  ## Wrangling
   
  ### data access
  #### Relational IO platform
   
  - Datasets from the new data.gov.au CKAN repository
  - Datasets from data.act.gov.au Socrata repository
  - Access to NLAs Trove API
  - Select data from data.nsw.gov.au (csv based)
  - Datasets from data.vic.gov.au (csv based)
  - Datasets from data.qld.gov.au (csv based)
  - Access to web services such as Flickr image search, Twitter Search API, Bing search API, Google Search API, Google geocoding, Textrazor language analysis.
   
  Teams will get their own read-only SQL-powered workspace that will give them access to all the above datasets / services allowing them to join and mashup data quickly and easily.
   
   
  ### conversion
  Converting between formats like json/xml or csv can be done online with http://shancarter.com/data_converter/
   
  ### correction
  Tabular data may have duplicate entries or incorrect formats (varying ways to enter dates/phonenumbers etc.). There are tools to quickly fix common problems:
   
  [DataWrangler](http://vis.stanford.edu/wrangler/)/[Google Refine](http://code.google.com/p/google-refine/)
   
  [![](img/google_refine_interface.png "google_refine_interface")](img/google_refine_interface.png)Clean up duplicate or inconsistent data entries.
   
  For the more adventureous, [Dedupe](https://github.com/open-city/dedupe) allows you to train a computer to deduplicate similarly named entities automatically.
   
  You can also use general purpose file manipulation tools like grep/awk/sed. These work best when you instruct them what search/change you need using Regular Expressions (RegEx) which you can learn more about at http://www.regexper.com/ and http://www.debuggex.com/?re=&str=
   
## Analysis ## Analysis
   
### Excel / Calc ### Excel / Google Docs
   
Great basic analysis and viewing. Older versions can be limited to 6500\. or so rows. Eg [http://www.tcij.org/training-material/car/data-mining/3474](http://www.tcij.org/training-material/car/data-mining/3474) Great basic analysis and viewing but older versions can be limited to 6500 rows. Eg [http://www.tcij.org/training-material/car/data-mining/3474](http://www.tcij.org/training-material/car/data-mining/3474) or [http://training.sunlightfoundation.com/module/data-visualizations-google-docs/](http://training.sunlightfoundation.com/module/data-visualizations-google-docs/)
   
### [DataWrangler](http://vis.stanford.edu/wrangler/)/[Google Refine](http://code.google.com/p/google-refine/) See this [Excel Data Journalism tutorial](http://schoolofdata.org/2013/04/24/using-excel-to-do-precision-journalism-an-update-from-the-school-of-data-journalism-in-perugia/) or [Excel addons for enhanced visualisation and analysis](http://www.clickz.com/clickz/column/2265548/5-free-excel-addins-to-help-digital-marketers-decipher-big-data)
   
[![](http://www.govhack.org/wp-content/uploads/google_refine_interface.png "google_refine_interface")](http://www.govhack.org/wp-content/uploads/google_refine_interface.png)Clean up duplicate or inconsistent data entries.  
   
### PostgreSQL/MySQL ### PostgreSQL/MySQL
   
[![](http://www.govhack.org/wp-content/uploads/How-to-participate-in-GovHack_html_209ee972.jpg "SQL screenshot")](http://www.govhack.org/wp-content/uploads/How-to-participate-in-GovHack_html_209ee972.jpg)Next step up, large datasets can be manipulated/extracted efficiently for example [http://www.postgresql.org/docs/8.4/static/tutorial-window.html](http://www.postgresql.org/docs/8.4/static/tutorial-window.html) , no built-in data visualisation though. [![](img/How-to-participate-in-GovHack_html_209ee972.jpg "SQL screenshot")](img/How-to-participate-in-GovHack_html_209ee972.jpg)Next step up, large datasets can be manipulated/extracted efficiently for example [http://www.postgresql.org/docs/8.4/static/tutorial-window.html](http://www.postgresql.org/docs/8.4/static/tutorial-window.html) , no built-in data visualisation though.
   
[Miso Dataset](http://misoproject.com/dataset/) See this [SQL for lightweight data analysis tutorial](http://schoolofdata.org/2013/03/26/using-sql-for-lightweight-data-analysis/)
   
 
   
### R Statistical Language ### R Statistical Language
   
[![](http://www.govhack.org/wp-content/uploads/rstudio-windows-300x249.png "rstudio-windows")](http://www.govhack.org/wp-content/uploads/rstudio-windows.png)Advanced data analysis, can find and visualise trends in large datasets. Some reference resources to learn the language [http://cran.r-project.org/doc/manuals/R-intro.html ](http://cran.r-project.org/doc/manuals/R-intro.html)There are also some addons that provide graphical interfaces that make it easier to use such as Rattle [http://rattle.togaware.com/](http://rattle.togaware.com/) , RStudio [http://rstudio.org/](http://rstudio.org/) or Deducer [http://www.deducer.org/pmwiki/pmwiki.php?n=Main.DeducerManual](http://www.deducer.org/pmwiki/pmwiki.php?n=Main.DeducerManual) [![](img/rstudio-windows-300x249.png "rstudio-windows")](img/rstudio-windows.png)
  R provides a platform for advanced data analysis which can find and visualise trends even in large datasets. Some reference resources to learn the language [R basic statistics and graphs](https://people.ifm.liu.se/marjon/R_intro_solutions.pdf) [http://cran.r-project.org/doc/manuals/R-intro.html ](http://cran.r-project.org/doc/manuals/R-intro.html)There are also some addons that provide graphical interfaces that make it easier to use such as Rattle [http://rattle.togaware.com/](http://rattle.togaware.com/) , RStudio [http://rstudio.org/](http://rstudio.org/) or Deducer [http://www.deducer.org/pmwiki/pmwiki.php?n=Main.DeducerManual](http://www.deducer.org/pmwiki/pmwiki.php?n=Main.DeducerManual)
   
  R's value lies in the wide array of libraries and addons you can use. For example [BigVis](http://blog.revolutionanalytics.com/2013/04/visualize-large-data-sets-with-the-bigvis-package.html) lets you visualise 10 Million data points in 5 seconds on an ordinary computer.
  Be sure to checkout the list of ["10 R packages I wish I knew about earlier"](http://blog.yhathq.com/puosts/10-R-packages-I-wish-I-knew-about-earlier.html)
   
  ggplot2 is the typical graphical output of R and is very powerful. See these tutorials for instructions: http://chartsnthings.tumblr.com/post/36978271916/r-tutorial-simple-charts http://flowingdata.com/2012/12/17/getting-started-with-charts-in-r/
  You can do some very creative plotting for example [putting pictures of Pokemon where their power level is on an X/Y axis](http://www.r-bloggers.com/to-plot-them-is-my-real-test/) or [a 2D plot with histograms for each dimension](http://www.r-bloggers.com/2d-plot-with-histograms-for-each-dimension-2013-edition/)
   
  To share your analysis with the world you can use [KnittR](http://yihui.name/knitr/) which to make reports. These can include google widgets/charts/maps with the [googlevis](http://www.r-bloggers.com/googlevis-0-3-2-is-released-better-integration-with-knitr/) package.
   
  For advanced interactive visualisation you can use [Shiny](http://www.rstudio.com/shiny/) which allows visitors to you page to adjust the R charts.
  Examples of Shiny use include:
  http://blog.ouseful.info/2012/11/28/quick-shiny-demo-exploring-nhs-winter-sit-rep-data/ https://github.com/timelyportfolio/shiny-d3-plot https://github.com/trestletech/shiny-sandbox/tree/master/grn
   
   
   
## Visualisation ## Visualisation
   
### [Tableau Desktop](http://www.tableausoftware.com/) ### [Tableau Desktop](http://www.tableausoftware.com/)
   
Create visualisations from various data formats by dragging and dropping. Free trial available on website. [![](http://www.govhack.org/wp-content/uploads/Tableau-Screenshot-300x190.jpg "Tableau Screenshot")](http://www.govhack.org/wp-content/uploads/Tableau-Screenshot.jpg) Create visualisations from various data formats by dragging and dropping. Free trial available on website. [![](img/Tableau-Screenshot-300x190.jpg "Tableau Screenshot")](img/Tableau-Screenshot.jpg)
   
### [Flotr2](http://www.humblesoftware.com/flotr2/)/[Google Chart Tools](https://developers.google.com/chart/) See this [Tableau Desktop Tutorial](http://schoolofdata.org/2013/04/27/ddjschool-tutorial-analysing-datasets-with-tableau-public/)
   
[![](http://www.govhack.org/wp-content/uploads/How-to-participate-in-GovHack_html_m11006fce-300x199.jpg "flotr2 screenshot")](http://www.govhack.org/wp-content/uploads/How-to-participate-in-GovHack_html_m11006fce.jpg)Javascript based charts for webpages. ### Web page (Javascript) graphs
  [Flotr2](http://www.humblesoftware.com/flotr2/)/[Google Chart Tools](https://developers.google.com/chart/)
  [![](img/How-to-participate-in-GovHack_html_m11006fce-300x199.jpg "flotr2 screenshot")](img/How-to-participate-in-GovHack_html_m11006fce.jpg)Javascript based charts for webpages.
  http://www.polychartjs.com/ Allows facetting and easy use of JSON data sets.
   
### D3.js (Data-Driven Documents) ### D3.js (Data-Driven Documents)
   
[![](http://www.govhack.org/wp-content/uploads/How-to-participate-in-GovHack_html_m90d8020-300x277.jpg "d3 screenshot")](http://www.govhack.org/wp-content/uploads/How-to-participate-in-GovHack_html_m90d8020.jpg)Javascript visualisations that are more interactive or intricate than charts. Can be hard to learn but there are examples and easier to use premade visualisations such as [word clouds](http://www.jasondavies.com/wordcloud/), [realtime filtering of barcharts](http://square.github.com/crossfilter/), or [bubble trees for comparing amount sizes](https://github.com/okfn/bubbletree). [![](img/How-to-participate-in-GovHack_html_m90d8020-300x277.jpg "d3 screenshot")](img/How-to-participate-in-GovHack_html_m90d8020.jpg)Javascript visualisations that are more interactive or intricate than charts. Can be hard to learn but there are examples and easier to use premade visualisations such as [word clouds](http://www.jasondavies.com/wordcloud/), [realtime filtering of barcharts](http://square.github.com/crossfilter/), or [bubble trees for comparing amount sizes](https://github.com/okfn/bubbletree).
  See these tutorials to get started: http://datadrivenjournalism.net/resources/data_driven_documents_defined http://bost.ocks.org/mike/chart/
### Processing.js  
   
# Graph (relationships and networks) Data Tools {#graph-relationships-and-networks-data-tools} # Unstructured (Text) Data Tools
  Most of the world's data isn't structured because it is contained in documents (webpages, tweets etc.). Sometimes it is possible to structure it, sometimes there are tools that are better suited it unstructured data.
  [Text analysis can be very valuable for transparency](http://overview.ap.org/blog/2013/05/video-text-analysis-in-transparency/)
  ## Wrangling
  For extracting data from webpages, checkout Scraperwiki pytemplate scrapy
   
  PDFs - http://source.mozillaopennews.org/en-US/articles/introducing-tabula/ for text PDFs or http://www.reporterslab.org/dochive/ for images (common in scanned document PDFs)
   
  If there is no way to form a table structure to be able to apply tabular data techniques , you need a more sophisticated analysis as detailed below.
   
  ## Analysing
  Natural Language Processing libraries like OpenNLP for Java or NLTK / [Pattern](https://github.com/clips/pattern) for Python allow you to extract information from text. For example, [finding the important keywords in a sentence automatically](http://thetokenizer.com/2013/05/09/efficient-way-to-extract-the-main-topics-of-a-sentence/)
   
  One of the most useful techniques found in these libraries is Named entity recognition which extracts the subjects named in a piece of text. You can find online services that will interpret text for you without having to install any libraries or write any code such as [Yahoo Content Analysis](http://developer.yahoo.com/contentanalysis/) or [TextRazor](http://www.textrazor.com/).
   
  A search engine just for your dataset can also help. Tools like Apache Lucene/Solr or ElasticSearch can help you index and search large datasets in new ways.
   
  For light weight analysis, try R or Ruby: http://www.r-bloggers.com/simple-text-mining-with-r/ http://blog.josephwilk.net/ruby/latent-semantic-analysis-in-ruby.html
   
  ## Visualising
   
  You can make word trees of blocks of text, webpages or twitter account and share them http://www.jasondavies.com/wordtree/
   
  "Overview automatically sorts thousands of documents into topics and sub-topics, by reading the full text of each one." Simply make a CSV file with two columns, id and text. 10,000 documents is a good limit for the current state of the system. https://www.overviewproject.org/
   
  For larger document sets or for alternative visualisations, try Jigsaw a desktop based application. http://www.cc.gatech.edu/gvu/ii/jigsaw/
   
   
   
  # Graph (relationships and networks) Data Tools
  Graph data can be very valuable for finding communities, hubs and connections between entities (the 6 degrees of separation). This is through the techniques of Social Network Analysis.
   
  You can also find "linked data", [tools for use are listed here](http://logd.tw.rpi.edu/tools_technologies) as well as [sgvizler](http://code.google.com/p/sgvizler/) for sparql graphing, [RelFinder for RDF exploration](http://www.visualdataweb.org/relfinder.php) and [Flint SPARQL editor](http://openuplabs.tso.co.uk/demos/sparqleditor). For more linked data tools, see the [govcamp useful tools wiki](http://govcampau.wikispaces.com/useful+tools)
   
## Analysis ## Analysis
   
### Neo4j ### R
   
http://www.slideshare.net/ianmcook/social-network-analysis-in-r
  http://is-r.tumblr.com/post/38240018815/making-prettier-network-graphs-with-sna-and-igraph
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.  
   
  ### Graph Databases
   
  [![](img/webadmin-data-300x127.png "Neo4\. web admin screenshot")](img/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 by [writing a java program](http://www.slideshare.net/maxdemarzi/etl-into-neo4j) or [spreadsheet](http://blog.neo4j.org/2013/03/importing-data-into-neo4j-spreadsheet.html) (for example, [Gmail contacts](http://blog.neo4j.org/2013/04/gmail-email-analysis-with-neo4j-and_24.html)). The fastest way to import data into Neo4j is the [REST batch import API](http://docs.neo4j.org/chunked/milestone/rest-api-batch-ops.html)
   
  There are other graph databases worth considering like [OrientDB](http://www.orientdb.org/) or [Titan](http://thinkaurelius.github.com/titan/)
  Major graph databases like these can be accessed using a common syntax called Gremlin or by writing a simple Java/Python/Ruby application. Queries can be tested in the built in data browser.
   
   
   
### [NetworkX](http://networkx.lanl.gov/index.html) ### [NetworkX](http://networkx.lanl.gov/index.html)
   
[![](http://www.govhack.org/wp-content/uploads/chess_masters-300x300.png "NetworkX")](http://www.govhack.org/wp-content/uploads/chess_masters.png) [![](img/chess_masters-300x300.png "NetworkX")](img/chess_masters.png)
   
NetworkX is a social network analysis library for python. Many advanced analyses built in like finding communities within a graph. Also good for converting data into graphs. NetworkX is a social network analysis library for python. Many advanced analyses built in like finding communities within a graph. Also good for converting data into graphs.
   
### Palantir See this [introduction to Social Network Analysis with NetworkX](http://www.cl.cam.ac.uk/~cm542/teaching/2011/stnapdfs/stna-lecture11.pdf)
   
Palantir make a good computer forensics tool, which they will showcase and give GovHack attendees access to for GovHack data analysis purposes. For more information check out:  
   
[http://palantir.com.au/](http://palantir.com.au/)  
   
## Visualisation ## Visualisation
   
  Proper visualisation of networks can be hard as described in this presentation [Visualising Networks: Beyond the Hairball](http://www.slideshare.net/OReillyStrata/visualizing-networks-beyond-the-hairball)
   
  ### Tree/Hierarchy visualisation
  Sometimes when you analyse a network what you actually have is a tree/hierarchy with no interconnections.
  In these cases, it's faster and more visually effective to use a Tree visualisation.
  You can run [TreeViz](http://www.randelshofer.ch/treeviz/) locally or use [d3 on a website](http://bl.ocks.org/mbostock/4063550), [step by step instructions for creating tree data for d3](http://blog.pixelingene.com/2011/07/building-a-tree-diagram-in-d3-js/)
  d3 also includes [treemaps - bubbles inside bubbles](http://bl.ocks.org/mbostock/4063530)
   
  ### Flow Visualisations
  Sometimes it's more about the magnitude (money? amount of communication?) of the connections between nodes.
  A sankey diagram can easily visualise this http://bost.ocks.org/mike/sankey/
   
  ### NodeXL for Microsoft Excel
   
  [NodeXL](http://nodexl.codeplex.com/) allows you to visualise networks/graphs quickly inside Excel.
   
### [Graphviz](http://www.graphviz.org/) ### [Graphviz](http://www.graphviz.org/)
   
[![](img/How-to-participate-in-GovHack_html_7579906d-300x184.png "Graphviz Screenshot")](img/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 ### Gephi
   
[![](http://www.govhack.org/wp-content/uploads/How-to-participate-in-GovHack_html_74d01d05-300x195.jpg "Gephi Screenshot")](http://www.govhack.org/wp-content/uploads/How-to-participate-in-GovHack_html_74d01d05.jpg)Desktop graph editor and renderer. Many good automatic layout algorithms even for very large graphs. [![](img/How-to-participate-in-GovHack_html_74d01d05-300x195.jpg "Gephi Screenshot")](img/How-to-participate-in-GovHack_html_74d01d05.jpg)Desktop graph editor and renderer. Many good automatic layout algorithms even for very large graphs.
   
  Many tools can produce input files for Gephi including Graph Databases and [a Excel Spreadsheet to map twitter social networks](http://dfreelon.org/2013/04/26/spreadsheet-converts-tweets-for-social-network-analysis-in-gephi/)
   
  If you need to distribute or customise Gephi-like functionality [Cytoscape](http://www.cytoscape.org/) provides a framework (looks much like Gephi user interface) to develop advanced interactive network visualisations in Java, including filtering and clustering.
   
### [sigma.js](http://sigmajs.org/) ### [sigma.js](http://sigmajs.org/)
   
[![](http://www.govhack.org/wp-content/uploads/How-to-participate-in-GovHack_html_m6006eaf3-300x130.jpg "Sigma.js Screenshot")](http://www.govhack.org/wp-content/uploads/How-to-participate-in-GovHack_html_m6006eaf3.jpg)Javascript graph viewer, can use GEXF files exported from tools like neo4j, gephi and NetworkX. [![](img/How-to-participate-in-GovHack_html_m6006eaf3-300x130.jpg "Sigma.js Screenshot")](img/How-to-participate-in-GovHack_html_m6006eaf3.jpg)Javascript graph viewer for displaying graphs on webpages without any other plugins/applications required. It can use GEXF files exported from tools like neo4j, gephi or NetworkX.
  It's also possible to [filter/search the displayed network in sigma.js](https://github.com/jacomyal/osdc2012-sigmajs-demo)
   
  [Cytoscape.js](https://github.com/cytoscape/cytoscape.js) can also be used for interactive web-based network visualisation.
Below is some additional information including a few previous GovHack projects to get you thinking ![:)](http://www.govhack.org/wp-includes/images/smilies/icon_smile.gif) More examples are available at [http://mashupaustralia.org/](http://mashupaustralia.org/).  
   
# Previous Project Examples {#previous-project-examples}  
   
## PlanningAlerts  
   
[![Planning Alerts Screenshot](http://www.govhack.org/wp-content/uploads/How-to-participate-in-GovHack_html_2f0199ff1-300x221.png "Planning Alerts Screenshot")](http://www.govhack.org/wp-content/uploads/How-to-participate-in-GovHack_html_2f0199ff1.png)Description: Planning Alerts takes data from local government development applications and sends alerts to users based on what applications are lodged in their area.  
   
Programming Language: Ruby  
   
Source Control: [Git](https://github.com/openaustralia/planningalerts-app)  
   
Issue Tracking: [Atlassian JIRA](http://tickets.openaustraliafoundation.org.au/browse/PA/)  
   
## LobbyLens  
   
[![](http://www.govhack.org/wp-content/uploads/129-Screenshot-LobbyClue_-_Chromium-300x180.png "LobbyLens screenshot")](http://www.govhack.org/wp-content/uploads/129-Screenshot-LobbyClue_-_Chromium.png)  
   
Description: Displays connections between government contracts, business details, politician responsibilities, lobbyists, clients of lobbyists, political donors and the location of these entities.  
   
Programing Language: PHP  
   
Source Control: SVN (Subversion)  
   
Issue Tracking: A whiteboard  
   
## Bus.lambdacomplex.org  
   
[![](http://www.govhack.org/wp-content/uploads/How-to-participate-in-GovHack_html_3789acae-300x253.jpg "Bus.lambda screenshot")](http://www.govhack.org/wp-content/uploads/How-to-participate-in-GovHack_html_3789acae.jpg)  
   
Description: Online Canberra Bus Timetables and Trip Planner.  
   
Programing Language: PHP/Ruby  
   
Source Control: Git  
   
Issue Tracking: Github  
   
# General Data Hacking and Programming References {#general-data-hacking-and-programming-references}  
   
   
[![](http://www.govhack.org/wp-content/uploads/How-to-participate-in-GovHack_html_m6a65720f-300x199.gif "Data Journalism Diagram")](http://www.govhack.org/wp-content/uploads/How-to-participate-in-GovHack_html_m6a65720f.gif)</dt>  
Illustration from Data Journalism Handbook, CC BY-SA 3.0</dd>  
   
   
 
   
[datajournalismhandbook.org](http://datajournalismhandbook.org/)  
   
You can learn the technical skills from scratch in Visualize This: The FlowingData Guide to Design, Visualization, and Statistics by Nathan Yau or for more advanced  
   
practical advice check out Data Analysis with Open Source Tools by Philipp K. Janert  
   
For further reading in this space  
   
[http://flowingdata.com/2012/04/27/data-and-visualization-blogs-worth-following/](http://flowingdata.com/2012/04/27/data-and-visualization-blogs-worth-following/)  
   
**Statistics**  
   
[http://greenteapress.com/thinkstats/html/index.html](http://greenteapress.com/thinkstats/html/index.html)  
   
**Programming**  
   
Programming is valuable skill for manipulating and displaying data.  
   
Basic tutorials for a variety of languages are available for free online or you can learn  
   
interactively with websites like [http://www.codecademy.com/](http://www.codecademy.com/#!/exercises/0\. for JavaScript or [http://www.learnpython.org/ ](http://www.learnpython.org/)or [http://tryruby.org](http://tryruby.org/)  
   
[https://developer.mozilla.org/en/JavaScript](https://developer.mozilla.org/en/JavaScript) &#8211\. especially for web applications and visualisations, you&#8217;ll need a basic understanding of JS. Common libraries like prototype or jQuery can help  
   
**Accessibility/User Experience**  
   
WCAG guidelines not only make a web app accessible but make it a better experience for all users! Even if not making an app, good to consider these things to do and not do: [http://www.w3.org/TR/WCAG/](http://www.w3.org/TR/WCAG/)  
   
   
   
#[Developer Tools For Your Computer]{#developer-tools-for-your-computer}  
   
### Source Control &#8211\. Git / Subversion  
   
[![](http://www.govhack.org/wp-content/uploads/Screenshot-at-2012-04-29-172132-300x235.png "Git Screenshot")](http://progit.org/book/)  
   
[http://progit.org/book/](http://progit.org/book/)  
   
[http://svnbook.red-bean.com/](http://svnbook.red-bean.com/)  
   
[http://tortoisesvn.net/](http://tortoisesvn.net/)  
   
[http://code.google.com/p/tortoisegit/](http://code.google.com/p/tortoisegit/)  
   
### Task Tracking - [Trac](http://trac.edgewall.org/) / [Redmine](http://www.redmine.org/) / [Bugzilla](http://www.bugzilla.org/)  
   
## [![](http://www.govhack.org/wp-content/uploads/trac-300x207.png "trac screenshot")](http://www.govhack.org/wp-content/uploads/trac.png)  
   
Issue/task trackers allow you to outline the tasks required for your project and assign them to people to do.  
   
file:a/index.php -> file:b/index.php
  <?php
  $wordpress = false;
  if (isset($_REQUEST["wordpress"])) $wordpress = true;
   
  if (!$wordpress) {
   
  ?>
<!DOCTYPE html> <!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]--> <!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]--> <!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]--> <!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]--> <!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title> <title></title>
<meta name="description" content=""> <meta name="description" content="">
<meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=device-width">
   
<!-- Place favicon.ico and apple-touch-icon.png in the root directory --> <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
   
<link rel="stylesheet" href="css/normalize.css"> <link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.1.min.js"></script> <script src="js/vendor/modernizr-2.6.1.min.js"></script>
</head> </head>
<body> <body>
<!--[if lt IE 7]> <!--[if lt IE 7]>
<p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p> <p class="chromeframe">You are using an outdated browser. <a href="http://browsehappy.com/">Upgrade your browser today</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to better experience this site.</p>
<![endif]--> <![endif]-->
   
<!-- Add your site or application content here --> <!-- Add your site or application content here -->
  <div id="toc"></div>
  <div id="wrapper">
  <section>
<?php <?php
  }
include_once "php-markdown/markdown.php"; include_once "php-markdown/markdown.php";
echo Markdown(file_get_contents("index.md")); $content = Markdown(file_get_contents("index.md"));
  $content = str_replace("<h1","</div><div><h1",$content);
  $content = str_replace("</div><div><h1>GovHack","<div><h1>GovHack",$content);
  $content .= "</div>";
  if ($wordpress) {
  $content = str_replace("<div><h1>","<div>[toggle title=\"",$content);
  $content = str_replace("</div>","[/toggle]</div>",$content);
  $content = str_replace("</h1>","\"]",$content);
   
  $content = str_replace("<img","<img width=\"300\" class=\"alignright size-medium\"",$content);
  $content = str_replace("img/","http://www.govhack.org/wp-content/uploads/",$content);
  }
  echo $content;
  if (!$wordpress) {
?> ?>
  </div>
  </section>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <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>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/plugins.js"></script>
<script src="js/main.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(){
   
  $('<div class="items"></div>').insertAfter('h1');
  $(".items").each(function() {
  $(this).stoc();
  });
  });
  </script>
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. --> <!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
<script> <script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']]; var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0]; (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js'; g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script')); s.parentNode.insertBefore(g,s)}(document,'script'));
</script> </script>
</body> </body>
</html> </html>
  <?php
  }
  ?>
file:b/js/jquery.stoc.js (new)
  (function ($) {
  $.fn.stoc = function (options) {
  //Our default options
  var defaults = {
  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 function () {
  //"cache" our target and search objects
  obj = $(this); //target
  //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 = "";
 
  obj.nextUntil('h1').each(function () {
  if ($(this).tagName == "h2" || $(this).tagName == "h3") {
  //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);
directory:b/js/toc (new)
 
directory:a/php-markdown -> directory:b/php-markdown
   
file:b/tools.iml (new)
  <?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="inheritedJdk" />
  <orderEntry type="sourceFolder" forTests="false" />
  </component>
  </module>
 
 
file:b/tools/tools.iml (new)
  <?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>