Human-Computer Interaction Laboratory Department of Computer Science Ben Shneiderman, Kent Norman, Evan Golub, Haixia Zhao, Wayne Menezes Choropleth Maps.

Slides:



Advertisements
Similar presentations
Atlas III Improvements Expands on Atlas II capabilities – Faceted Navigation – counts are displayed next to selectable attribute – Lunar Map interface.
Advertisements

Progressive Transmission of Appearance Preserving Octree-Textures Camille Perin Web3D 2008 August 9, 2008 Julien LacosteBruno Jobard LIUPPA University.
IS 466 ADVANCED TOPICS IN INFORMATION SYSTEMS LECTURER : NOUF ALMUJALLY 20 – 11 – 2011 College Of Computer Science and Information, Information Systems.
TSS Mapping Component Architectural Overview 10/4/2005 Shawn McClure Slide #1: Slide #2: This is a very high-level diagram describing a possible architecture.
1 Owais Mohammad Haq Department of Computer Science Eastern Michigan University April, 2005 Java Script.
Viewing Changes Monitoring with Treemaps Steve Betten Catherine Plaisant Ben Bederson.
NASA ARC Project Web-based Geographic Information Services and Analytic Tools for Natural Habitat Monitoring and Management Department of Geography, San.
Interactive Exploration of Hierarchical Clustering Results HCE (Hierarchical Clustering Explorer) Jinwook Seo and Ben Shneiderman Human-Computer Interaction.
Chapter 8 Designing with Cascading Style Sheets. Chapter 8 Topics Building three different types of complete Web pages using CSS: Build a style sheet.
Graphics for the Web Graphic formats and other considerations.
SVG oriented Framework for Web Map Services 1 PHPMyWMS Prof. Dr.-Ing. Franz-Josef Behr PHPMyWMS - an Open Source based, SVG oriented Framework for extended.
Web Clipping Presentation By: Alex Jacobs, Philip Kim, Nathan Po Web Clipping.
Live the dream… Technologies of e-Commerce Unit 8 – e-Commerce LO1 : Know the technologies required for e-commerce.
CSC 2720 Building Web Applications JavaScript. Introduction  JavaScript is a scripting language most often used for client-side web development.  JavaScript.
XP New Perspectives on Microsoft Access 2002 Tutorial 71 Microsoft Access 2002 Tutorial 7 – Integrating Access With the Web and With Other Programs.
© 2010 Delmar, Cengage Learning Chapter 6: Preparing and Publishing Movies.
TUTORIAL 8: Enhancing a Web Site with Advanced CSS
Web Design Basic Concepts.
Uninstalling Sectra & Installing Merge PACS DO NOT uninstall Sectra Before August 21,2011 “GO LIVE”
Chapter 14-Designing for the World Wide Web. Overview Introducing multimedia on the Web. Designing text for the Web. Creating images for the Web. Adding.
What is Web Design?  Web design is the creation of a Web page using hypertext or hypermedia to be viewed on the World Wide Web.
DHTML. What is DHTML?  DHTML is the combination of several built-in browser features in fourth generation browsers that enable a web page to be more.
MIS 208 Fundamentals of Web Publishing Week 6 Performance Editing Graphics Imagemaps.
_______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications1.
1 HTML and CGI Scripting CSC8304 – Computing Environments for Bioinformatics - Lecture 10.
Introduction to Information Retrieval CS 5604: Information Storage and Retrieval ProjCINETViz by Maksudul Alam, S M Arifuzzaman, and Md Hasanuzzaman Bhuiyan.
ARC ABM Visualization & Reporting ARC – Nov 12, 2010 Activity-Based Model (Java, Cube) Activity-Based Model (Java, Cube) Database (SQL Server) Visualization.
How the Web Works AGED How the Web Works Most people use an internet service provider (ISP) or an online service provider (OSP) like AOL to access.
Rendering Adaptive Resolution Data Models Daniel Bolan Abstract For the past several years, a model for large datasets has been developed and extended.
Creating Flash Movies for Pocket PC Presentation by: JOSE BARRIGA.
Exploiting Proxy-Based Transcoding to Increase the User Quality of Experience in Networked Applications Maarten Wijnants Patrick Monsieurs Peter Quax Wim.
Chapter 34 Java Technology for Active Web Documents methods used to provide continuous Web updates to browser – Server push – Active documents.
The 2000 Decennial Census School District Project: Using Census Data for the School District Mapping System **** Development and Implementation Tai A.
Visual Analysis of Hierarchical Management Data Zhao Geng 1, Gaurav Gathania 2, Robert S.Laramee 1 and ZhenMin Peng 1 1 Visual Computing Group, Computer.
Tutorial 8 Enhancing a Web Site with Advanced CSS
Design Rules-Part B Standards and Guidelines
Geocaching and the North Dakota GIS Hub Bob Nutsch GIS Coordinator State of North Dakota GIS Day 2004.
HTML, CSS, and XML Tutorial 8 Enhancing a Web Site with Advanced CSS.
Laboratory for Automation Psychology and Decision Processes Kent L. Norman, University of Maryland, USA (Catherine Plaisant, University of Maryland, USA)
Graphics in HTML. Graphics  Question: How does a web page include graphics?  Are the graphics included in the HTML file or separate files?
Web Design (1) Terminology. Coding ‘languages’ (1) HTML - Hypertext Markup Language - describes the content of a web page CSS - Cascading Style Sheets.
Web Development 101 Presented by John Valance
Cs332a_chapt10.ppt CS332A Advanced HTML Programming DHTML Dynamic Hypertext Markup Language A term describing a series of technologies Not a stand-a-lone.
GEON2 and OpenEarth Framework (OEF) Bradley Wallet School of Geology and Geophysics, University of Oklahoma
C. Ahlberg & B. Shneiderman (1994)
Writing a Web Page. Using Frontpage FrontPage is a user-friendly WYSIWYG html editor. To begin, open the program and a new page. FrontPage is a user-friendly.
Page Design Issues IWM 14 Information Services for the Web.
CSC/FAR 020, Computer Graphics, March 25, 2010 Dr. Dale E. Parson Outline for week 9, class 2 Exporting Files.
Visualization Four groups Design pattern for information visualization
Introduction to HTML. _______________________________________________________________________________________________________________ 2 Outline Key issues.
Rolando Gaytan Clay Schumacher Josh Weisskopf Cory Simon Aaron Steil (Reiman Gardens) – Client Dr. Tien Nguyen - Advisor.
Improving SLP Efficiency and Extendability by Using Global Attributes and Preference Filters Weibin Zhao Henning Schulzrinne
LESSON 15 – UNIT 0 ADAPTING YOUR WEB SITE FOR MOBILE DEVICES.
Map image compression for real-time applications UNIVERSITY OF JOENSUU DEPARTMENT OF COMPUTER SCIENCE Image Compression Research group:
IBM - CVUT Student Research Projects Internet Town (LK-Town) Bc. Adam Prchlík
Department of Computer Science, Florida State University CGS 3066: Web Programming and Design Spring
Project 7: Exploring DHTML Essentials for Design JavaScript Level Two Michael Brooks.
Graphics and Image Data Representations 1. Q1 How images are represented in a computer system? 2.
Contextual Snapshots: Enriched Visualization with Interactive Spatial Annotations Peter Mindek 1, Stefan Bruckner 2,1 and M. Eduard Gröller 1 1 Institute.
introductionwhyexamples What is a Web site? A web site is: a presentation tool; a way to communicate; a learning tool; a teaching tool; a marketing important.
Major Responsive Design Problems and Solutions -By webresponsivedesigns.comwebresponsivedesigns.com.
Comp 15 - Usability & Human Factors Unit 12b - Information Visualization This material was developed by Columbia University, funded by the Department of.
6/28/ A global mesh of interconnected networks (internetworks) meets these human communication needs. Some of these interconnected networks are.
DHTML.
Digital imaging.
Web Graphics By Chris Harding.
CIIT-Human Computer Interaction-CSC456-Fall-2015-Mr
The Internet and HTML Code
Cambodia Climate Change Toolkit
Department of Computer Science
Presentation transcript:

