Back

It was a trip creating this map as I didn’t use any off-the-shelf GIS tools like QGIS or R for this and just relied on my coding and graphic design skills.

I obtained the data for the WPFI¹ and HDI² scores via Wikipedia because it was quite easy to just copy the HTML tables and paste them into #LibreOffice Calc and then use my spreadsheet-fu to match the data and generate JSON.

¹ https://en.wikipedia.org/wiki/List_of_countries_by_Human_Development_Index
² https://en.wikipedia.org/wiki/World_Press_Freedom_Index

2/4

And since I already had some #JavaScript code³ to render country polygons from #NaturalEarth I figured it would be simple to just add more code to map the countries’ scores to the correct colors.

I created a function that takes a country’s 2 scores and return a CSS RGB string representing the bivariate color. For this I used the brewer.seqseq2 color scheme⁴ but interpolated from 3×3 classes into 5×5.

³ Cahill–Concialdi projection renderer: https://github.com/seav/cahill-concialdi
⁴ https://kwstat.github.io/pals/reference/bivariate.html

3/4

I also added some code to render the bivariate color legend as a diamond.

Since the map was rendered in the browser as SVG, I exported the vector image file and opened it in #GIMP (note: I have no opinion on the petition⁵ to rename the app) to do some post-render cleaning up and add texts and labels. (I actually could have just coded the texts in JS but I was already in way too deep. )

⁵ https://www.theregister.com/2019/08/28/gimp_open_source_image_editor_forked_to_fix_problematic_name/

4/4