Data dashboard
An example of a web page which pulls together useful statistics about a live service.
Statuses
New54
In progress186
On hold12
Completed 6,425
Total applications
| April | 423 |
| May | 1,019 |
| June | 1,682 |
| July | 2,143 |
| August | 3,287 |
| Total | 8,554 |
Most popular days
| Monday | 16% |
| Tuesday | 33% |
| Wednesday | 27% |
| Thursday | 15% |
| Friday | 9% |
| Case manager | New | In progress | On hold | Total |
|---|---|---|---|---|
| Jane Grey | 2 | 1 | 1 | 4 |
| Avinash Singh | 3 | 1 | 0 | 4 |
| Kyunghyun Cho | 3 | 1 | 0 | 4 |
| Darren O'Keefe | 0 | 3 | 0 | 3 |
Statuses, during each month
New In progress On hold
Applicants: year of birth
A P5.js diagram created with a script on the page.
About this dashboard
This is a government mock-up of a data dashboard. Dashboards are a common feature of B2B software.
An online service leaves a trail of data. Developers can extract useful information like 'How many applications have been submitted this week?' by querying a database or using 3rd party tools.
For this mock-up I've used:
- H3 headings, for statuses
- Tables, for Total applications, Most popular days, and Work in progress
- A list, for Statuses during each month
- An interactive diagram, using P5.js
Display your data in HTML tables
Ordinary HTML tables are the most accessible format for offering numerical data online. If your visitor resizes their text or uses a screen reader, they'll still be able to read the data held in a table.
For this demo I added some coloured bars to show quantities. If you disable styles or javascript in your browser, most of this page will still display, but the coloured bars will disappear.
I picked colours from the gov.uk design system to make sure all the text is readable.
Embedding data with javascript
I've imagined a fairly simple use case for this page of data. If a government team wanted tools which are more powerful and interactive, they're likely to import data visualisation tools using 3rd party software like Tableau, D3 or High Charts.
I use P5.js because it's an easy way for designers to start making data visualisations (and cool stuff). Visit my account at Open processing (link opens in a new tab).
Any comments / suggestions?
Contact me on LinkedIn (link opens in a new tab).