As we mentioned previously, designing an effective dashboard is a challenging task. The first step to create a useful dashboard is to determine which questions need to be answered by the dashboard, which problems need to be detected on time, and why a dashboard is required.
Once we have determined the purpose of the dashboard, we can begin to gather all the data that can help us answer the questions and understand the issues stated in the dashboard purpose. The data can be originated from several sources.
We will then need to organize the information in meaningful sections in order to help the user easily navigate the dashboard and find the required information.
We will also need to choose the visual displays for each piece of data that we want to put in the dashboard. We need to choose compact displays that are familiar to the user in order to minimize the amount of effort taken in decoding the information.
In this section, we will design and implement a dashboard to monitor the performance of students in a class. We will define the purpose of the dashboard, gather the necessary datasets, choose the charts and graphics that we will use, and organize the information in sections dedicated to the students, courses, and the entire class.
The dashboard that monitors the performance of students in a class
As the main topic in this section is the design of dashboards and we have created several charts previously, we won't include the code for the examples. The code for the charts, each section, and the complete dashboard is available in the chapter09 directory of the code bundle.
The dashboard should be an overall view of the performance of the students in a class. If the scores of all the students in a given course are declining, there might be a problem with the methodology chosen by the teacher; if the scores of just one of the students are dropping, that student might be having personal issues that are interfering with his/her learning. The aim of the dashboard is to display all the information in order to easily detect problems and make decisions to help the students or teachers improve the learning process.
A teacher will want to detect drops in performance at three levels: an individual student, the students in a course, or the students in all the courses at the same time. Besides detecting learning problems, it would be useful to have information that helps identify possible causes of bad performance. The specific objectives of our dashboard will be as follows:
- Assess the performance of each student in a course. The most obvious way to do this is to display the scores of the students in each class. We might want to identify possible causes of bad performance, such as repeated absences.
- Monitor the aggregated performance of the students in each course. This will allow us to take action if a great number of students are having issues with a particular subject.
- Get an overall measure of the performance of the complete class. This will help us detect problems that could affect the class as a group.
We will need to gather the students' data and decide which information is relevant in order to achieve these objectives.
As we mentioned earlier, we need to monitor the performance of the students, courses, and the entire class. For this example, the data will be generated with a script. We will need the absences and scores of the students for each course. We will assume that we have a JSON endpoint that provides us with the students' data in the following format:
[
{
id: 369
name: 'Adam Lewis',
absences: [ ... ],
courses: [ ... ],
avgScore: 58.84
},
{
id: 372
name: 'Abigail Bower',
absences: [ ... ],
courses: [ ... ],
avgScore: 67.78
},
...
]For each student, we will have the name and id attributes. We will also have an absences attribute, which will contain just a list of dates on which the student didn't show up to class:
{
name: 'Adam Lewis',
absences: [
'2013-09-06',
'2013-10-04',
...
],
...
}We will also need the scores of the students in their courses. The courses field will contain a list of the students' courses, and each course will have the course's name and a list of the scores obtained by the student in the assignments or assessments. For convenience, we will also add the average score of the students for the current period:
{
name: 'Adam Lewis',
absences: [ ... ],
courses: [
{
name: 'Mathematics',
scores: [
{date: '2013-09-23', score: 78},
{date: '2013-10-04', score: 54},
...
]
},
{
name: 'Art',
scores: [...]
}
],
avgScore: 58.84
}We will also need information about the courses of the students. We will assume that there is a JSON endpoint that provides us with information about the courses:
[
{
name: 'Mathematics',
avgScores: [
{date: '2013-09-18', score: 72.34},
{date: '2013-10-07', score: 64.45},
...
],
avgScore: 63.21
},
{
name: 'Arts',
avgScores: [
{date: '2013-09-16', score: 76.62},
{date: '2013-10-01', score: 58.53},
...
],
avgScore: 63.21
}
]The
avgScores attribute will contain a list with the dates of assessment and the average score obtained by the students. The avgScore attribute will contain the average of the scores for all the assessments in the current period.
The next step is to organize the information in logical units. Each section of the dashboard should help us detect the issues that require attention.
In our example, the organization of the information is fairly direct; there will be sections for the students, courses, and the complete class.
The students section will help us detect the performance drop of individual students. We will consider that absences can be an explanatory factor in individual changes in the assessment scores.
The course section will help us monitor scores, thereby aggregating the scores of all the students at the same time. Drops in the scores of all the students at the same time could mean that the cause is a particular subject in the course or the teaching methodology.
The class section will allow us to monitor the average scores of the entire class, thereby averaging scores in each course for all the students. Here, the number of absences will be considered an important factor as well.
In this section, we will discuss each dashboard section separately, explaining what information will be present in each section. We will also choose charts to represent these pieces of information. Later, we will decide how to organize the sections in the dashboard to make good use of the space and reflect the hierarchy of the information presented in each area.
The students section of the dashboard will display the students in a table, displaying information about each student in rows. The most relevant information will be the scores, but we will also include the absences from class, because this could be a possible explanation of changes in performance.
The absences will be displayed using a barcode chart that is similar to the one presented in Chapter 2, Reusable Charts. This version will be smaller and have a background. This chart will help teachers know how many students didn't show up in class and when, whether the absences are concentrated in a certain period, or whether they are evenly distributed.
Absences for given students, displayed as a barcode chart
We will add a column for each course and display the scores of the students in the course assignments as a line chart. The scales of the chart will be implicit; they will always cover from 0 to 100 percent in the y axis and the current period in the x axis. The background of the chart will highlight score ranges that are considered important; the area below 25 percent has a different background, and the area between 25 percent and 75 percent has a different background.
Scores of a student in different classes. The background of the chart highlights areas of poor and high performance.
Finally, we will include the average score of the students in the current period. The complete students section will gather all these elements.
Students section of the dashboard
Monitoring the performance of the courses is as important as monitoring the scores of individual students. Small drops in the scores for a class could simply mean that the concepts being taught are a little more difficult than usual, but an important drop in the average score can have several causes that are worth investigating. For instance, it could be interesting to know whether there are other courses with similar behavior, as they could be interfering with each other due to difficult assignments on the same dates, for instance.
The courses section of the dashboard will show the user the evolution of the scores of each course and the average score of each course. To display the average score, we will use bullet charts, which are a compact display that shows us how actual measures compare with target values. Bullet charts are used to show us the value of an indicator, adding backgrounds to give context to the indicator's value. In this case, we will define regions of poor, regular, and good performance, and use the bullet chart to know the average score of each class based on these regions. The following figure illustrates a bullet chart:
Average scores of the students in each course
In the class context, we need to know whether there are relevant changes in average scores of the entire class. We will monitor weekly performance metrics so the teachers can detect problems before they become too difficult to solve.
We will display the average score of the students in all the courses. The absences for each week will also be included in the dashboard, so the user can quickly work out whether scores and absences are related for a particular student. We will list the date of the Monday of each week, displaying the average score for that week as a bullet chart. We will also include the average score as a number and the number of absences in the week as well.
Weekly average scores for all the courses and students in the class
The last step is to gather all the sections in one screen. The final layout of the dashboard will depend on the relative importance of the sections. In this case, we will organize them from the most granular to the more general, giving more space to the students section. The rationale behind this is that most of the time, the performance problems will be at an individual level and less frequently at the level of a course or class.
We will render each section inside a div element and assign it the section class. We will add styles to help us differentiate the sections and make logical groups more evident. We will add a light grey background and add a small border on top of each section. We also added a small title to give it an additional context.
The completed dashboard. The sections are delimited with a light grey background.
In this example, the title of the dashboard is neither useful nor informative. In a real-world dashboard, the area of the title would be a good place to add navigation menus and links to other dashboard sections.