It’s Olympic season, so I decided to create an interactive dashboard to explore the results of the last five Winter Olympics. I had three key requirements for my simple Olympic dashboard:
- Mobile first: Uncompromised performance and user experience on mobile devices.
- Interactive: Support for touch-based interactions and animations.
- Modern look.
Based on the requirements mentioned above, I eliminated a few options. For example, the Chart.js charts look good, but a quick look at the documentation indicates that “If you are looking to add interaction as a layer to charts, Chart.js is not the library for you…”. Different applications have different requirements, and these requirements may lead to different choices. One lesson I learned is to test on device early: some charting libraries may work great in your computer’s browser, but not so well on mobile devices, especially when it comes to touch-based interactions.
I tried different libraries as part of my experiments, and I’ll share two implementations below. This doesn’t mean that other options are not as good: I just didn’t have time to fully implement the dashboard with every single library. If you use one of the other libraries, I’d love to hear what you think. Also feel free to fork the repo and implement the dashboard with your favorite library, or submit a pull request to improve the implementations below. It would be great to see additional implementations.
Watch the ChartJS implementation video:
Click here to run the ChartJS implementation in your browser.
As mentioned above, D3 has become a standard for data visualization. There are also libraries built on top of D3 (dimple, NVD3, xCharts, Rickshaw, …) for people looking for higher level APIs. I used xCharts for some of the charts in my D3 implementation.
Watch the D3 implementation video:
Click here to run the D3 implementation in your browser.
Because of its broader scope and lower level API, D3 has a steeper learning curve compared to other charting libraries. However, it gives you complete control over the final result and it’s definitely worth the time investment. It also has a fast growing community, and an impressive list of examples you can learn from. If you are looking for an out-of-the-box solution with higher level APIs, you may also consider one of the other free or commercial options mentioned above. As always, evaluate the options based on your own background and your own requirements. I’d love to hear about your own experience building interactive mobile dashboards.
The source code for the ChartJS implementation is available in this GitHub repository.
The source code for the D3 implementation is available in this GitHub repository.