Let’s make a map!

What is this all about?

Cartography is a really interesting subject; however, it is fairly complex and encompasses a wide variety of concepts; nevertheless, that doesn’t mean you won’t be able to benefit from it! Geo-referenced data is an uncommon type of visualization which has an enormous graphic impact.

I’m starting a series of posts in which I’ll incrementally describe how to create an interactive map using the D3 library. The plan of attack consists in initially presenting, in a very simple and straightforward fashion, the basic steps to create a super simple map. Later on I’ll keep adding posts that will go deeper into the details of the D3 library; this will entitle you to create really powerful visualizations!

Where are we heading?

In this post, the very first of the series, I want to present you with an example of what you can accomplish. It is an interactive map of Mexico that displays geo-referenced information about the distributions of the crimes-count reported by different geographic regions. This is the map:

Distribution of the crimes-count reported by geographic region

Report year:
Crime type:
Geographic level:

Range-Color codes:*In color gray the regions that didn’t report any information

and… What am I looking at?

This map displays the distribution of the crimes-count reported by the different geographic regions in which Mexico is divided.

The information can be displayed at two geographic levels: state or county.

The reported time frame goes from January-2015 to July-2018; therefore, for the year 2018, the report is partial.

While the crime type diversity is fairly wide, I’m organizing it in only 3 groups in order to facilitate the analysis of the data: “Crimes against the private property”, “Crimes against the life, integrity or freedom”; and “Other crimes”.

The crime counts were divided into 10 quantiles, so that every geographic region would be encompassed inside one of 10 big groups, with each group containing roughly the same number of geographic regions. In order to better understand this methodology, an example may be helpful: Suppose that we have the information reported by 12 geographic areas, where the smaller crimes-count reported was 1 and the bigger was 5000. Now, we’d like to obtain 4 crimes-count ranges so that each range includes the same number of geographic regions (3 in this example), this way we would be building a kind of “danger map”. A possible array of the ranges could be the following:

  • Range 0 to 1: Two regions reported 0 crimes while one reported 1
  • Range 2 to 100: One region reported 2 crimes; another 12; and the last one, 100 crimes
  • Range 101 to 3000: One region reported 600 crimes; another 601; and the third one, 3000 crimes
  • Range 3001 to 5000: Two regions reported 4000 crimes and one reported 5000

As you can see, the crime-ranges in this example have very different amplitudes; however, the key point is that there is the same number of geographic regions per range.

It is important to note the fact that it is not always possible to include the same number of geographic regions per crimes-count range, variables like the number of regions reporting and, the number of crimes reported for each one, affect the final distribution of the ranges.

The data about the crimes-count was obtained from: “SESNSP-Incidencia_delictiva-Municipal”, published by SESNSP (Secretariado Ejecutivo del Sistema Nacional de Seguridad Pública); queried at https://datos.gob.mx/busca/dataset/sesnsp-incidencia_delictiva-municipal, the day 2018-Sep-04.

Final thoughts

As you may have noticed, geo-referenced visualizations have a huge potential and, if we add interactive capabilities, the final result is truly attractive. In order to achieve a result as the one I’ve presented it’s necessary to make use of many of the tools offered by the D3 library, as well as counting with reliable cartographic data; nevertheless, with patience and a good amount of effort, I’m sure that you’ll be able to develop any kind of visualization you can come up with. Stay tuned for the next post of this series!