What is data visualization and why use it on the web?

Say it differently than with a table filled with numbers. A much more attractive way to convey factual information to people is through graphical data visualization. In graphical form, not only is there a greater likelihood of capturing the reader's attention, but visually processed data is also much easier to understand and thus contributes to a smoother connection of the topic to its context. 

• Show how the price of your product has changed over time. 
• Present how the revenues of several companies have increased in recent years after you proposed a completely new corporate and business strategy. 
• Show off where in the world your products can be found. 

All of this (and much more) can be achieved with data visualization. You won't impress your potential clients with a monotonous table of numbers—they will likely skip over it on the website. They simply do not have the time to study it carefully. Most people's attention is captured online by dynamic images. The subsequent decoding of that visual message happens much faster compared to dry text.

You already know the theory by heart and are directly interested in examples of visualizations? Jump to the second part of the article.

At PUXdesign, we have specialists who focus on data visualization and can work wonders with monotonous numbers and graphs. If you decide that you want to enhance your website, e-shop page, or customer portal section for your clients in this way, consider a few things in advance.

What will we visualize?

• Do you want a visualization to spice up the website, or do you prefer to inform your clients in a more serious manner? The appearance of the visualization depends on what it displays. Will the visualization merely complement your website's content, or is it its primary goal?

Who will be viewing these visualizations?

• Different people will view each message. Therefore, a bubble chart showing the popularity of fast food dishes will look different than the development of energy prices in the Czech Republic over the last 12 months.

Is the data in the agreed format?

• At PUXdesign, we most often agree with clients on the .csv, .json format, or via API, from which we can extract everything ourselves. We can also work with specific data, such as satellite coordinates in space. It is definitely worth considering whether you have the data available that we will be processing graphically.

Do I have an idea of how the visualization should look and what color combination I want?

• An effective option is to align the visualized data with corporate colors – however, be sure to prepare the exact shade codes in advance.

What types of visualizations can you have on your website?

Visualizations in the form of line graphs are just the beginning. At PUXdesign, we will discuss your ideas and transform them into specific and often original solutions – these can include bubbles, pies, world maps, word clouds for displaying the most frequent terms, or treemaps, also known as square visualizations. Let’s take a look at some completed visualizations on our clients' websites.

• Basic and simple graphs
• More complex visualizations
• Price visualization on e-commerce sites
• Fun and impressive visualizations

Basic and Simple Charts

Bar charts, line charts, pie charts, or curves as simple data representations – this is probably the first thing that comes to mind when you think of data visualization. And you are right. 

Axiory

On the website of the trading company Axiory, we had the opportunity to prepare several types of data visualizations, and simple graphics are among them.

• Filtering
• When hovering over a specific column, it darkens and displays specific data

Countless visualizations for Data Report Brno region 2022

Bar chart of year-on-year employee growth in companies

• Filtering
• Hovering over a specific column displays the exact value
• Color legend
• Document export

Linear graph illustrating the share of workers to all employed in the region

• Filtering
• Hovering over the line displays specific numbers for the given years
• Color legend
• Export document

Pie chart showing the industries that certain companies are most focused on

• Filtering
• Color differentiation
• Hovering over a segment displays the specific number of companies in that industry
• Document export

Map of the republic showing the percentage of workers to all employees in the region

• Filtering
• Hover map for quick display of specific numbers for individual regions
• Document export

Circles representing the number of projects in the South Moravian Region in individual organizations

• Circles display a proportional size relative to the number of projects of the organizations
• Hovering over them will show the exact number of projects
• File export

Word cloud illustrating the industry focus of projects 

• The more frequent the industry, the larger the representation
• Hovering over it will display the exact number of projects in a specific industry
• Export document

Tree chart for showcasing international students

• The larger the number of students from a given country, the larger the field
• Hovering over the field darkens its color
• Filtering
• Document export

Map of Europe divided into regions/counties 

• Filtering
• Coloring the map according to increasing numbers in the legend
• Hover map that shows specific numbers in individual counties
• Document export

Trading and live visualization 

For the client Axiory, we also created a visualization of exchange rates that updates every five seconds. Those interested in the forex market have the latest information at their fingertips thanks to this handy tool.

More Complex Visualization 

For EGÚ Brno

The consulting company in the energy sector, EGÚ Brno, has not only received a brand new website from us but has also invested in visualizations. For example, the display of gas and electricity price monitoring allows clients to choose a specific or preset period or filter by a specific type of commodity. Finally, you can also download specific data to have it available at any time – even when you are offline.

• Commodity filtering
• Time filtering
• Display of specific values when hovering over a part of the graph
• Saving the graph as .png

Price Visualization on E-commerce

With rising inflation and increasing prices, price visualization has become very popular on e-commerce sites in 2022. This feature allows online store operators to show how the price of their products has changed (or not) over time. We have taken this visualization example from the e-shop czc.cz.

• Filtering
• Hovering over will display the exact price at the selected time
• Color coding based on price increase

Fun and Effective Visualizations 

You can convey information humorously! The Faculty of Economics and Administration at Masaryk University in Brno incorporated sophistication into the message. For the 30th anniversary of its founding, we created a presentation website, which included some interesting facts – such as what the most popular dish in the cafeteria is or what the nationality distribution among students looks like. Here, we used another type of graph, known as a progress bar – in practice, it appears as a line or circle that gradually fills to a certain percentage.

Did you like the option to visualize your data and thus interpret it in an interesting way for the visitors of your website? At PUXdesign, we are very happy to assist you with this step, so please contact us soon.