Map visualization of open data with D3 (Part2)
In the previous part, we introduced cartographical concepts and tools. It’s time now to have a look at the use we will implement with D3.
Use case
In this article, we will display on a map with different color levels the populatio of each town of the Seine-et-Marne county in Ile-de-France. This allows us to quickly see the most populated areas of the department.
Datasources
To build our map, we will aggregate two kinds of data :
- Cartographical data defining the foundations of the map like departement and town shapes and rivers.
- Structured data providing the number of inhabitants per town and the location of the main towns of the department.
The following figure provides an overview of these datasources.
The link between the two kinds of data will be done either using the INSEE identifier or their location (longitude / latitude). Geographical data additionally contain some properties describing each shape. In the case of town shapes, we will leverage the following properties :
- C_CAINSEE: The INSEE identifier of the town
- L_CAB: The name of the town
- B_BOIS: If it’s a wood or a forest
- L_BOIS: The name of the wood or forest
Regarding data related to the inhabitant number, we will leverage the following columns :
- Code département: The departement identifier
- Code commune: The town identifier within the departement
- Population totale: The number of inhabitants for a town
As you can see, the INSEE identifier isn’t explicitly presend in the second dataset but can be deduced by concatenating Code département and Code commune columns. Another small adaptation consists of removing spaces into the Population totale column to transform its values to integer.
Preparing data
As we can see open data getting from the Web are raw. They are wider than what we need and aren’t necessarily in a format usable in a Web application.
There is a prior phase to prepare and format data to make them usable into our application, as described in the following figure.
In the next and last part, we will implement this use case with the D3 library.
