esteem chartgraph
DESCRIPTION
Some of the things to consider when putting together a web based educational "charting solution"TRANSCRIPT
![Page 1: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/1.jpg)
Something About Charts…
Tony HirstDept of Communication & Systems
The Open University
![Page 2: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/2.jpg)
Visualisation vs Sonification
(Visual vs. Audio perception)
![Page 3: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/3.jpg)
Visual Analysis
vs.
Presentation Graphics
![Page 4: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/4.jpg)
Where’s the data?
Viz Engine
Image
Data
![Page 5: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/5.jpg)
3 flavours of <img>
![Page 6: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/6.jpg)
http://example.com/myGraph.png
Data free
![Page 7: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/7.jpg)
Google Image Charts
Data explicit in URL
![Page 8: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/8.jpg)
![Page 9: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/9.jpg)
Google Chart Tools
JSON Data
![Page 10: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/10.jpg)
![Page 11: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/11.jpg)
![Page 12: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/12.jpg)
![Page 13: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/13.jpg)
Progressive enhancementDOM as a data containing data
structure
HTML Table
![Page 14: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/14.jpg)
Data tables…
![Page 15: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/15.jpg)
Bitmap or vector?
![Page 16: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/16.jpg)
From <img> to <canvas>
![Page 17: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/17.jpg)
Using the canvas tag
![Page 18: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/18.jpg)
Scripted charts
![Page 19: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/19.jpg)
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]”}
![Page 20: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/20.jpg)
![Page 21: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/21.jpg)
On the client
![Page 22: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/22.jpg)
Gephi
![Page 23: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/23.jpg)
[ nKoB4b]
![Page 24: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/24.jpg)
[ nKoB4b]
![Page 25: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/25.jpg)
![Page 26: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/26.jpg)
“Programmed” Charts
![Page 27: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/27.jpg)
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", …
![Page 28: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/28.jpg)
R
![Page 29: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/29.jpg)
Server Side Apps
![Page 30: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/30.jpg)
![Page 31: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/31.jpg)
Flash or javascript
![Page 32: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/32.jpg)
![Page 33: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/33.jpg)
![Page 34: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/34.jpg)
![Page 35: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/35.jpg)
Google Fusion Tables
![Page 36: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/36.jpg)
Embedded Apps
![Page 37: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/37.jpg)
IBM Many Eyes
![Page 38: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/38.jpg)
Templated Visualisations
![Page 39: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/39.jpg)
![Page 40: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/40.jpg)
Libraries
![Page 41: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/41.jpg)
![Page 42: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/42.jpg)
Where’s the data?
Data Image
![Page 43: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/43.jpg)
Where’s the data?
Data
Image
Viz Engine
![Page 44: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/44.jpg)
Data
Where’s the data?
Image
Viz Engine
![Page 45: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/45.jpg)
Viz Engine
Where’s the data?
Image
Data
![Page 46: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/46.jpg)
Where’s the data?
Viz Engine
Image
Data
![Page 47: Esteem chartgraph](https://reader033.vdocuments.net/reader033/viewer/2022061220/54bc30b34a79593b688b464a/html5/thumbnails/47.jpg)
http://blog.ouseful.info
@psychemedia