Your SlideShare is downloading. ×
0
Esteem chartgraph
Esteem chartgraph
Esteem chartgraph
Esteem chartgraph
Esteem chartgraph
Esteem chartgraph
Esteem chartgraph
Esteem chartgraph
Esteem chartgraph
Esteem chartgraph
Esteem chartgraph
Esteem chartgraph
Esteem chartgraph
Esteem chartgraph
Esteem chartgraph
Esteem chartgraph
Esteem chartgraph
Esteem chartgraph
Esteem chartgraph
Esteem chartgraph
Esteem chartgraph
Esteem chartgraph
Esteem chartgraph
Esteem chartgraph
Esteem chartgraph
Esteem chartgraph
Esteem chartgraph
Esteem chartgraph
Esteem chartgraph
Esteem chartgraph
Esteem chartgraph
Esteem chartgraph
Esteem chartgraph
Esteem chartgraph
Esteem chartgraph
Esteem chartgraph
Esteem chartgraph
Esteem chartgraph
Esteem chartgraph
Esteem chartgraph
Esteem chartgraph
Esteem chartgraph
Esteem chartgraph
Esteem chartgraph
Esteem chartgraph
Esteem chartgraph
Esteem chartgraph
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Esteem chartgraph

884

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

    ×