Source: Articles on Smashing Magazine — For Web Designers And Developers | Read More
Thomas Bohm rethinks technical illustrations and data visualizations, sharing interesting and uncommon examples of how to present data and information. Bar graphs and pie charts are great, but there’s so much more to explore!
Good technical illustrations and data visualisations allow users and clients to, in a manner of speaking, take time out, ponder and look at the information in a really accessible and engaging way. It can obviously also help you communicate certain categories of information and data.
The aim of the article is to inspire and show you how, by using different technical illustrations and data visualisations, you can really engage and communicate with your users and do much more good for the surrounding content.
Below are interesting and not commonly seen examples of technical illustration and data visualisation, that show data and information. As you know, more commonly seen examples are bar graphs and pie charts, but there is so much more than that!
So, keep reading and looking at the following examples, and I will show you some really cool stuff.
Typically, technical illustration and data visualisations were done using paper, pens, pencils, compasses, and rulers. But now everything is possible — you can do analog and digital. Since the mainstream introduction of the internet, around 1997, data (text, numerical, symbol) has flourished, and it has become the current day gold currency. It is easy for anyone to learn who has the software or knows the coding language. And it is much easier to do technical illustrations and data visualisation than in previous years. But that does not always mean that what is done today is better than what was done before.
There are some common categories of audiences:
Sara Dholakia in her article “A Guide To Getting Data Visualization Right” points out the following considerations:
Just look at what we are more often than not presented with.
So, let us dive into some cool examples that you can understand and start using today that will also give your work and content a really cool edge and help it stand out and communicate better.
It provides a great way to show relationships and connections between items and different components, and the 3D style adds a lot to the diagram.
It’s an effective way to highlight and select information or data in relation to its surrounding data and information.
Being great at showing two categories of information and comparing them horizontally, they are an alternative to typical horizontal or vertical bar graphs.
They are an excellent way to enliven overused 2D pie and bar graphs. 3D examples of common graphs give a real sense of quality and depth whilst enhancing the data and information much more than 2D versions.
This diagram is a good way to show the progression and the journey of information and data and how they are connected in relation to their data value. It’s not often seen, but it’s really cool.
A stream graph is a great way to show the data and how it relates to the other data — much more interesting than just using lines as is typically seen.
It provides an excellent way to show a map in a different and more interesting form than the typically seen 2D version. It really gives the map a sense of environment, depth, and atmosphere.
It’s a great way to show the data spatially and how the data value relates, in terms of size, to the rest of the data.
A waterfall chart is helpful in showing the data and how it relates in a vertical manner to the range of data values.
It shows the data against the other data segments and also as a value within a range of data.
A lollipop chart is an excellent method to demonstrate percentage values in a horizontal manner that also integrates the label and data value well.
It’s an effective way to illustrate data values in terms of size and sub-classification in relation to the surrounding data.
There are many options available, including specialized software like Flourish, Tableau, and Klipfolio; familiar tools like Microsoft Word, Excel, or PowerPoint (with redrawing in software like Adobe Illustrator, Affinity Designer, or CorelDRAW); or learning coding languages such as D3, Three.js, P5.js, WebGL, or the Web Audio API, as Frederick O’Brien discusses in his article “Web Design Done Well: Delightful Data Visualization Examples.”
But there is one essential ingredient that you will always need, and that is a mind and vision for technical illustration and data visualisation.