Human-Computer Interaction Laboratory Department of Computer Science Ben Shneiderman, Kent Norman, Evan Golub, Haixia Zhao, Wayne Menezes Choropleth Maps go to the Web Human-Computer Interaction Laboratory Department of Computer Science Ben Shneiderman, Kent Norman, Evan Golub, Haixia Zhao, Wayne Menezes

Overview   What is “Dynamap” ?   Dynamap – Desire for Web-based solutions   Dynamap – DHTML solution - layers and tables   Dynamap – Java solutions - single image w/palette manipulation - shape-based image construction

 Motivation:  To provide a convenient, dynamic visual representation of summary data (example problem space - census data)  Typical applications  Exploratory Tasks, Specific Scenario Tasks  Technology originally used  Visual Basic 6.0, ESRI MapObjects 2.0  Issues  Uses MapObjects 2.0, not web-based, performance with all 3180 counties not real-time What Is Dynamap Mention chloropleth, double-box sliders, zoom, pan, scatterplot

Dynamap – Web Based Solutions  Motivation in moving to Web-based solutions:  Dynamap goes to Web with equal (or greater) functionality when compared to the Visual Basic implementation.  Example target minimum equipment:  Pentium II 400 Mhz  56k Modem  1024x768 screen resolution  Performance:  Smooth interactive filtering  Minimum network transfer and delay

