AS3 OOP visualization logic - linking filters and data source

Question

I'm trying to visualize the results of a quiz in ActionScript 3.0.
What I would like some input on is how to best link the "filters" (top right corner in attached image) to the data source in a flexible OOP way.

The result array now contains both number of correct answers and meta data about the person taking the quiz. The meta data could be both discrete (sex) or continuous (age).

results = [{name: "Lisa", correct: 5, sex: 0, age: 52}, {name: "Peter", correct: 3, sex: 1, age: 32} ... ]

How do I tell the boxes to, for example, change color when I change filter? Should each box object hold its own data or should there be some sort of controller listening to the filter object to dispatch an event and thereafter call a box.setColor method? What are my options?

Answer 1

I'd first create a class StudentBox which holds each students data and has a method called changeColor which accepts a color and changes the StudentBox color to that of the passed in color. Then I'd create an array or vector in AS3 which holds all the students you created.

After this you would add a listener to the filter buttons to detect when they are clicked and have them call a function which does the following:

1) Loop through all the StudentBoxes in the array holding each StudentBox

2) for every StudentBox you loop through, change the color of the StudentBox depending on its filter

Answer 2

I think the general idea would be to keep things as flexible as possible , today you want to use the box type visualization, tomorrow you may want another type . To have each box object containing data seems pretty rigid as it gives you only one option. I would try to keep the logic as separated from the view as possible with a class that handles the parsing of data and another class or set of classes that wouldn't know anything about data and would just display color boxes , pie charts , 3D graphs etc...