Map Visualization of (office locations in) The Netherlands -using GeoJSON, D3 and SVG

Lucas Jellema
8 min readJan 2, 2024

The combination of GeoJSON data sets and the JavaScript d3.js for SVG visualizations is quite valuable for creating rich and interactive visualizations of data that is related to geography (regions, countries, states, provinces, cities etc.). In this article I will apply this powerful combination to The Netherlands, the country I live in. I will find a GeoJSON file with data for the 12 provinces in The Netherlands and visualize the country with its provinces using d3.js in a simple web application. Then I will markers for the location of the offices of the Conclusion companies (Conclusion is the ecosystem of companies for which I serve as CTO).

In several recent articles on Data Visualization using a Thematic World Map with color shades assigned to countries based on their value for a specific property in a world data set I have introduced the use of d3.js library for browser based visualization using SVG in combination with the GeoJSON data format in which many geographical definitions are available, from countries and states to cities, lakes and forests. I have shown how we can easily make the map switch between different properties and how we can add some degree of interactivity (allowing countries to be selected by clicking on them and changing the rotation or horizontal / east-west translation…

--

--

Lucas Jellema

Lucas Jellema is CTO and IT architect at Conclusion, The Netherlands. He is Oracle ACE Director, one time JavaOne Rockstar and programmer