Visualization Techniques and SVG Generation Assignment

Visualization Toolkits A variety of useful toolkits have been designed to help support information visualization applications. Some include support for the full visualization pipeline from data to interactive graphics, while others focus only on a subset, typically graphics and interaction.

D3 – A JavaScript library for data-driven DOM manipulation, interaction and animation. Includes utilities for visualization techniques and SVG generation.

Processing and Processing.js – A popular Java-like graphics and interaction language and IDE. Processing has a strong user community with many examples.

Protovis – JavaScript visualization language, predecessor of d3. o HTML/! JavaScript/XML – use standard web technologies to build the visualization. You

may use libraries such as jQuery, Dojo, and the Google Maps API to help build your visualization.

PolyMaps – create map displays with JavaScript & SVG o Flare – Visualization toolkit for Adobe Flash o Modest Maps – Mapping library for Flash o Prefuse – Visualization toolkit for Java o Improvise – Java system supporting coordinated views o InfoVis Toolkit – A Java visualization library, from INRIA France o Piccolo – A Java library for zoomable UIs, from the University of Maryland (Java and

.NET) o VTK – A scientific visualization library (C++ with wrappers for other languages)

Statistical Data Analysis Tools o Microsoft Excel– supports charts, graphs, or histograms generated from specified

groups of cells. o Tableau for Student– get Tableau free license as a student. o Tableau Public – a free version of Tableau which publishes to the web o GGplot2 – a graphics language for R o GGobi – visualizations for multivariate data o Improvise – a visualization tool supporting a variety of visualization types o MATLAB – optimized for solving engineering and scientific problems. Network Analysis Tools o NodeXL graph analysis plug-in for Excel

http://mbostock.github.com/d3

http://processing.org/

http://processingjs.org/

http://protovis.org/

http://jquery.com/

http://dojotoolkit.org/

https://developers.google.com/maps

http://polymaps.org/

http://flare.prefuse.org/

http://modestmaps.com/

http://prefuse.org/

http://www.cs.ou.edu/~weaver/improvise/

http://ivtk.sourceforge.net/

http://www.piccolo2d.org/

http://www.vtk.org/

https://office.live.com/start/Excel.aspx

http://www.tableausoftware.com/student/

http://www.tableausoftware.com/public/

http://had.co.nz/ggplot2/

http://www.r-project.org/

http://www.ggobi.org/

http://www.cs.ou.edu/~weaver/improvise/

https://www.mathworks.com

http://www.codeplex.com/NodeXL

Gephi – a graph analysis application o GUESS – a combined visual/scripting interface for graph analysis o Pajek – another popular network analysis tool o NetworkX – graph analysis library for Python o SNAP – graph analysis library for C++

Color Tools o kuler – Color Palette Generator o Color Brewer

Tutorials & Tips

In addition to our workshops, these tutorials could be useful for Assignment 3, final project, and your future visualization work.

HTML, CSS o Basics:

Mozilla Develop Network (HTML, CSS). o CSS Zen Garden

Extras o Sass is easy to learn and powerful way to write o Compass contains a lot of reusable patterns. o Twitter Bootstrap is a popular template.

Javascript o Fundamental JavaScript Concepts

Mozilla Developer Network o JavaScript Garden is a good reference to language quirks and gotchas. o Eloquent Javascript – free online book by Marijn Haverbeke o A re-introduction to JavaScript (JS Tutorial) on Mozilla Developer Network o JavaScript: The Good Parts – Douglas Crockford (See also his YUI videos) o Learning JavaScript Design Patterns by Addy Osmani

Debugging:

Learn to use the Webkit Inspector (or Firebug if you’re a firefox fan.)

http://gephi.org/

http://graphexploration.cond.org/

http://pajek.imfm.si/doku.php

http://networkx.lanl.gov/

http://snap.stanford.edu/

http://kuler.adobe.com/

http://colorbrewer2.org/

https://developer.mozilla.org/en-US/learn/html

https://developer.mozilla.org/en-US/learn/css

http://www.csszengarden.com/

http://sass-lang.com/

http://compass-style.org/

http://courses.cs.washington.edu/courses/cse512/14wi/getbootstrap.com

https://developer.mozilla.org/en-US/docs/Web/JavaScript

http://bonsaiden.github.io/JavaScript-Garden/

http://eloquentjavascript.net/

https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript?redirectlocale=en-US&redirectslug=JavaScript%252FA_re-introduction_to_JavaScript

http://www.amazon.com/dp/0596517742

ahttp://yuiblog.com/crockford/

http://addyosmani.com/resources/essentialjsdesignpatterns/book/

http://jtaby.com/blog/2012/04/23/modern-web-development-part-1

Learn useful short keys– the basic one is cmd+shift+Ifor opening inspector. Then you can learn more by clicking the gear button on the bottom right and see the shortcuts tab

use JSHint to avoid syntactic bugs o Addy Osmani’s list of good JavaScript style guide o Javascript MVC

Backbone.js- Simple MVC Backbone o Backbone Fundamentals

Angular.js – better but takes more time to learn (say 1-2 weeks to really understand concepts) o Start with egghead.io and thinkster.io. o Angular’s official document is a pain. When you look at it, make sure to look at

comments so you learn from others’ confusion. Hopefully the community is big, so it should get better overtime though.

Use yeoman o Useful stuff from mg-newsletter

Angular for jQuery developer o Make sure to have AngularJS Batarang in Chrome so you can debug scope.

