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