Assignment 3: Creating Interactive Visualization Software

From Visualization Sp06

Contents

[edit]

Assignment Due: March 2, 2006


Image:HomeFinder.gif


In this assignment, you will explore some of the issues involved in implementing interactive information visualization software. The task is to partially re-implement a classic interactive visualization research prototype: the HomeFinder. This visualization plots the distribution of available homes or apartments in a geographic region and provides interactive controls (also known as dynamic queries) for filtering units of interest. This idea has recently taken on new life on the popular site housingmaps.com, a web application combining Google Maps and housing listings from craigslist.org. Given a data set of apartment listings, a map image, and your choice of software toolkit, you will be expected to design and implement an interactive version of the HomeFinder. Your version must support a geographic display of apartment listings and dynamic query controls for filtering on the rental price and the apartment size (studio, 1br, 2br, etc). Exact requirements are listed below.

Our goal with this assignment is not only to provide hands-on experience implementing a visualization, but also to evaluate existing toolkits available for aiding this process. As such, we are very interested in your experiences with your choice of supporting software library, including what worked well and what worked poorly, what stumbling blocks you may have encountered, and how well the available tools match up with your own thinking about the development process. The steps of this assignment are geared towards these two goals: gaining experience building interactive visualizations and learning an existing tool, while also gathering information to support the further refinement of such tools.

You may work on this assignment by yourself or with a partner. Groups of three or more people are not allowed.

For this assignment you are responsible for the following:

  • 1. Sketch your software architecture design (due February 16, 2006)
    First, read through this assignment description in its entirety. Read about or interact with HomeFinder (you can still download the original DOS program) and similar projects such as HousingMaps.com. Download the provided data sets and familiarize yourself with them; they can easily be imported into spreadsheets and other tools. Before looking at any software packages or writing any code, think through the features you wish to support (read below for required features), come up with a preliminary application design, and then craft a simple block diagram of the structure of your envisioned application. Your sketch should include the various software components you expect you'll need and how they will interact. This sketch does not need to go into fine implementation details such as the workings of individual algorithms, but should communicate the high-level organization of the application, showing the relationships and dependencies between software components (not unlike an informal UML component diagram). The diagram can be drawn by hand (in which case please scan it in), or created in a computer program such as Illustrator, Powerpoint, Visio, etc. The goal of this exercise is to think through the various concerns that go into the software implementation and to provide a point of comparison for how the use of 3rd party tools affects your design. This is why it is important that you perform this task first, before actually building the software. Your software architecture design sketch is due relatively soon, on February 16, 2006.


  • 2. Choose a software library for implementing your design (due February 23, 2006)
    The next step is to choose a software package with which to implement your design. A list of possibilities is included below. Please document the decision process for your choice of toolkit, including a discussion of the different toolkits you took under consideration. Next, create another design sketch, similar to part 1, but this time incorporating the relevant software modules provided by your chosen toolkit, effectively "translating" your sketch to the framework the toolkit provides. Please note which software modules in your revised diagram are components provided by the toolkit and which are extensions you plan to write yourself. Your toolkit-specific design sketch and rationale for your choice is due on February 23, 2006.


  • 3. Implement your design
    Use the toolkit of your choice to implement your design. You are free, within these guidelines, to make your own interface design and visual encoding decisions (e.g., color, shape, size). You may also include additional features if you like--see the Extra Credit section below for more. The software must support at least the following features:
    • A map view showing the geographic distribution of available apartments presented over an orienting map image. If you prefer, you are free to use a map image other than the ones we provide.
    • Dynamic query controls for filtering the available apartments by the rental price and by the number of bedrooms.
    • A tooltip display providing apartment details when the mouse cursor is hovered over an apartment mark.


  • 4. Produce a final writeup (due March 2, 2006)
    Your final submission should include:
    • The design sketches for parts 1 and 2
    • A detailed rationale for your choice of software toolkit
    • A brief description of your final HomeFinder application, including screen shots
    • The bundled source code for your HomeFinder application, uploaded as a file (either a .zip or .tar.gz archive) linked to your assignment wiki page. Please ensure that the software submitted is in working order. If any special instructions are needed for building or running your software, please provide them.
    • For submissions by groups of two, please also include a breakdown of how the work was split among the group members.
    • Finally, please include a commentary on the development process, including answers to the following questions:
      • Roughly how much time did you spend developing your application? What aspects took the most time?
      • How helpful did you find your choice of tools? What did you like and what would you change? What was surprisingly easy or difficult?
      • How did your design evolve over time, both as a result of your choice of tools and through further learning as you went along?
      • Did use of your chosen toolkit require re-thinking any aspects of your initial software design? If so, in what ways? Did you find any such re-thinking to be useful or counter-productive? why?


  • 5. (Optional) Extra Credit
    Up to 10% extra credit on this assignment can be awarded, subject to the instructors' discretion. Possible extensions eligible for extra credit include:
    • Implement HomeFinder in another toolkit you did not initially choose. Reflect on your experiences, comparing and contrasting the relative strengths and weaknesses of the two toolkits.
    • Add mechanisms by which end-users can assign their own visual encodings.
    • Add a distance-based query option, as in the original HomeFinder, that allows you to select a position and filter items that are within a specified distance of that point.
    • Devise a way to usefully incorporate the text or images contained in the online Craigslist.org posting into the visualization.
    • Introduce any other creative innovations you feel would improve the visualization. Possibilities include novel visual encodings or interaction techniques.