Javascript Library like Lodash (An arguably better fork of underscore.) – make sure to use them only if you need. Sometimes d3 helpers are enough. o a lodash tutorial

Need an in-memory database for your vis prototype? – try datavore or crossfilter o Syntax alternatives: Coffeescript, MS TypeScript d3.js o Interactive Data Visualization for the Web Scott Murray(free online version)

Scott Murray’s Original tutorial (shorter) o Vadim’s Intro Slides o Jérôme Cukier & Scott Murray’s d3 tutorial at Strata 2013 (slides)

(older) d3 tutorial at Visweek 2012 by Jérôme Cukier, Jeff Heer, and Scott Murray. (source, demo, cheatsheet)

More extensive list of examples can be found in d3’s tutorial page and gallery and Christophe Viau’s gallery.

Git & Github

http://www.jshint.com/

https://plus.google.com/+AddyOsmani/posts/h37ZvatmKqV

http://addyosmani.github.io/backbone-fundamentals/

http://egghead.io/

http://thinkster.io/

http://courses.cs.washington.edu/courses/cse512/14wi/yeoman.io

http://www.ng-newsletter.com/posts/angular-for-the-jquery-developer.html?utm_source=ng-newsletter&utm_campaign=5e1542e9ab-AngularJS_Newsletter_11_19_1311_18_2013&utm_medium=email&utm_term=0_fa61364f13-5e1542e9ab-93794813

https://github.com/lodash/lodash

http://underscorejs.org/

http://tech.pro/tutorial/1611/functional-javascript

https://github.com/StanfordHCI/datavore

http://square.github.io/crossfilter/

http://coffeescript.org/

http://www.typescriptlang.org/

http://chimera.labs.oreilly.com/books/1230000000345

http://chimera.labs.oreilly.com/books/1230000000345/index.html

http://alignedleft.com/tutorials/d3/

http://vogievetsky.github.io/IntroD3/#1

https://github.com/alignedleft/strata-d3-tutorial

https://github.com/alignedleft/strata-d3-tutorial/raw/master/Strata%25202013%2520Slides.pdf

http://jeromecukier.net/presentations/d3-tutorial/

http://jeromecukier.net/d3-tutorial.zip

http://vis.stanford.edu/jheer/talks/VisWeek2012

http://bit.ly/d3cheatsheet

https://github.com/mbostock/d3/wiki/Tutorials

https://github.com/mbostock/d3/wiki/Gallery

http://christopheviau.com/d3list/gallery.html

Git Tutorials o Git Official Docs o Visual Git Guide o A Successful Branching Model

Github o Use Github’s issue tracker, so you can refer to issues in your commit messages

using # followed by issue no. o Working in a team? Use Github’s Pull Request so you can do code review.

Pull Request Workflows by Patrick Cozzi o Extras

Interactive Rebase o Need to merge multiple repos (e.g. using datavore in another project)?

Use git subtree and DO NOT use git submodule. o GUI

Using git with command line is generally fast but using SourceTree is easier for reviewing your code before committing or committing a part of your changes and reduce chances that you will run a wrong command (such as push wrong branch to master).

More Tips o Atomic Commit is a good practice. o Stash is useful when you have unfinished messy things and need to switch

branches to work on something else.

Data Sets

Civic Data Sets for the Pacific Northwest o 30 Places to Find Open Data on the Web – Visual.ly o Office for National Statistics (UK) – a repository of detailed statistics about Great

Britain and Northern Irland o World Bank Data Catalog o CDC NCHS Data – CDC’s National Center for Health Statistics Data Access o Machine Learning Repository – large variety of maintained data sets

http://git-scm.com/doc

http://marklodato.github.io/visual-git-guide/index-en.html

http://nvie.com/posts/a-successful-git-branching-model/

https://help.github.com/articles/using-pull-requests

http://cesium.agi.com/2013/10/08/GitHub-Pull-Request-Workflows/

https://help.github.com/articles/interactive-rebase

https://github.com/StanfordHCI/datavore

https://help.github.com/articles/working-with-subtree-merge

http://ayende.com/blog/4746/the-problem-with-git-submodules

http://sourcetreeapp.com/

http://en.wikipedia.org/wiki/Atomic_commit

http://git-scm.com/book/en/Git-Tools-Stashing

http://nwdata.org/

http://blog.visual.ly/data-sources/

http://www.statistics.gov.uk/default.asp

http://data.worldbank.org/data-catalog

http://www.cdc.gov/nchs/data_access/data_tools.htm

http://archive.ics.uci.edu/ml/

Links

Visualization Blogs o Flowing Data o Information Aesthetics o Visual Complexity o Edward Tufte: Ask E.T. Forum o Statistical Modeling, Causal Inference, and Social Science o Information is Beautiful o Datalysed o Kelso Cartography o Visual

Other Resources Lists o Tamara Munzner’s Course at UBC o John Stasko’s Course at Georgia Tech

http://flowingdata.com/

http://infosthetics.com/

http://www.visualcomplexity.com/vc/

http://www.edwardtufte.com/bboard/q-and-a?topic_id=1

http://www.perceptualedge.com/blog/

http://www.informationisbeautiful.net/

http://datalysed.com/

http://kelsocartography.com/blog/?tag=narrative

http://blog.visual.ly/

http://www.cs.ubc.ca/~tmm/courses/533-11/

http://www.cc.gatech.edu/~stasko/7450/resources.html