Automating and computerizing data collection using computer-aided personal interviews (CAPI), computer-aided telephone interviews (CATI), and computerized self-administered questionnaires (CSAQ) have greatly facilitated survey data collection. However, computerization has also introduced new problems dealing with the use of the computer, the constraints of program logic, and the usability of the interface. In order to ensure reliable and valid data, the human-computer interface must be designed to match the flow of the interviewer process and the interviewee's recall of information. Next comes the problem of retrieving information from the large databases of Census data. We believe that information visualization and well design coordinated window design can empower researchers as well as the general public to find the information they need and extract knowledge from the data.
Our work has two prongs:
Kent Norman , Associate Professor of Psychology
Ben Shneiderman, Professor of Computer Science
Catherine Plaisant, Assistant Research Scientist
Evan Golub, Lecturer - Computer Science
Chris North, Graduate Student - Computer Science
Gunjan Dang, Graduate Student - Computer Engineering
Egemen Tanin, Graduate Student - Computer Science
Haixia Zhao, Graduate Student - Computer Science
- Exploring/discovering particular trends/patterns in the data,
- Specific scenario tasks.
The tool takes a shapefile as input and represents all the data in it in the form of adjustable widgets.
Representation of the data in the form of widgets and allowing manipulation of more than one widget allows the formation of a composite query on the fly every time a widget is scrolled. The map elements then color/shade out in accordance with the query.
For implementation details, please refer the following paper: Dynamaps: Dynamic Queries and Brushing on Choropleth Maps
Current Visual Basic Software Download:
The executable (Dynamaps runs on Windows 95/98/ME, Windows NT/2000. Dynamaps does not run on Apple Macintosh.) of Dynamaps2001 is available for download. (The size of the installation file is about 3.3MB)
Technical Description (Dynamaps2001)
Java prototype (updated Dec 4th 2002)
Our approach for bringing Dynamaps to the Web was to implement all
using Java. The architecture includes two parts: Map Service and Data
One strategy for the Map Service is to keep the knowledge of geographic regions in one base map (GIF image file) that is color-coded to our predefined color-geographic-region mapping rule. The base map and the related data are delivered to the client. The Java applet in the client can recognize different geographic regions by color using the mapping rule, and locally color the regions "active" or "inactive" based on data and sliders attached to that data. An illustration shows color-geographic-region mapping, a sample base map color-coded to the mapping rule, and its related statistic data.
A second strategy for the Map Service is to build the map based on the shapes of the individual regions. This allows for more flexability but has additional overhead in the tools and creation of the image. A demo using this strategy can be used to evaluate both of these issues.
Metadata is the core part of Data Management in our design. It is defined to describe the available statistic data sets and maintained in accordance with the fresh data. Metadata enables the administrator to dynamically adjust the data sets by simply updating data entries in the metadata database. Running on Tomcat server, JSP pages are generated based on the up-to-date metadata each time when users access to the service. On the other hand, our design for Data Management also provide users to retrieve the statistic data sets and convert the metadata to desired format.
The sample screen shot of the JSP pages shows the filtering and coloring, and are followed by a demo of the corresponding Dynamaps Java applet (an old version of the applet done in summer,2001).
More details can be found in the papers "Design Features and Software Architectures of Web-based Choropleth Map Services" (PS, 161KB) and "The Metadata Architecture for Data Management in Web-based Choropleth Maps" (PDF, 189KB).
On Nov. 10th, 2002 we added a new version of the Java applet prototype and temporarily named it YMap. This version allows dynamic query, zoom, pan, switch between US state view and US county view, add/delete attribute sliders, mouse-over-map region identification, select/multi-select (by holding any key) regions, and save attribute data for selected regions. Brief instructions of how to interact with the map is here. When prompted for security permission, choose "Yes" (in Microsoft Internet Exploror) or "Grant this session" (in Netscape). A screen resolution of 1024 x 768 or above is suggested for best view effect. This version has been tested on Microsoft Internet Explorer 5.0, Netscape 6.2.3 and Netscape 7.0 in Windows 2000.
A screen shot of YMap
DHTML prototype (updated February 2002)
One approach for bringing Dynamaps to the Web was to implement some
subset of its functionality using DHTML. We discuss issues involved
in this process here.
HTML was essentially meant to be a static presentation markup language. However, over the years it has been enhanced and extended to allow more dynamic interaction. Several of these enhancements:
- cascading style sheets (CSS)
enabled us to create a map of the United States in which states could be colored as "active" or "inactive" based on data and sliders attached to that data. While this version does not have the choropleth feature, adding that into later version is possible by altering the images used to create the "active" illusion.
The strategy that we decided upon was to have a total of 52 images layered one on top of another. Each of these images would have the same dimensions. In fact, the later images are creating as masks from the first image. The first image is the entire country with all states colored in the inactive color. The remaining 51 images are the individual states and the District of Columbia as masks colored in the active color. The remainder of the image area is set to be a transparent background. The net effect is that by dynamically setting each layer's visiblity, we can give the appearance of states changing colors. This action is tied in to double-box sliders on the page and associated data. An example of the first (base) image and a few mask images are available here.
The double-box sliders themselves proved to be quite a challenge. It was neccessary to create a dynamic control that was part of the page. Image-based sliders can have the exact appearance you choose, though the screen update time is impacted by the use of the images. Sliders constructed by using tables and background colors have faster update times. Controlling the thumbs of these sliders can be done either by right- or left-clicking within the slider area or clicking on the slider thumb and dragging it left or right. With this second technique, the thumbs can either be within the slider or on top of the slider.
We also implemented a scattergram demo using Dynamic HTML to demonstrate the range of visualization tools that could be actualized using DHTML.
More details can be found in the paper Dynamic Query Visualizations on World Wide Web Clients: A DHTML Solution for Maps and Scattergrams.
Dyna-TreeMap or the Dynamic TreeMap is an alternate visualization technique that might be used by the Census Bureau to visualize some of the Census Summary data.
The Tree-Map visualization method maps hierarchical information to a rectangular 2-D display in a space-filling manner. Tree-Maps partition the display space into a collection of rectangular bounding boxes representing the tree structure. The drawing of nodes within their bounding boxes is entirely dependent on the content of the nodes, and can be interactively controlled. Details of the TreeMap implementation can be found at http://www.cs.umd.edu/hcil/treemaps.
Dyna-TreeMap is a Visual Basic implementation of Treemaps and is loaded with US News data regarding the rankings of the top fifty engineering schools in the year 2000. Data is displayed in the form of rectangular cells, each representing one school, that can be colored and sized in accordance with one of the attributes of the data. The slider panel on the right hand slider allows you to make dynamic queries on the data and gray out the cells in accordance with the parameters of the query. These cells can also be removed and queries made on the set of cells that remain. Clicking on any on of the cells gives you information about the particular university in a text-box at the right hand corner.
Fig 1. Dyna-TreeMap loaded with the data for top-ranking Universities
Fig 2. Dyna-TreeMap colored by "Academic Score"
Fig 3. Dyna-TreeMap sized by "PhD students per faculty member" Fig 4. Dyna-TreeMap with "Stanford University" clicked
(click on icon to view full screen)
The following sections detail the instructions for downloading and executing Dyna-TreeMap 2001
The executable (Dyna-TreeMap runs on Windows 95/98/ME, Windows NT/2000. Dyna-TreeMap does not run on Apple Macintosh.) of Dyna-TreeMap 2001 is available for download. (The size of the installation file is about 283KB )
Technical Description (Dyna-TreeMap 2001)
Simply unzip the contents of the DynaTreeMap.zip file into a single directory and Double-click the executable DynaTreeMap.exe to run it. Click Help option for further assistance.
Source Code (Dyna-TreeMap 2001)
The source code for Dyna-TreeMap is available for download here: Source Code for Dyna-TreeMap