A successful infographic is a good way to increase the traffic of its website via the famous backlink on which google has based (among other things) its referencing of sites. Static or even more fascinating when it is interactive, an infographics must add value to the data, it must tell a story to the visitor of the site, invite him to the exploration (in the case where it is interactive) and to the reflection. One of the best examples I’ve encountered lately is this map that I invite you to look at. Do not hesitate to zoom into this one, you will have an interesting view of the global migratory dynamics. Click on a circle (red, negative migratory flow = the country loses residents, blue, positive migratory flow = the country wins residents) and you isolate the flows relative to this country. I spent a lot of time on this card, the author has completely captured my curiosity!
Do not be mistaken, such a quality requires a substantial work upstream.
To produce high-quality visuals, we must first have a good dataset, good tools to process them, choose the most relevant visual to tell a compelling story, and finally good tools for graphic production.
In order to create the map below, at regular intervals, an internet data collection engine has harvested information about real estate ads for rent on homegate.ch. Here we are concerned only with the denominated category “real estate” which includes the apartments s.l. (ie apartments s.s., studios, attics, roofs flat, duplexes etc), villas, chalets, farms etc. During a harvest, over 20,000 ads are retrieved. The addresses obtained are geocoded, meaning that geographic points are assigned to it, it can be a geographical point (x, y coordinates) or an entity such as a municipality. This makes possible to carry out some descriptive statistics such as calculating the median or average price, etc.
In the map below, the color code represents the number of ads published per commune over a given period (the darker the color, the bigger the number of ads). The tooltip shows some statistics on housing prices by municipality (minimum, maximum, average and median prices). For this map, the segmentation is at the scale of the municipality, so the count of ads is realized for each of them. The extracted data is then formatted and uploaded to our site to update this map. Everything is done automatically, without any human intervention. The triggering of this procedure is automatic, initiated by a cron (a tool allowing to schedule a task to a day, a predefined time). Only a watch for possible maintenance is necessary, for instance, the monitoring of geocoding so that the geographical allocation of the data corresponds to the physical reality of the municipalities (depending on the evolution of the Swiss municipalities which for example can change their name during a fusion).
Finally, the map below is produced using the D3 javascript library which allows to add interactivity to the visualisation in order to capture the attention of the visitors. This library allows a perfect viewing whatever the display mode. Indeed, it is possible to “zoom in” on certain area of the scalable vector map.
This post will evolve according to the automatic updates. Various display are possible as the acquired data allow different viewpoints. Thus, it is possible to display the price per square meter, the surface area of the dwelling, the lifetime of the offer on the market, etc. It is also possible to tune the tooltip, including for example graphs to show trends. Finally, it is possible to make this map an integral part of a search interface, for example by a double-click could launch a search for the targeted municipality.
To conclude, this type of approach makes possible to enhance the value of a database by making it accessible and captivating. Finally, this type of visualisation can be an integral part of the interface, it could makes it possible to make an web site attractive and functional.