put sections into divs
--- a/README.md
+++ b/README.md
@@ -1,64 +1,4 @@
-# [HTML5 Boilerplate](http://html5boilerplate.com)
+# GovHack toolkit
-HTML5 Boilerplate is a professional front-end template for building fast,
-robust, and adaptable web apps or sites.
+Collection of resources for data analysis and visualisation
-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.
-
--- a/index.md
+++ b/index.md
@@ -120,14 +120,10 @@
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
+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
Or for Ruby on Rails there is is https://github.com/elc/rapi_doc https://github.com/Pajk/apipie-rails
- better apis https://github.com/liip/LiipHelloBundle
-
- http://amberonrails.com/building-stripes-api/
-
-example WeatherTree weather API
+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 {#data-visualisation}
@@ -144,7 +140,7 @@
Also check out [http://thejit.org](http://thejit.org/) & [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/)
-For more information on the theory of data visualisation check out the (Stanford CS448B notes)[https://graphics.stanford.edu/wikis/cs448b-12-fall/]
+For more information on the theory of data visualisation check out the [Stanford CS448B notes](https://graphics.stanford.edu/wikis/cs448b-12-fall/)
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)
@@ -152,11 +148,10 @@
## Web Applications
With the rise of HTML5 technologies it is easier than ever to make a web application for engaging use of data.
-
- - css framework like bootstrap or zurb foundation
-- css gauges http://www.larentis.eu/donuts/
-- bootstrap themes, web fonts, css sprites, icon fonts
- - http://designmodo.com/flat-free/ http://designmodo.github.com/Flat-UI/
+It's easy to quickly make a good looking and accessible webpage if you use a CSS framework like Bootstrap or Zurb Foundation.
+There are a variety of bootstrap themes like [Flat-UI](http://designmodo.com/flat-free/)
+
+Check out the visualisation tools listed in the data sections for web application tools like these [CSS Dashboard gauges](http://www.larentis.eu/donuts/)
### Examples
@@ -197,14 +192,14 @@
## Mobile
-Frameworks, http://www.sencha.com/products/touch http://phonegap.com/ http://cordova.apache.org/
-
-html5 jquery mobile like directory.gov.au
+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/
+
+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/
-
-Backend frameworks http://helios.io/ https://www.parse.com/
+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/
@@ -217,9 +212,8 @@
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
-base layers like agri http://agri.openstreetmap.org/, http://irs.gis-lab.info/ wms or http://www.gdal.org/frmt_wms_openstreetmap_tms.xml
+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
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.
@@ -268,7 +262,7 @@
[](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.
+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
@@ -288,16 +282,13 @@
[](img/google_refine_interface.png)Clean up duplicate or inconsistent data entries.
-Can also use general purpose tools; grep/awk/sed
-regex http://www.regexper.com/ http://www.debuggex.com/?re=&str=
+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
### Excel / Google Docs
-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)
-
-http://training.sunlightfoundation.com/module/data-visualizations-google-docs/
+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/)
### PostgreSQL/MySQL
@@ -308,14 +299,19 @@
[](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 [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)
- - http://blog.yhathq.com/posts/10-R-packages-I-wish-I-knew-about-earlier.html
- - 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
- - http://www.r-bloggers.com/video-simpler-tricks-and-tools-help-debugging-git-latex-and-workflow-with-r-by-prof-rob-hyndman/
- - 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/
- - http://chartsnthings.tumblr.com/post/36978271916/r-tutorial-simple-charts http://flowingdata.com/2012/12/17/getting-started-with-charts-in-r/
-
- http://www.r-bloggers.com/to-plot-them-is-my-real-test/
- http://blog.revolutionanalytics.com/2013/04/visualize-large-data-sets-with-the-bigvis-package.html 10 Million Points in 5 seconds.
+ 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/)
+
+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
@@ -331,12 +327,8 @@
### D3.js (Data-Driven Documents)
[](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).
-d3
- - http://datadrivenjournalism.net/resources/data_driven_documents_defined
- - http://www.benmcmahen.com/blog/posts/50eb57d55a94d35262000001 d3 svg
- - 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
+See these tutorials to get started: http://datadrivenjournalism.net/resources/data_driven_documents_defined http://bost.ocks.org/mike/chart/
+
### Processing.js
@@ -369,10 +361,6 @@
# Graph (relationships and networks) Data Tools {#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.
- - http://www.slideshare.net/OReillyStrata/visualizing-networks-beyond-the-hairball
- - http://blog.sciencenet.cn/blog-554179-622011.html SNA tools catalog
- - https://github.com/jacomyal/osdc2012-sigmajs-demo sigmajs filtering/searching
-
## Analysis
@@ -401,6 +389,9 @@
## 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.
@@ -422,4 +413,5 @@
### [sigma.js](http://sigmajs.org/)
[](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)
+
--- a/index.php
+++ b/index.php
@@ -27,7 +27,7 @@
<section>
<?php
include_once "php-markdown/markdown.php";
-echo Markdown(file_get_contents("index.md"));
+echo str_replace("</div><div><h1>GovHack","<div><h1>GovHack",str_replace("<h1>","</div><div><h1>",Markdown(file_get_contents("index.md"))));
?>
</div>
</section>
@@ -41,13 +41,13 @@
$('#toc').toc({
'selectors': 'h1'
});
- /*$(function(){
+ $(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. -->
<script>
--- a/js/toc
+++ b/js/toc