Sales data visualization on map

Client

A worldwide healthcare brand

Challenge

The sales data map has to use HTML5 technology. The hosting environment of the map does not have programming language and database access. The map should be light-weighted and worked on mobile devices. Yet, the map has to highlight countries with sales, and calculate the summaries in a separate view.

Solution

We create a lite country map of the world using JavaScript and SVG. Since it is in vector format, the map can be enlarged or minimized to fit in different sizes of screen. The map is simplified as sales data are country-based, so there is no need to show detailed coastlines. A cleaner map also reduces loading time.

As we do not have access to any programming languages (PHP, ASP.NET etc), and the data cannot be stored in a database, the data concerned are loaded as CSV or tab-delimited text files. We can use JavaScript to gather the product names and their counts, which comes to the drop down menu at the top right corner, highlighting countries that have sales. The highlight of the countries and the information boxes are styled using CSS.

We create two different summary views based on client request: per region and per product summaries. They also make use of JavaScript to read in data from CSV or tab-delimited text files, do calculations and create tables showing the results.

It is easy to update the map with new data - new monthly data can be exported from Excel to a CSV file, and client can make just a few lines in the HTML file of the map to reflect the new data. This change can be made readily by just using any text editor, thus reducing the complications involved in updating an online database with new datasets.