Developing a reusable interactive pie chart

on Wednesday, June 3, 2009

Begin with the end in mind

In grad school I had a professor who in talking about research explained: "you can either do the work on the front end with planning or the back-end when you are dealing with #$*($&(*#$". I think the same wisdom holds for instructional design. You can plan for reusability and generalization or try to expand upon an instructional design (feature creep).

A new instructional design project often starts with the idea wouldn't it be cool/nice/useful/ fill in the blank to have a widget that does X. In my job, it is often translating that X into reality but also considering how the project could be a reusable learning object.

The planning process should consider how could this idea be used in other contexts/applications, how does data flow to and from the learning object, and if technology is needed to support it. I always like to start with deciding if technology is really needed to support the learning idea or if non-technical means would yield better outcomes. A hybrid in-class and online approach or in-class only approach might work better than a strictly online approach. Not every learning idea translates well to an online context and in those cases if a classroom experience is possible, the idea would be better delivered in that manner.

A recent request I had was for an interactive pie chart. The idea was for the user to click on the pie wedges and receive information. The course would be strictly online, so there was no need to consider delivery in other modalities. The next question to consider was how to populate the learning object with data. This easily could have been a custom flash animation. Instead though, I approach it with reusability in mind and created an actionscript project that outputted Flash based on an XML data file.

In designing the XML for the project, I wanted to make sure it could be re-used. Since the design was to show some topics and provided information on each, I named the top level node "topic. For each topic node, I gave it a label, percentage, color and the blurb. See below:

<


11
0x6A9DC3
Several large prospective studies have explored the association
between prostate cancer and physical activity, and the results are
surprising, as you will learn in the next step.



10
0xE36438
Psychological stress has pronounced and well-documented effects
on the immune system through various mechanisms. The suspected (but
debated) hormone sensitivity of prostate cancer might, theoretically,
render it more susceptible to psychological states associated with
aberrant or altered hormonal environments.



79
0x89AC62
Much research has focused on the role of nutrition in mitigating
the risk of developing prostate cancer. The role of both total dietary
fat intake as well as specific fats consumed may be critical to the
development of PC.

The role of macro- and micronutrients is
also important. These can be obtained in the form of whole foods in the
diet, or as dietary supplements. Herbs and other nutraceuticals may
impact the development and/or progression of PC. It is important to
examine the evidence behind specific nutritional recommendations, and
tailor them to suit an individual's lifestyle and willingness to make
dietary alterations.

With this XML structure, the learning object could be used again with just a different XML file. In creating the Flash project, I used Flash Vars to pass in a URL to the XML file. As such, the swf file could be loaded without having to be recompiled and just pointed to a different XML. Since I am passing into Flash the size and color for each wedge, a developer has complete flexility in the future to make changes.