Something About Charts…<br />Tony Hirst<br />Dept of Communication & Systems<br />The Open University<br />
VisualisationvsSonification(Visual vs. Audio perception)<br />
Visual Analysisvs.Presentation Graphics<br />
Where’s the data?<br />Viz Engine<br />Image<br />Data<br />
3flavours of <img><br />
Data free<br />http://example.com/myGraph.png<br />
Data explicit in URL<br />Google Image Charts<br />
JSON Data<br />Google Chart Tools<br />
HTML Table<br />Progressive enhancementDOM as a data containing data structure<br />
Data tables…<br />
Bitmap or vector?<br />
From <img> to <canvas><br />
Using the canvas tag<br />
Scripted charts<br />
digraph test {<br />CSV [shape=box]<br />KML [shape=box]<br />JSON [shape=box]<br />XML [shape=box]<br />RDF [shape=box]<b...
On the client<br />
Gephi<br />
[ nKoB4b] <br />
[ nKoB4b] <br />
“Programmed” Charts<br />
plot srcfile using ($1):(column(focusCar) -$2) with lines title "VET", srcfile using ($1):(column(focusCar) -$3) with line...
R<br />
Server Side Apps<br />
Flash or javascript<br />
Google Fusion Tables<br />
Embedded Apps<br />
IBM Many Eyes<br />
TemplatedVisualisations<br />
Libraries<br />
Where’s the data?<br />Data<br />Image<br />
Where’s the data?<br />Data<br />Image<br />Viz Engine<br />
Data<br />Where’s the data?<br />Image<br />Viz Engine<br />
Viz Engine<br />Where’s the data?<br />Image<br />Data<br />
Where’s the data?<br />Viz Engine<br />Image<br />Data<br />
http://blog.ouseful.info@psychemedia<br />
Upcoming SlideShare
Loading in …5
×

Esteem chartgraph

1,130 views

Published on

Some of the things to consider when putting together a web based educational "charting solution"

Published in: Education, Business, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,130
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • It seems to me that there are three ways of rendering an image via an HTML img tag.
  • Charts generated on a server can be referenced via a data opaque URI. Note that the image may be constructed on the fly on the server. CGI arguments contained within the URL may be used to determine different attributes relating to images created on the fly; for example, this approach could be used to simply set the size of an image.
  • The data and chart settings are contained within the URL. URL length places a limit on the amount of data and styling/configuration information that can pushed into the image.
  • Data is stored in a Javascript data structure, typically a Javascript object. Data may be sourced from an external location via a JSON or XML feed. Recent releases of the Google ????? Allow a complex datatabledatastructure to be miantained in memory that can be queried using a SQL like language to create new views over the data on the fly.
  • Charts are constructed using data that is sourced via an HTML table that may also be rendered within the page. This supports a reasonable level of accessibility.
  • Bitmap image has pixel values explicitly set according to grid; vector image is constructed from a textual description of how lines and points need to be placed relative to each other.
  • InclSVGl SVG –XML description of an image built up from component geometric parts
  • Graphviz et al
  • Google Motion Chart, LinkedIn InMap
  • Google Motion Chart, LinkedIn InMap
  • Google Motion Chart, LinkedIn InMap
  • Esteem chartgraph

    1. 1. Something About Charts…<br />Tony Hirst<br />Dept of Communication & Systems<br />The Open University<br />
    2. 2. VisualisationvsSonification(Visual vs. Audio perception)<br />
    3. 3. Visual Analysisvs.Presentation Graphics<br />
    4. 4. Where’s the data?<br />Viz Engine<br />Image<br />Data<br />
    5. 5. 3flavours of <img><br />
    6. 6. Data free<br />http://example.com/myGraph.png<br />
    7. 7. Data explicit in URL<br />Google Image Charts<br />
    8. 8.
    9. 9. JSON Data<br />Google Chart Tools<br />
    10. 10.
    11. 11.
    12. 12.
    13. 13. HTML Table<br />Progressive enhancementDOM as a data containing data structure<br />
    14. 14. Data tables…<br />
    15. 15. Bitmap or vector?<br />
    16. 16. From <img> to <canvas><br />
    17. 17. Using the canvas tag<br />
    18. 18. Scripted charts<br />
    19. 19. digraph test {<br />CSV [shape=box]<br />KML [shape=box]<br />JSON [shape=box]<br />XML [shape=box]<br />RDF [shape=box]<br />HTML [shape=box]<br />GoogleSpreadsheet [shape=Msquare]<br />RDFTripleStore [shape=Msquare]<br />"[SPARQL]" [shape=diamond]<br />"[YQL]" [shape=diamond]<br />"[GoogleVizDataAPI]" [shape=diamond]<br />"<GoogleGadgets>" [shape=doubleoctagon]<br />"<GoogleVizDataCharts>" [shape=doubleoctagon]<br />"<GoogleMaps>" [shape=doubleoctagon]<br />"<GoogleEarth>" [shape=doubleoctagon]<br />"<JQueryCharts_etc>" [shape=doubleoctagon]<br />"[SPARQL]"->RDF;<br />"[SPARQL]"->XML;<br />"[SPARQL]"->CSV;<br />"[SPARQL]"->JSON;<br />JSON-> "<JQueryCharts_etc>";<br />CSV->"{GoogleRefine}"<br />CSV->ScraperWiki<br />JSON->ScraperWiki<br />"[YQL]"->ScraperWiki<br />ScraperWiki->CSV<br />HTML->ScraperWiki<br />HTML->"[YQL]"<br />"[SPARQL]"->"[YQL]"<br />"{GoogleRefine}"->CSV [style=dashed]<br />CSV->"<Gephi>" [style=dashed]<br />"<Gephi>"->CSV [style=dashed]<br />RDF->"[YQL]”<br />}<br />
    20. 20.
    21. 21. On the client<br />
    22. 22. Gephi<br />
    23. 23. [ nKoB4b] <br />
    24. 24. [ nKoB4b] <br />
    25. 25.
    26. 26. “Programmed” Charts<br />
    27. 27. 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", …<br />
    28. 28. R<br />
    29. 29. Server Side Apps<br />
    30. 30.
    31. 31. Flash or javascript<br />
    32. 32.
    33. 33.
    34. 34.
    35. 35. Google Fusion Tables<br />
    36. 36. Embedded Apps<br />
    37. 37. IBM Many Eyes<br />
    38. 38. TemplatedVisualisations<br />
    39. 39.
    40. 40. Libraries<br />
    41. 41.
    42. 42. Where’s the data?<br />Data<br />Image<br />
    43. 43. Where’s the data?<br />Data<br />Image<br />Viz Engine<br />
    44. 44. Data<br />Where’s the data?<br />Image<br />Viz Engine<br />
    45. 45. Viz Engine<br />Where’s the data?<br />Image<br />Data<br />
    46. 46. Where’s the data?<br />Viz Engine<br />Image<br />Data<br />
    47. 47. http://blog.ouseful.info@psychemedia<br />

    ×