1. 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

2. 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

3.  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

4. 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

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

6. Dynamap – Dynamic HTML Screenshot

8. 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)

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

10. Dynamap – Java Solution 1 Screenshot

11. 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

12. 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

13. Dynamap – Java Solution 2 Screenshots

15. 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

16. 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 www.cs.umd.edu/hcil/census