Quick Guide to Developing Visualizations

Aquire Data

Resources at the end

Tell a Story

What and why? What are the goals?

Explore First

Invested time skews perception. Iterate, prototype

Investigate

Be curious, be ready to answer questions

Program!

D3.js!

Short story - all D3.js does is bind objects to data

Works with anything graphical - svg is the most common, but canvas, divs, etc can be used

My first D3.js visualization

Transitions are very easy

CO School Example

svg.selectAll("#popBar")
	.attr({
		fill: color1
	})
	.transition()
	.duration(1000)
	.ease("bounce")
	.attr({
		fill: color2
	});
					

Maps!

GeoJSON to get the file, D3 can read it in

The only problem is the projection numbers - Github

Minneapolis Crime Map

 var geoJson = d3.json("data/minneapolis.geojson", function(collection) {
        neigh
            .selectAll("path")
            .data(collection.features)
            .enter()
            .append("path")
            .attr(
                {
                    "d" : path,
                    fill : "#666666",
                    stroke : "#000000"
                }
            );
    });
                    

Everything else!

D3js.org Examples

Biovisualize D3.js gallery

Learning D3.js

Self Driven

Tutorials

Google, Enjalot Mixtapes

Sandboxes

bl.ocks.org

tributary.io

Books

Getting Started with D3

Interactive Data Visualization

Online Communities

@DashingD3js

@d3visualization

Google Groups (D3-js)

IRC - #d3.js on Freenode

Local Meetups

Twin Cities Visualization Group

JavascriptMN

WebMN

Code For America, Twin Cities

Open Twin Cities

Minneapolis Quantified Self

Finding Projects/Data

ScraperWiki.com

Kaggle.com

Other contests (Github)

Tech.mn - Hackathons, etc

Open Twin Cities' List of Data Sources

Ask!

Related

Miso Dataset

SQL-ish way to get data in Javascript (aggregations, filters)

Delimited, XML, JSON, custom parsing

var dataSet = new Miso.Dataset({
    url : 'http://api.remote.com/something',	
    interval: 10000,
    sync: true,
    jsonp : true,
    resetOnFetch: true
});

dataSet.fetch({
    success : function() {
        this.each(
            function(row){
                row.attribute;
			});
    }
});
					

JQuery Deferreds!

Also works for functions that need to return things

Example of use

var functionAPromise = functionA();
functionAPromise.done(
    function(){
        functionB();
    }
);

function functionA(){
    var def = $.Deferred();
    //do things
    def.resolve();
    return def.promise();
}
                        

Other Libraries

NVD3 - Still uses Javascript, just simplified

Vega - Define chart in JSON

Rickshaw - Simplified time series charts

Cubism - Simplified realtime monitoring time series charts

Etc

The Functional Art by Alberto Cairo

Processing - Easy to learn