Click here to see the SAS code.
Click here to see the example.

---------------------------------------------------------------

This dashboard was designed as an entry in Stephen Few's 
2012 Dashboard Contest:

http://www.perceptualedge.com/blog/?p=1308

Data Link

-----

Overall:

Based on a weighted average of all the factors, students needing 
attention have their row highlighted in pink (light red).

In general, in red are "things of concern" or 
"things that might need attention".

The names are alphabetical, and the vertical lines "group"
like things together.

-

Red Coloring Criteria:

Individual scores (in both the standardized test, and the classroom assignments)
are 'red' if they are less than 70%.

For the standardized test, if the difference between the first (6th grade)
and current test is a 10-point drop or more, then the 'Delta' is red.

If a letter-grade is less than C, it is red.
If a letter-grade is 'F' then it is also made BOLD (because that's extremely important).
If the current grade is less than the goal, it is red.
For the numeric counts (Late assignment, Tardy, Absent, Discipline) 
 if there are > 2 then they are red.
Any detention > 0 is red.

When a Late/Tardy/Absent/Discipline/Detention value is '0',
I print that in the table as '-' ... this way the non-zero
values stand out more visibly.

(note: The decision of what to make red is a bit arbitrary,
but this could be adjusted based on the teacher's preferences.)


Pink Row Highlighting:

I calculate a 'score' for each student, based on each of the individual
values of the table.  Basically, everything that's colored "red" adds 
to this score (in my code, I call it the 'red_score').  Anything you see
in the table that's red adds (at least) 1 point to that student's red_score.
Certain things that I consider more important are weighted more heavily,
and contribute more than 1 point to the red_score.  For example, your 
current course letter-grade contributes 2 points for each grade below C.
And if your standardized test delta is a drop of 10 or more, then that
adds 3 to your red_score.  Each detention adds another point to the 
red_score.  If the total red_score is 10 or more, I highlight that
student's row in the table with pink (light red) since that student
needs additional attention.


Plotting Technique:

I used sparklines to show the Standardized Math Test scores, because
they are scores of comparable tests, taken at regular intervals.
They are made to be compared, and show progress over time.  In my
opinion, the individual values are intended to compare each individual
student current scores to their past scores (rather than comparing one
student to another), therefore I independently auto-scaled each sparkline
graph to show the maximum level of detail.  I mention in a footnote that 
these sparklines are auto-scaled, so there is no doubt/confusion.
I print the 6th grade score to the left of the sparkline, and the
current score to the right - this helps the user get a feel for the
scale of the sparkline.

I treat the student assignment scores differently.  I plot them as little
micro-bars (or needles), and I plot all the students to the same scale.
There's no real guarantee that each assignment is "built on" the previous 
assignments (they could be independent/unrelated topics), therefore I don't 
connect them with a time-series line.  This also helps visually differentiate 
the Classroom Assignments plot from the Standardized Test plot.

In both the time-series lines, and the micro-bars, I use a colored 'dot' 
plot marker -- this gives the user something to hover their mouse over, 
to see the hover-text (it can be very difficult to hover a mouse over a
skinny line, and the markers also help distinguish which parts of the
sparkline are interpolated versus where are the actual data points).


Column Headers:

I prefer to keep column header text horizontal, but in this case some of 
the data values were very 'narrow' (such as 1 letter or 1 number), and 
therefore I used rotated (vertical) column headers in some cases.  This
saved a lot of space, and helped keep the dashboard very 'dense'.
I also abbreviated some of the column headers (such as using 'cur.' 
instead of the whole word 'current') - when you hover your mouse over
the headers, you see the full-length version of the text.



Interactivity: (not part of contest)

When you view the html output in a web browser on a PC, and hover your 
mouse over the individual table values or plot markers, you see the actual 
value in a popup/hover-text (this text can also be read by screen "readers"
for the visually impaired, such as JAWS on a PC, or iPad 'VoiceOver').  

And although we don't have all the data behind all these numbers, I have
set up a few "drilldowns" where we did have data.  For example, when you
click on the "Standardized Math Test" column header text about the School
and District, you can see a graph of that comparison.  Also, when you 
click on the Tardy or Absence values, you see a plot of all the Tardy and
Absence data.

Back to Samples Index