Your SlideShare is downloading. ×

Esteem chartgraph

863
views

Published on

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

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

Published in: Education, Business, Technology

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
863
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
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
  • Transcript

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