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 of the map. In a fourth article I discussed zooming in (and then out again) in two different ways: programmatically and user initiated.
In this article I take what I created in those earlier articles and apply it to data regarding The Netherlands.
Visualizing The Netherlands
The first step in visualizing a part of the world with d3.js obviously is finding the GeoJSON file that provides the geographic information. With a little searching, I found the Cartomap GitHub repository that contains many useful GeoJSON files that provide geographic information for different regional systems – such as courts of justice, fire service, labor market, tourism, health, municipality, urban areas, youth, chamber of commerce, agriculture, utilities, police, province, ressort, neighbourhood, safety regions. Most files are available for many different years.
The file I decide to make use of wgs84/provincie_2023.geojson. It contains geo coordinates for boundary points for 12 provinces. It has the name of each province. That is all I need to draw the map.
I have taken most of what I did in the articles on visualizing the world. I have changed all references to country/countries to area/areas. I have found here the suitable initial scale factor (The Netherlands is a small country and without a massive scale up, it is hardly visible) as well as the proper projection rotation. Instead of the d3.geoEquirectangular projection, I now use d3.geoMercator (better suited to smaller countries without the shape of the globe interfering with projection). Given the shape of the country, I have increased the mapHeight (relative to the width)
I have defined constants to indicate the properties from the GeoJSON features that provide the content for the title (hover text) and the identification:
These changes play out in the redrawMap() function:
And also in the logic around selecting and deselecting areas:
The status of the index.html file at this point. See the live demo on GitHub Pages.
Showing Locations on the Map
This is a nice first step: visualization of The Netherlands and its main regional subdivision.
Let’s take it one step further and add locations on the map. Geographic points that represent for example cities. Or Conclusion office locations.
This GeoJSON file contains Large City Areas. Defined again through polygons. These can be drawn on top of the provinces and indicate the main cities in the country.
The changes required to include the city areas are fairly small:
- define a style class for the city areas
- load the City GeoJSON and merge it into the main GeoJSON with province details
- assign the proper style class to the shapes constructed for the provinces and the cities respectively
The class city:
Loading and merging the cities GeoJSON:
Assigning the proper style class when rendering the SVG shapes:
The resulting map looks like this:
All city areas are highlighted. Each have their name in the hover text. And just like provinces, these city areas can be selected:
The state of index.html at this point. And the live demo.
Now instead of having the cities drawn as polygon area, I think it is better to have each city represented by a circle – derived from a GeoJSON Point instead of a Polygon.
What I need to do to accomplish this is processing all elements from the cities GeoJSON, creating a Point element for each and adding that to the geojsonData derived from the province data.
The resulting map:
For those of you familiar with Dutch geography, you will notice that these city circles are not all located where the city as we recognize it is actually located, Clearly, the center of the rectangle bounding the city regions is not always in same spot as the actual city center.
I could play with the size and color of the visualization of the points (aka cities). The simplest thing to do: define the path generator with a custom setting for the circle radius: d3.geoPath().pointRadius(custom-circle-radius);
The path generator function used when creating SVG objects for GeoJSON features can be made to call a custom function for Points:
One possible implementation of the custom function that creates a path that draws a simple house shape (well, just a rectangle and a triangle):
The map now shows simplistic house shapes at the location of the cities:
The state of index.html at this point. And the live demo.
Add Conclusion Office Locations
As of May 1st 2023 I am the CTO for the Conclusion ecosystem of IT companies. Conclusion consists of 30+ autonomous companies, each with their own expertise, culture, history (and future), propositions and customers. These companies collaborate – internally to do things smarter and more efficiently, to share knowledge and experience based good practices, to have more fun in sporting events, cultural activities and charity and allow colleagues to pursue careers in different roles in sister companies and externally to provide a broader range of mutually aligned services for customers.
Within The Netherlands, Conclusion has over a dozen locations. Most are for an individual company and some host several of our companies. Most can be used by all colleagues if they want to come into the office.
To visualize all the Conclusion office locations, I am going to use the map of The Netherlands including provinces and cities.
I will add a new GeoJSON file – that I need to create myself – to indicate the locations of the Conclusion offices. These locations are features of type Point and they should be visualized as the house icons I have just used now for cities.
I have defined a new CSS style for the offices:
The new file is loaded and the data for the office locations is included in the geojsonData set
When the feature describes an office location, then the custom function that will draw the little house icon is invoked:
This results in the following map:
You can check this result yourself in this live demo. The current state of the index.html is also available.
As a next step, I can implement the popup window that when an office is clicked will show details on the location and the companies that are located in it (the necessary information is already in the GeoJSON file).
Conclusion
In this article I have shown how I could visualize GeoJSON data in the context of The Netherlands, Reusing all code that was developed for the world map, I could easily plugin a GeoJSON file with data for the Dutch provinces and cities and have those visualized (with a hugely adapted scale factor). I then introduced custom point representations – to show the office locations of the Conclusion ecosystem (in The Netherlands; we also have locations in Germany, Belgium, Portugal, Spain and South Africa. Maybe I will add these in a next article).
Resources
GitHub Repository with the code for this article, including the new GeoJSON file – that I needed to create myself – to indicate the locations of the Conclusion offices.
My earlier articles on World Map data visualization:
1. Create Interactive World Map to Visualize Country Data – https://technology.amis.nl/frontend/web-html5-css3/create-interactive-world-map-to-visualize-country-data/ – introducing World Map Data Visualization with d3, SVG and JavaScript.
2. Presenting the World in Data using World Map Visualization – https://technology.amis.nl/frontend/presenting-the-world-in-data-using-world-map-visualization/ – bring together a straightforward approach to data visualization (from article one) and a rich data set from Kaggle that provides many interesting details for all countries in the world, related to education, health, economy, demography, climate and more.
3. Interactive Data Visualization in World Map–Zoom, Translate, Legend – https://technology.amis.nl/tech/interactive-data-visualization-in-world-map-zoom-translate-legend/ – a closer look at adding some interactivity to the world map. In particular: changing the rotation of the map, select countries (by clicking on them), show country details popup window and show legend – color scale (mapping heatmap colors to numerical values)
4, World Map Data Visualization with d3.js, GeoJSON and SVG–zooming and panning and dragging – https://technology.amis.nl/frontend/world-map-data-visualization-with-d3-js-geojson-and-svg-zooming-and-panning-and-dragging/ – brining zooming and panning to the world map, both user initiated and programmatically.
