How We Visualized 1 Billion Dollars

There are hundreds and thousands of infographics floating around, but what you see in the majority of cases is just the final image of a whole decision-making process. As we are passionate designers at Interactive Things, we have always been very interested in the processes behind the scenes. Did you ever wonder how an infographic is originated or if your own approach differs from others? We would like to share the development process of our latest work for FreshBooks.

The Story

FreshBooks is one of the leading providers for online invoicing and time tracking services on the internet. They have acquired a lot of customers all over the world due to their open-mindedness, professionalism and user-friendly interfaces. It is hardly surprising that FreshBooks have collected an impressing amount of various data, like invoice sizes and payment periods, being successfully active since 2003. Because FreshBooks aren’t cagey about these numbers and they want to share them in their blog, they asked us to unveil an interesting story on these data and visualize it.

„How 1 Billion Dollar flowed through the FreshBooks System?“ is the story we want to tell; the story on how the average invoice size and payment periods are arranged in different countries. In some countries, like China, people are remarkably dutiful and pay their bills as fast as they can, whereas in other countries, like India for example, people exhibit a more lax payment behavior. Mexico ranks first regarding the average invoice size, whereas in Malayasia the service seems to be mostly utilized for smaller amounts. Our goal was to make these interesting differences visible and to possibly even disclose undetected patterns by comparing invoice size and payment period.

The Creation

There are several possibilities to make data comparable and to visualize different amounts and time periods. To provide a simple cognition of values belonging to different countries, using a map is a viable and convincing option. So, to begin with we tried to integrate all the data directly into a reduced world map and started with some sketches.

In the draft above, the average invoice size is indicated by the size of the circles. The angle of the darker segment of the circle depicts the average payment period.

Combining both information in one single shape, however, seems not to be optimal: If the invoice size, and thus the respective circle, is small, the dark segment depicting the payment period is very hard to read. But even if the circles were all the same size, the visualization of payment periods with segments wouldn’t be ideal for comparing the values. That is why we decided to keep it simple and to integrate only the invoice sizes into the map, visualizing them with bubbles. Furthermore, we opted for bar charts to depict the payment periods and the invoice sizes in order to improve the readability, especially regarding possible dependencies:

If you design infographics yourself, you are familiar with the situation in which some data throws a spanner in the works and seems to mess up your whole concept. In our case, the average invoice sizes of European countries are the biggest and the density of the data is the highest, thus there is not enough space to place the bubbles on their actual location. To solve this problem we added a magnifier. Now, the bubbles still overlap, but they correspond with the respective European countries, which was our intention – the map should just serve for quick orientation, actually comparing the different values is more effective with the additional bar chart.

In order to increase the readability regarding a comparison of the data, we combined the two bar charts. The green bars indicate the average invoice sizes in dollar, the blue ones stand for the average payment periods in days. We decided not to use a scale, but to label all bars separately instead. On the left we added the overall average which acts as an underline at the same time:

The Image

Lastly, we connected the bars with the corresponding bubbles and added a header and a footer. And this is what the final infographic, the result of our decision-making process, looks like:

What‘s your conclusion? Would you have made other decisions or do you have another approach for designing infographics altogether? We are very interested in your opinion, so please share your thoughts in the comments below.

How We Visualized 1 Billion Dollars This project was realized by Interactive Things. As the publisher of Datavisualization.ch we regularly give you insights into the development processes of our own work.

Wanna have your work featured here?
Submit a link!

Share this article

Subscribe for more

Subscribe with RSS Join our
Warning: file_get_contents(https://feedburner.google.com/api/awareness/1.0/GetFeedData?uri=Datavisualization) [
function.file-get-contents.php]: failed to open stream: HTTP request failed! HTTP/1.0 404 Not Found in /home/interact/www/datavisualization.ch/wp-content/plugins/fanbase/fanbase.php on line 93
16545 Readers

Give Feedback

  • steviemorrow

    Love the graphic (and your work in general). Found it a bit hard to link the bubble to the chart below, maybe colour coding bubbles and links would have helped (or made it too messy?)?

  • vizdude

    Great – apart from the connecting lines – distracting

  • guest

    What program was used?

  • Marco Gnnn

    Great design and very cunny survey of the datas

  • http://twitter.com/sigiwara Christian Siegrist

    We used Adobe Illustrator to draw the vector graphics

  • http://twitter.com/sigiwara Christian Siegrist

    I agree that for European countries, the link is not easy to catch. Yet I think the lines improve orientation and one is faster to identify the corresponding rank in the bar chart.

    Definitely, color coding bubbles are an interesting approach. I can't deny that FreshBook's corporate colors affected our decision. The use of only two different colors has a big advantage, though: It clearly communicates that two different data sets are visualized – invoice size and time to pay.

  • http://www.artillery.ch/ Wiederkehr

    In addition to using Illustrator to produce the final images, we started with pen and paper to sketch out ideas and visualization concepts. At the same time we mined the data and made calculations in Numbers.app to get a feel for the actual values.

  • Pingback: Visualizing The Health Care Reform on Datavisualization.ch

  • fellow infographic artist

    it is really nice to read the thought process behind a graphic. thanks!