Your assignment must be posted to the wiki before class on March 2, 2006, with part 1 (the initial design sketch) posted on February 16, 2006 and part 2 (the choice of toolkit and revised design sketch) on February 23, 2006.

[edit]

Resources

[edit]

Provided Materials

We have provided two data sets for this assignment: collections of apartment rental postings for both the East Bay and San Francisco. The data was collected by downloading RSS feeds from Craigslist every hour during the period of February 1 through February 7. Each listing has been additionally "geocoded" (assigned latitude and longitude values) using the freely available Geo::Coder::US PERL module and backing data from the United States Census Bureau. We have also provided map images (courtesy of Google Maps) for each area, along with a corresponding bounding box of latitude and longitude values.

Each data set is available as a tab-delimited text file. Each row of the file contains one apartment listing, with each data entry separated by a tab ('\t') character. The top row of the file contains the names of each data field. The following data fields are included:

  • link the URL of the original Craigslist.org posting
  • title the provided title of the rental posting
  • br the number of bedrooms, a value of zero denotes a studio apartment
  • price the monthly rental price, in U.S. dollars
  • neighborhood the name of the neighborhood in which the rental unit is located
  • date the date and time at which the apartment listing was posted
  • latitude the latitude value of the apartment
  • longitude the longitude value of the apartment
  • address the reported address or intersection of the apartment
  • city the city where the apartment is located
  • state the state where the apartment is located (CA for all entries)
  • zip the zip code of the apartment


East Bay Apartment Listings - Contains 366 apartment listings from the greater Oakland and Berkeley region.

East Bay Map Image. Top-left corner lat/lon (37.949501, -122.3840965), Bottom-right corner lat/lon (37.722553, -122.0620595).


San Francisco Apartment Listings - Contains 600 apartment listings for the city of San Francisco.

San Francisco Map Image. Top-left corner lat/lon (37.8144845, -122.523479), Bottom-right corner lat/lon (37.7008895, -122.362461).

[edit]

Software Tools

A variety of useful toolkits have been designed to help support information visualization applications. Some include support for the full visualization pipeline from data to interactive graphics, while others focus only on a subset, typically graphics and interaction.

  • InfoVis Toolkit - The InfoVis Toolkit, from INRIA France (Java)
  • Piccolo - The Piccolo user interface toolkit, from the University of Maryland (Java and .NET)
  • Prefuse - The Prefuse information visualization toolkit, from UC Berkeley (Java)
  • Processing - A Java-like graphics and interaction language and IDE
  • Laszlo - Open Lazslo, an XML-meets-JavaScript styled langauge that compiles to the Flash runtime
  • Macromedia Flash - (we can not provide this, so you will need to have the Flash IDE on your own)
  • HTML/JavaScript/XML - use standard web technologies to build the visualization

In addition, you are free to use another library not presented here, including lower-level libraries such as OpenGL, Java2D, or GDI+. Just be sure to document your choice of tools and explain your decision.

A number of tools for creating visualizations without programming are also available (for example, Spotfire and Tableau). While you are free to use them to explore the provided data sets and try out design ideas, you must program the final application yourself. If you have any questions about the status of a given tool, please ask us.

[edit]

How to create your wiki page

Begin by creating a new wiki page for this assignment. The title of the page should be of the form:

A3-FirstnameLastname.

Replace Firstname and Lastname with your real first and last names. You can create the page by entering a url of the following form into your browser:

http://eyeball.cs.berkeley.edu/cs294-10-sp06/A3-FirstnameLastname

Groups of two people should use URLs of the form:

A3-FirstnameLastname1-FirstnameLastname2

To upload images to the wiki, first create a link for the image of the form [[Image:image_name.jpg]] (replacing image_name.jpg with a unique image name for use by the server). This will create a link you can follow that will then allow you to upload the image. Alternatively, you can use the "Upload file" link in the toolbox to upload the image first, and then subsequently create a link to it on your wiki page. Use the "Upload file" link to upload other files, such as the required .zip or .tar.gz archive.

[edit]

Add a link to your finished assignment here

One you are finished editing the page, add a link to it here with full name as the link text. The wiki syntax will look like this: *[[A3-FirstnameLastname|Firstname Lastname]]. Hit the edit button for this section to see how I created the link for my name.


[add comment]
Retrieved from "http://vis.berkeley.edu/courses/cs294-10-sp06/wiki/index.php/Assignment_3:_Creating_Interactive_Visualization_Software"