Upload
tony-hirst
View
868
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Some of the things to consider when putting together a web based educational "charting solution"
Citation preview
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