A3-MattGedigian
From CS294-10 Visualization Fa08
Contents |
Data
I selected data about the fever patterns associated with different diseases. This information can be used to diagnose a patient when laboratory tests are not available. This is one of the most commonly used pieces of information in "Where There is No Doctor" (WTND), a guide to rural healthcare.
Current Visualization
The current visualizations in that book (which will serve as my dataset) are here. The basic representation of the information (temperature vs. time) is appropriate.
Hesperian's books have been refined over thirty years and the design has been careful turned to the needs of the reader. As part of their ongoing efforts to digitize their content, Hesperian is re-designing aspects of the book to enable interactive use.
Currently a person collects a series of temperature measurements over a period of days. They either physically or imaginatively construct a plot of this data and compare it to the collection of labelled charts in the book.
Interactive Visualization
Proposal
I intend to create an interactive visualization with prefuse that will make the charts queryable. The initial display will include all charts.
The user will then apply constraints that filter the display. They can draw rectangles on the chart itself, as shown in this image:
These rectangles filter the data, Timebox style. In this next image, two diseases match query and are selected. Note that in this image, the selected disease is highlighted, but the non-selected diseases might also be hidden.
It will also be possible to select diseases by clicking on their names. Here "Childbirth Fever" has been clicked. Note that in this mock-up, the names are positioned on the graph itself, but they may be on a side list if overlapping makes it hard to select.
Near the visualization there will also be a list of symptoms, accompanied by checkboxes. Checking these will add those symptoms to the query, further filtering the list. In this image, Hepatatis has been deselected because it does not match the symptom query.
Implementation
I did my visualization using flare. Despite my claim above that I was going to use prefuse, my intent was always to use flare.
Screenshots
 | "All Diseases" |
 | "Adding a filter by drawing a rectangle" |
 | "Adding a filter by clicking a symptom" |
Changes
The interactive aspects of the visualization were implemented as planned. The overall appearance is quite different than the storyboards. The appearance of the storyboards was determined by the visual styling of the illustrations in the book and the tools available in my paint program.
In the actual implementation, I could not find an acceptable way to position the labels, so I omitted them. Instead I used a legend and tooltips.
I eliminated direct selection of diseases. I had not fully thought through the interaction between direct selection and the other filters. In particular, what happens if the user clicks on a disease that is excluded by the current filters. It seemed like the choices were to either:
- unset the filters and show it
- show it despite not matching the filters
I found the first one frustrating, since it erased the filter settings that the user set up. This could be mitigated with an undo function. I found the second one confusing since it violated expectations about the behavior of the filters.
Native checkboxes in part of the flex libraries that is not included by default (sdks/3.1.0/frameworks/projects/framework/src/mx/controls/CheckBox.as). Rather than introduce a dependency I copied a technique I found in some of the sample code, and used regular text sprites with listeners for these controls.
Commentary
The flare introductory tutorial is very good. However, the rest of the documentation is somewhat lacking. I found the search feature on sourceforge unpleasant to use. There is a site goosebumps4all, which had some useful sample code, but I did not find it until late in development.
I found the process for building legends, translating mouse coordinates to data values, and grouping nodes and edges of a data series confusing. I found my way though it using the API documentation, but it seemed clumsy.
I spent about 20 hours on the project.
- Data Acquisition
- A lot of that was just getting the data. Since I didn't have the original dataset, I bought a program that extracts data from chart images. Because of the low quality of source images, there was manual effort required to trace the images. There was also work required to extract and normalize the symptoms for each disease.
- Filtering
- As expected, the primary interaction behavior took awhile. There was the logic of correctly handling multiple filters simultaneously, and also some performance optimizations.
- Tweaks
- There were lots of minor things like getting the Legend to display, making the legend items have solid circles instead of hollow ones, making the selection rectangle persist. Those things added up.
Source Code
Advantages
This has an advantage over the book of allowing different charts to be visualized together and compared. It also enables the user to simultaneously query based on temperature and the presence of other symptoms.
Future Work
Even before the list of possible diseases has been narrowed down to one, it may be possible to present information about the matching set. For example, after two ways, you may have enough information to diagnose either dengue fever or malaria. It may be that in either case, it is necessary to seek professional help. This could be displayed.
People are collecting specific measurement points, not ranges. So they may want to query using those precise values and have the system find close matches. That will require further investigation, both of user interfaces and of evaluating the similarity of the sketched shape to the temperature charts. It is beyond the scope of this project
