Data Visualizer

I n t e r a c t i v e P r o g r a m m i n g

Page 1 of 4

Project 3: Data Visualizer (due at our regularly scheduled final exam time) Goal: To use Flash and other media creation tools to visualize data brought in from an external source. Requirements:

1) The Flash file will be no greater than 1024x768 pixels. This time around, we won’t be putting it on Gibson (see below).

2) Data

Choose a source of XML data from programmableweb.com or some other site. This data source will establish the central theme for your visualizer.

o Your visualizer must indicate someplace clearly what the source is for your data, and give proper credit where it is due.

o This data should be dynamically loaded from the host site, not stored locally. Your visualizer needs to dynamically adapt to the specific information given in an ever-changing data file.

o The amount of data used should be compelling and useful; don’t just present a single piece of information from your source, but you also don’t necessarily need to visualize everything. Properly filter the data and use what you feel is useful to your project and audience.

o If your source requires additional data, such as a user ID, in order to function, please provide me with some default or dummy data to use since I may not have an account on whatever service you choose.

3) Design o Design and develop a Flash-based tool that visualizes the data

pulled in from your external online data source. The user should have some control over what aspects are displayed, and other aspects you deem reasonable. Establish a visual theme (color scheme, icons, consistent controls, etc.) that ties your visualizer together into a cohesive unit.

o Use the principles of CRAP, a good color scheme (perhaps from kuler), and attractive buttons and other interface elements (using the Photoshop button tutorials or your own ingenuity).

o Controls should be well-designed, and match your theme and color scheme. NO default appearances for control items, PERIOD!

o Text should scroll if necessary. o Make sure to spell-check and proofread all your content.

I n t e r a c t i v e P r o g r a m m i n g

Page 2 of 4

4) Widgets o Incorporate at least three different control widgets into your

design (additional, well-implemented widgets will be considered for “above and beyond” work). Each should serve a real purpose. Widgets to choose from include:

i. Toggle button ii. Radio buttons (a set of at least 3)

iii. Dropdown menu (using a Combobox, dynamically populated)

iv. Slider v. User-entered text (using an editable text field)

vi. Drag-and-drop

5) Preloader o Add a preloader progress indicator to the first frame of your

movie.

6) Actionscript o You must use an external Actionscript file for this project. The

code should be clean, with sensible function and variable names, and well-commented.

o You will need at least 2 .as files, since you are also required to dynamically generate objects on the stage (see below).

o Dynamically generated objects. o Objects should be dynamically created and removed as

necessary, when data chunks are chosen and displayed.

o Dynamic objects must have their own behaviors, and do something useful. They should be more than just an image of the weather like in our in-class demo.

7) Media o Incorporate the following media:

 Custom bitmaps made in Photoshop. • Make sure your bitmaps are good quality. • Make good use of vectors and traced bitmaps, as

appropriate.  Animations built in Flash.

• Make use of the animation principles. • The animations should enhance the visualized data.

8) Submit documentation.

o On a separate frame of the movie, navigated to from the main page, tell me how you met the requirements.

o Cite the source of your XML data. o Explain why you chose the data source you did, and how your

design meets the needs of users of that data. o Tell me what you learned while building this project.

I n t e r a c t i v e P r o g r a m m i n g

Page 3 of 4

o Cite and justify your “above and beyond” work (see below). o Include on the documentation frame a way to get back to your

main movie frame.

Important!

If you fulfill the minimum requirements listed above, you will receive a ‘B’. Once you have covered the basics, feel free to go above and beyond what was specified in the assignment. I gladly award points for excellence in any aspect of development. NOTE: You may not use Yahoo! Weather as your source, since we did/will do that in class. Project Submission

A) Our Web server has some security settings that my prevent your external XML from being accessible, so I’ve provided a PHP script in myCourses to circumvent this problem. If you want to give it a try so you can have the project online as part of your portfolio, go for it, but loading on Gibson is not a requirement for the project! Instead, in order for me to check the ActionScript code, it must be submitted to the dropbox (see below).

B) Compress your files in .zip format and upload them to the Project 3 dropbox. The file should be named Lastname_Firstname.zip Required files include: 1. The Flash source file (.fla) 2. Your source ActionScript files (.as) – You will have at least 2 of these! 3. The compiled Flash file (.swf) Note that I’m not asking for any XML files! Remember, your XML should be loaded on the fly from the host.

C) Week 11 (finals week) we will meet as normal, and you will present your visualizer to the class. The project is due in the myCourses dropbox 15 minutes before our scheduled meeting time.

Suggestions Before You Start Use Fry’s data visualization process, and develop a plan before you start coding or designing in Flash:

Acquire – Parse – Filter – Mine – Represent – Refine – Interact Ask yourself the following questions and then sketch out your interface:

o What is source of data about? o What sort of visuals correspond with that data? o What do users of the data (people who would be interested in it)

expect and want to see? What information needs to be conveyed for them and in what visual way?

I n t e r a c t i v e P r o g r a m m i n g

Page 4 of 4

As a note, if your data source is in the Atom format or uses CDATA, I’d strongly recommend you find another source! Both of these factors cause major parsing issues in Flash. Your grade for this project will be determined as follows: Design (CRAP, color scheme, interface elements) ______ / 10

o Color scheme and layout are appropriate for the theme of the movie. o Controls match the theme and design of the rest of the interface. o Content is spelled correctly and grammatically correct.

Media ______ / 10

o Uses bitmaps appropriately and cleanly o Uses animation effectively, applies animation principles

Data source ______ / 10

o Source clearly indicated o Appropriate source and amount of information used o Compelling visualization

Actionscript ______ / 20

o Uses external .as o Code is sensible (reasonable and descriptive function and variable names, well

commented, efficiently written, etc.) o Dynamically generates objects when needed, and removes them properly, using

proper commands and functions; objects have appropriate behaviors o Uses Actionscript to animate objects on stage

Preloader ______ / 10

o Works! Widgets ______ / 15

o Contains at least 3 o Used appropriately, and not just there for the sake of being there o Implemented properly

Documentation ______ / 10 Additional features ______ / 15

o Potential features include extra Actionscript, exceptional graphical or design utilization, excellent choice of data and application of theme, additional widgets, etc.

Total ______ / 100

Points are deducted for:

o Improper submission (-10) o Fonts not embedded (-10)