Chart Picker

· Mark Evans

Article Style: page, clean, sans serif

Background

Whether you work in data science, data analytics, finance, strategy, user experience, sales, marketing, or product, at some point you will be creating data visualisations, either for use externally (in your products and on social media), or internally (in your presentations and reports). As an employee of an information and analytics company, it’s important that the visualisations I choose reflect the same high standard as the underlying data, or at the very least, don’t misrepresent the data.

As a product manager, I’ve used a variety of tools over the years to create mock-ups. Some tools output high-fidelity designs, but typically I’m dealing with high-level concepts that need to be created quickly and updated often (based on user feedback). For these scenarios, I’ve recently started using a free and open-source tool called Excalidraw (see my blog post about Drawing with Excalidraw).

During early 2021 I was managing the rebuild of one of my company's analytics tools, and the new version required the extensive use of charts in order to visualise a wide variety of data, as usual, I turned to Excalidraw to create the initial mock-ups. Before I knew it, I had amassed a large number of basic chart types, so I turned these into an Excalidraw library and added my library to the project in GitHub. You can download my library here (title: 'Data Viz', author: '@dbs-sticky').

I then decided to take my library of charts and generate a “chart picker” diagram. I based this off an existing concept developed by Dr. Andrew Abela from ExtremePresentations (anyone interested in charting is probably already familiar with this classic version). I made some changes to Dr. Abela's design, mostly around the Distribution section which I have expanded with more options. My diagram is designed to help you choose a chart based on your data, and what you are trying to convey to the user. My initial aim for creating this chart picker was to share it with my colleagues, I've since shared it publicly, and have now made it available on GitHub for anyone to use or to improve upon.

Chart Picker links

Chart Picker screenshot

This is a zoomed in view of the distribution section of the chart picker.

A snippet of the 'Chart Picker'

If you have any comments on this article then please get in touch via Twitter (@dbs_sticky).