1 / 58

Interactive Data Visualization Lecture on Computer Science - Fall 2007

Explore Google Earth User Interface, Placemarks, Clouds, and KML in Google Maps. Learn about HTML, XML tags, XHTML basics, and creating tables. Discover special character codes and advanced web technologies. Deep dive into KML tags for data visualization.

anisa
Download Presentation

Interactive Data Visualization Lecture on Computer Science - Fall 2007

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Interactive Data Visualization Lecture #03 12-Sep-2007 Title Computer Science 767W Fall 2007 Colin Ware Kurt Schwehr

  2. Last class • The Google Earth User Interface • Creating a basic Placemark/Thumbtack

  3. Class #03 • Clouds • KML in Google Maps • HTML/KML detail • Color/Style • Lines

  4. Course time change? • Can we move the class to 1:00-2:20?

  5. How many people have used Google Earth before this class?

  6. Course Web Pages • Google Earth: • http://vislab-ccom.unh.edu/~schwehr/Classes/2007VisCourse • kurt@ccom.unh.edu • Human Perception for Information Display: • http://ccom.unh.edu/vislab/VisCourse/

  7. Jing

  8. Camstudio

  9. http://www.barnabu.co.uk/files/kmz/clouds-monthly-sequences-nl.kmlhttp://www.barnabu.co.uk/files/kmz/clouds-monthly-sequences-nl.kml Cloud Demo

  10. KML on Google Maps

  11. Last time in Google Earth…

  12. If we create the proper URL,KML can appear in google maps • http://maps.google.com/?q=URL • http://maps.google.com/?q=http://vislab-ccom.unh.edu/~schwehr/Classes/2007VisCourse/lectures/02/sunrise.kml

  13. The picture does not work <description> Sunrise over the Chase Ocean Engineering parking lot. <img src="sunrise.jpg”/> </description>

  14. Only have to keep track of one file with a kmz

  15. Google Earth KML is XML

  16. XML • Header - “XML Declaration” • <?xml version="1.0" encoding="UTF-8"?> • XML character encoding • UTF-8 for English characters

  17. Comments • Anything within <!-- --> • Comments do not nest

  18. xmllint can tell us that something is wrong http://xmlsoft.org/

  19. XML Tags • Must be balanced • Start: <atag> • End: </atag> <--- “/” marks the end • Can contain other tags, text, mixed • <atag>some text</atag> • <atag><innertag></innertag></atag> • <a>text1<b>text2</b>text3</a> • Can not mix tags • Wrong: <a><b></a></b>

  20. XML documents must have a single “root” node Oops…

  21. Empty tags have a shorthand • These are equivalent: • <foo></foo> • <foo/>

  22. Capitalization matters for XML

  23. Tags can have Attributes • <atag attribute1=“some” attribute2=“thing”></atag> • Attributes are quoted text - termed “value” • Empty tags can also have attributes • <anothertag anumber=“3.1415”/>

  24. Basic XHMTL • <html> - Root node for the document • <body> - Contains the contents of the document • <p> • Headers, <em>, and <strong> • Links • <img> • Tables

  25. HTML versus XHTMLHyperText Markup Language • HTML is SMGL ( Much more complicated than XML) • capitalization does not matter • tags may be unbalanced • XHTML is XML • http://en.wikipedia.org/wiki/Xhtml

  26. For Google EarthFocus on what would be in the body of XHTML

  27. XHTML Text Module • http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_textmodule

  28. Paragraphs • Each paragraph of text is wrapped in a <p> tag • HTML ignores new lines. Blank lines do not give you a new paragraph.

  29. Headers • <h1> … <h6> provide headers that are progressively smaller

  30. <em> and <strong>Marking sections of text

  31. Links • <a href=“URL”>Text or Image</a>

  32. Images • <img src=“URL/>

  33. Image with a link

  34. TablesThe most complicated XHTML that you will do in this class

  35. A table

  36. Table Tags • <table> - defines a table • <th> - table header • <tr> - contains one row • <td> - one table cell within a row

  37. Table Attributes • border=“1” - gives the lines • bgcolor=“orange”

  38. HTML Special Character Codes • There are numeric and text codes for characters • Allows for characters not on the keyboard or things that interfere with HTML or XML. • e.g. “>” can be written “&gt;” or “&#62;” • http://www.ascii.cl/htmlcodes.htm

  39. http://www.ascii.cl/htmlcodes.htm Character codes

  40. This leaves out many HTML features! • CSS - Cascading Style Sheets • Javascript/DHTML • Embedded objects (movies and others) • AJAX • All kinds of server side fun • Servlets • Mod-python/mod-perl • And many, many more

  41. Walk through basic KML tags

  42. What is the entry for Document?

  43. Placemark

  44. Point

  45. coordinates

  46. CDATA to wrap HTMLDoes this look like fun?

  47. Passing HTML straight through to Google Earth causes trouble!

  48. With CDATA, HTML can stay HTML

  49. Making a table in HTML

  50. Putting that table into KML

More Related