Dynamap – Dynamic HTML  Technology We Used  GIFs with transparent backgrounds  HTML tables with colored cells  Dynamic HTML (Cascading Style Sheets, JScript)

Dynamap – Dynamic HTML Screenshot

Dynamap – Dynamic HTML  Technology We Used  GIFs with transparent backgrounds  HTML tables with colored cells  Dynamic HTML (Cascading Style Sheets, JScript)  Issues  current version only works in IE5+ due to browser conflicts on DHTML standards (short-term issue)  performance can decrease noticeably with large number of layers (i.e.: though it is possible to have as many as 5000 layers displayed in Internet Explorer, if there are more than around 150, response time becomes noticeable)  laborious to introduce chloropleth coloring (one-time cost)

Dynamap – Java Solutions  Technology We Used in Solution 1  Base map GIF with up to 124 (5*5*5 - 1) regions

Dynamap – Java Solution 1 Screenshot

Dynamap – Java Solutions  Technology We Used in Solution 1  Base map GIF with up to 124 (5*5*5 - 1) regions  Issues with Solution 1  Number of regions: for more regions, need to either use different base image type (e.g.: BMP) which would increase download time or use multiple base maps to increase number of regions which will increase image processing time

Dynamap – Java Solutions  Technology We Used in Solution 1  Base map GIF with up to 124 (5*5*5 - 1) regions  Issues with Solution 1  Number of regions: for more regions, need to either use different base image type (e.g.: BMP) which would increase download time or use multiple base maps to increase number of regions which will increase image processing time  Technology We Used in Solution 2  GeoTools open-source Java toolkit to construct image

Dynamap – Java Solution 2 Screenshots

Dynamap – Java Solutions  Technology We Used in Solution 1  Base map GIF with up to 124 (5*5*5 - 1) regions  Issues with Solution 1  Number of regions: for more regions, need to either use different base image type (e.g.: BMP) which would increase download time or use multiple base maps to increase number of regions which will increase image processing time  Technology We Used in Solution 2  GeoTools open-source Java toolkit to construct image  Issues with Solution 2  Greater download time  Response time suffers with higher number of regions

Conclusion   Dynamic queries with choropleth maps are an attractive, responsive way to present summary information   Dynamic queries can be implemented for the Web!   There are trade-offs…   Low bandwidth – might not want to have to load GeoTools or might want to reduce number of images to transfer   Slow processor – might not want to have high number of regions or might want to reduce number of sliders Human-Computer Interaction Laboratory