esteem chartgraph

Something About Charts…

Tony HirstDept of Communication & Systems

The Open University

Visualisation vs Sonification

(Visual vs. Audio perception)

Visual Analysis

vs.

Presentation Graphics

Where’s the data?

Viz Engine

Image

Data

3 flavours of <img>

http://example.com/myGraph.png

Data free

Google Image Charts

Data explicit in URL

Google Chart Tools

JSON Data

Progressive enhancementDOM as a data containing data

structure

HTML Table

Data tables…

Bitmap or vector?

From <img> to <canvas>

Using the canvas tag

Scripted charts

digraph test {

CSV [shape=box]KML [shape=box]JSON [shape=box]XML [shape=box]RDF [shape=box]HTML [shape=box]GoogleSpreadsheet [shape=Msquare]RDFTripleStore [shape=Msquare]"[SPARQL]" [shape=diamond]"[YQL]" [shape=diamond]"[GoogleVizDataAPI]" [shape=diamond]"<GoogleGadgets>" [shape=doubleoctagon]"<GoogleVizDataCharts>" [shape=doubleoctagon]"<GoogleMaps>" [shape=doubleoctagon]"<GoogleEarth>" [shape=doubleoctagon]"<JQueryCharts_etc>" [shape=doubleoctagon]

"[SPARQL]"->RDF;"[SPARQL]"->XML;"[SPARQL]"->CSV;"[SPARQL]"->JSON;JSON-> "<JQueryCharts_etc>";CSV->"{GoogleRefine}"CSV->ScraperWikiJSON->ScraperWiki"[YQL]"->ScraperWikiScraperWiki->CSVHTML->ScraperWikiHTML->"[YQL]""[SPARQL]"->"[YQL]""{GoogleRefine}"->CSV [style=dashed]CSV->"<Gephi>" [style=dashed]"<Gephi>"->CSV [style=dashed]RDF->"[YQL]”}

On the client

Gephi

[ nKoB4b]

[ nKoB4b]

“Programmed” Charts

plot srcfile using ($1):(column(focusCar) -$2) with lines title "VET", srcfile using ($1):(column(focusCar) -$3) with lines title "WEB", srcfile using ($1):(column(focusCar) -$4) with lines title "HAM", srcfile using ($1):(column(focusCar) -$5) with lines title "BUT", srcfile using ($1):(column(focusCar) -$6) with lines title "ALO", srcfile using ($1):(column(focusCar) -$7) with lines title "MAS", srcfile using ($1):(column(focusCar) -$8) with lines title "SCH", srcfile using ($1):(column(focusCar) -$9) with lines title "ROS", …

R

Server Side Apps

Flash or javascript

Google Fusion Tables

Embedded Apps

IBM Many Eyes

Templated Visualisations

Libraries

Where’s the data?

Data Image

Where’s the data?

Data

Image

Viz Engine

Data

Where’s the data?

Image

Viz Engine

Viz Engine

Where’s the data?

Image

Data

Where’s the data?

Viz Engine

Image

Data

http://blog.ouseful.info

@psychemedia