Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin...
-
date post
21-Dec-2015 -
Category
Documents
-
view
212 -
download
0
Transcript of Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin...
![Page 1: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/1.jpg)
Title
Computer Science 767WComputer Science 767WFall 2007Fall 2007
Interactive Data Interactive Data VisualizationVisualization
Lecture #03Lecture #0312-Sep-200712-Sep-2007
Colin Ware
Kurt Schwehr
![Page 2: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/2.jpg)
Last class
• The Google Earth User Interface
• Creating a basic Placemark/Thumbtack
![Page 3: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/3.jpg)
Class #03
• Clouds
• KML in Google Maps
• HTML/KML detail
• Color/Style
• Lines
![Page 4: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/4.jpg)
Course time change?
• Can we move the class to 1:00-2:20?
![Page 5: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/5.jpg)
How many people have used Google Earth before this
class?
![Page 6: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/6.jpg)
Course Web Pages
• Google Earth: – http://vislab-ccom.unh.edu/~schwehr/Classes/2007VisCourse – [email protected]
• Human Perception for Information Display: – http://ccom.unh.edu/vislab/VisCourse/
![Page 7: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/7.jpg)
Jing
![Page 8: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/8.jpg)
Camstudio
![Page 9: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/9.jpg)
Cloud Demo
http://www.barnabu.co.uk/files/kmz/clouds-monthly-sequences-nl.kml
![Page 10: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/10.jpg)
KML on Google Maps
![Page 11: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/11.jpg)
Last time in Google Earth…
![Page 12: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/12.jpg)
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
![Page 13: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/13.jpg)
The picture does not work
<description> Sunrise over the Chase Ocean Engineering parking lot. <img src="sunrise.jpg”/></description>
![Page 14: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/14.jpg)
Only have to keep track of one file with a kmz
![Page 15: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/15.jpg)
Google Earth KML is XML
![Page 16: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/16.jpg)
XML
• Header - “XML Declaration”– <?xml version="1.0" encoding="UTF-8"?>– XML character encoding– UTF-8 for English characters
![Page 17: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/17.jpg)
Comments
• Anything within <!-- -->
• Comments do not nest
![Page 18: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/18.jpg)
xmllint can tell us that something is wrong
http://xmlsoft.org/
![Page 19: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/19.jpg)
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>
![Page 20: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/20.jpg)
XML documents must have a single “root” node
Oops…
![Page 21: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/21.jpg)
Empty tags have a shorthand
• These are equivalent:– <foo></foo>– <foo/>
![Page 22: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/22.jpg)
Capitalization matters for XML
![Page 23: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/23.jpg)
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”/>
![Page 24: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/24.jpg)
Basic XHMTL
• <html> - Root node for the document• <body> - Contains the contents of the document• <p>• Headers, <em>, and <strong>• Links• <img>• Tables
![Page 25: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/25.jpg)
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
![Page 26: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/26.jpg)
For Google EarthFocus on what would be in the body of XHTML
![Page 27: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/27.jpg)
XHTML Text Module• http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_textmodule
![Page 28: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/28.jpg)
Paragraphs• Each paragraph of text is wrapped in a <p> tag• HTML ignores new lines. Blank lines do not give you a new paragraph.
![Page 29: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/29.jpg)
Headers
• <h1> … <h6> provide headers that are progressively smaller
![Page 30: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/30.jpg)
<em> and <strong>Marking sections of text
![Page 31: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/31.jpg)
Links
• <a href=“URL”>Text or Image</a>
![Page 32: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/32.jpg)
Images• <img src=“URL/>
![Page 33: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/33.jpg)
Image with a link
![Page 34: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/34.jpg)
TablesThe most complicated XHTML that you will do in this class
![Page 35: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/35.jpg)
A table
![Page 36: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/36.jpg)
Table Tags• <table> - defines a table
• <th> - table header
• <tr> - contains one row
• <td> - one table cell within a row
![Page 37: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/37.jpg)
Table Attributes
• border=“1” - gives the lines
• bgcolor=“orange”
![Page 38: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/38.jpg)
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 “>” or “>”
• http://www.ascii.cl/htmlcodes.htm
![Page 39: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/39.jpg)
Character codes
http://www.ascii.cl/htmlcodes.htm
![Page 40: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/40.jpg)
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
![Page 41: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/41.jpg)
Walk through basic KML tags
![Page 42: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/42.jpg)
What is the entry for Document?
![Page 43: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/43.jpg)
Placemark
![Page 44: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/44.jpg)
Point
![Page 45: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/45.jpg)
coordinates
![Page 46: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/46.jpg)
CDATA to wrap HTMLDoes this look like fun?
![Page 47: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/47.jpg)
Passing HTML straight through to Google Earth causes trouble!
![Page 48: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/48.jpg)
With CDATA, HTML can stay HTML
![Page 49: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/49.jpg)
Making a table in HTML
![Page 50: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/50.jpg)
Putting that table into KML
![Page 51: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/51.jpg)
Color/Style
![Page 52: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/52.jpg)
Color
![Page 53: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/53.jpg)
View Tag
![Page 54: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/54.jpg)
Using a web browser to display XML/KML
![Page 55: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/55.jpg)
Lines
![Page 56: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/56.jpg)
Another Demo(if time permits)
http://www.barnabu.co.uk/ferris-wheel-animation-in-google-earth
![Page 57: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/57.jpg)
Additional Notes on Grading of Assignment #01• HTML content must be valid XML
– If the text is wrapped in <?xml version=“1.0” encoding=“UTF-8”?><html><body>your text</body></text>, then it passes xmllint
– Do not worry about the KML formatting this time. It is okay to use the Google Earth dialog to create your placemarks.
– Your KMZ must work on any computer without internet. Double check that your images are in the kmz
![Page 58: Title Computer Science 767W Fall 2007 Interactive Data Visualization Lecture #03 12-Sep-2007 Colin Ware Kurt Schwehr.](https://reader030.fdocuments.us/reader030/viewer/2022032522/56649d635503460f94a462dc/html5/thumbnails/58.jpg)
Next Class
• Review Color and Style. More details
• Photo overlays
• Polygons