Data Visualization

Bookmark and Share

What is Data Visualization?

Data visualization consists in communicate raw data clearly and efficiently to the user. Usually trough graphics like pie charts, curves, bars or any kind of visualization to helps the reader understand and analyze the data displayed.

Working at IDOM I was assigned to design and develop a tool to manage automatically the electric bills of all fountains in Barcelona. The problem consisted in read all the electric bills from massive excel format (each month). Determine which excel sheets correspond to fountains and display the information for a human review. If the data displayed is approved, the user save the information in a database, which will store all the information related with the electric bills. Search for specific information in the data base and display the results in two flavors: through numbers and or through graphics.

The tool was called Visual Data and is divided in 4 parts:

Import Bills

The first part of the tool the user upload the bills from a massive excel. The code is able to understand which bill correspond to fountains against to an existent list. When the list of bills is displayed, the tool indicates which bills have missing information or contains wrong information. Then the user determine how to repair the missing data.

Read Data

In the second part, the user ask the database for specific information. For example, give the historic of a particular bill. Compare the consumption of this bill along the year. For example: There is no point to have a water fountain working mid in February after 6:00 pm. because in Barcelona is already night. I also wrapped the SQL syntax to make it more user friendly and create custom queries. I developed a very simple text editor and a language scripting called cLab (SQL technic modification).

Data Visualization

The third part of the tool consisted in visualize the data trough graphics, in order to be displayed in reports and presentations. The difficult part here was to understand the huge range of numbers to display, from 5 numbers in X axis to 200 or more in the same axis.


The fourth part of the tool consisted in select the location of the data base, and other folders. Also a quick button to contact the developer(me).

Import Bills area, in red color the bills with incomplete

Read Data area, displaying the data by query, below the text editor to script and customize data

cLab editor print screen and example of two queries, you can customize your queries. The scripting language is a simple wrapper to SQL. I adapted many of the features to cLab language but I omit some of them like eliminate. Basically cLab scripting was designed to create queries that could not be possible through the standard buttons.script editor

Data visualization examples with different range numbers. dv4dv3 dv2

Architecture, this is the VisualData UML chart. Another way to visualize a coding project.architecture

Leave a Reply