Ducky's InfoVis Project Proposal

Proposal specs

Participants

Only me, Kaitlin Duck Sherwood, ducky@csDELETEthisTEXT.ubc.ca

Description

I plan to show U.S. population density with a zooming/panning interactive display. I would use data derived from the 2000 U.S. Census.

I might need to restrict the dataset to some subset of the United States because of resource limitations. I am not Google, and cannot store as much data as I suspect would be necessary to provide optimal performance.

There are all kinds of interesting and useful things that could be done on top of the base project.

• I believe that once I am able to display total population density, then it is relatively easy to extend the code to allow displaying one of many different flavors of demographic data, e.g. the non-white population. I would like to do that, think I can probably do it, but hesitate to promise it.
• Allowing the user to select information from one of several different censuses is also clearly within the realm of imagination. I believe that this is slighly more ambitious (in part due to disk space limitations), and probably not within the scope of the class.

Personal expertise:

• I did a project integrating maps, floorplans, and a virtual walkthrough about ten years ago at UIUC.
• I have investigated several maps/census schemes in the past 10 years, but never gotten past the exploratory stages.
• I have never written anything in Javascript before, nor any dynamic client-side code of any kind, but would like to learn.
• I am not a graphics whiz. I am not sure what algorithms to use to select what data is likely to be visible. OTOH, I have Google and a copy of Foley and Van Dam within easy reach.
• This could be a really cool project.

Proposed solution

I plan to show U.S. population by rendering (on the fly, presumably) semi-translucent PNG images from the Census Bureau information that I would then overlay on Google Maps.

There are numerous opportunities for the performance to be inadequate. Determining the right data to display for a given clipping region, retrieving the information, aggregating information (when zoomed out), rendering the PNG image, and serving the image all take time (in addition to the time Google takes, which I won't be able to control). I expect that some caching and prefetching of data will be required.

Scenario

Billy Rubin, a fifth-grade student at Rancho Cowabunga Middle School, is exploring population density as part of his urban housing presentation. He goes to Webfoot's Information Visualization site and is presented with a what looks like a standard Google map of Palo Alto, CA.

Interface mock-ups

@@@ illustrations of what the interface will look like

Implementation approach

I plan to use Javascript and the Google Maps API to serve maps, capture pan/zoom events, and to overlay area data on top of the Google Maps.

I plan to use the gd library, probably with a perl wrapper, to generate a transparent PNG image to overlay on top of the maps.

I plan to use C language Shapefile C library to parse a variant of the TIGER/Line data -- the ESRI shapefile data -- which includes some population demographic information.

Milestones

Include a list of project milestones with dates, breaking down the work into a series of smaller chunks.

Tasks (not milestones):

• Figure out how to overlay one png on static map
• Figure out how to overlay another png when map is recentered
• Figure out if Google Maps can overlay maps fast enough.

• Find good shapefiles
• Develop a simple test suite for PNG manipulation
• Write code to create PNG from one known polygon extracted from shapefile; overlay on Google Maps
• Write code to create PNG from several known polygons extracted from shapefile; overlay on Google Maps
• Write code to create PNG from several known polygons, shaded with data from dBASE file; overlay on Google Maps

• Given zoom level and map lat/long boundaries, figure out how to tell which polygons are visible
• Write code to retrieve a polygon based on lat/long.
• Write code to create PNG from lat/long boundaries at default zoom level
• Figure out how to aggregate data from multiple polygons
• Write code to aggregate data
• Modify code to create PNG from lat/long/zoom data
• Overlay images dynamically on Google Maps

• (aggressive) Add sliders to allow changing the parameters of the image (e.g transparency, hue)
• (aggressive) Add radio buttons to change data sets