Charmaine Chui
Data Analyst ● Full-Stack Developer ● Geospatial Intelligence | An Analyst who works primarily in Land Planning & the Healthcare Sector

Using D3.js to auto-calculate the (x, y) coordinates of each node and adjust the layout to your liking

So recently countries around the world are feverishly contact-tracing to control the Covid-19 infection rates. As a fellow data analyst I have been exposed to my fair share of network diagrams lately. It was intriguing to see a graph made up primarily of nodes and links to be not only aesthetically appealing but also represent connectivity between different entities effectively.

Image for post
Image for post
Image by Author | An example of a network graph rendered by d3.js to visualise frequency occurrences of #tags on stackoverflow

Majority of network graph visualisations are mostly deployed on web applications. The harsh truth is web development time far exceeds that of dashboarding. Moreover teams I have worked with are often only interested in snapshots of the network diagram so the ability to plot network diagrams on dashboarding tools such as Tableau would offer greater convenience in highlighting significant findings where interactivity with the graph is less crucial. …

I, for the life of me, could not find a single python library or npm package to get this simple job done — directly transforming a svg image to a svg symbol for inline svg use in web development. Now for those of you who are confused, I am referring to using:

as compared to using:

Code snippet by Author | The full svg element code

to render the following icon:

in web applications:

Image for post
Image for post
Image by Author | Example of use icons in a web application — Icons are circled in red

While there are many reasons why svg icons should be used in comparison to font icons .(eot|ttf|otf|woff),

Hands-on Tutorials

A Step-by-Step Guide on deploying a basemap server on your local server — The entire project can be found at my GitHub


LeafletJS, MapBox, Esri etc. These are just a few of the map plugins which analysts, developers etc. who require various Geospatial visualisations tend to use. Needless to say, all these plugins have something in common — they require a basemap service for meaningful interactivity. Thanks to many open-sourced map services such as OpenStreetMap(OSM), it is almost effortless to parse in its map service url for rendering:

Code Snippet by Author | Simple example of initialising a basemap using LeafletJS

Rationale of hosting an offline basemap

However, this easy accessibility can backfire when an application fails to connect to the map service due to unforeseen circumstances such as — Absence of WiFi, Faulty Internet Connection, the Basemap service is no longer available etc. As a precaution, it is always wiser to consider hosting your own basemap locally on your local server especially on days when you are required to demonstrate or use your application at work. …

Spatial Visualisation — Using the combined power of Turf and Hextile JavaScript libraries to generate hex maps

Having come across many articles, I do notice many individuals seek to generate hex maps for their current spatial datasets either for the sake of aesthetics (E.g. …

Geospatial Analytics in Tableau — Working with no need for geocoding/basemap services + Rendering mixed geometry types in a single setting

Having finished 1 of my spatial analytics projects, I was all ready to present my findings in Tableau but faced the unconventional problem of having absolutely no Internet access. As most of us usually take the in-built geocoding and basemap services in Tableau for granted, this had brought on more complications than I had initially expected.

Image for post
Image for post
Image by Author | A map rendered in Tableau by a spatial data file | Showcasing the distribution of citizens (65&Over) in Singapore by Planning Areas

Basically when Internet accessibility is not available, the above map rendered becomes like this instead —

Image for post
Image for post
Image by Author | A map rendered in Tableau by a spatial data file without internet connection — All geocoding & basemap services are unavailable.

So ouch… Clearly, this has some devastating impacts. What was even more devastating was the appalling lack of in-depth tutorials for rendering spatial data without its in-built map functionalities. …

Highly customisable map markers on leaflet

Most of us who are involved in GeoSpatial technologies have come across the opensourced library known as “Leaflet” at some point in our software development journey.

This is just a simple article to explain the conversion of its default markers to your preferred images, icons etc. Hopefully by the end of this article, changing this:

Image for post
Image for post
Default leaflet marker

will be at the tip of your fingertips. No more googling of “how to customise leaflet markers” just to get a bunch of complicated yet non-usable replies.

For starters, you are required to include in the basic leaflet libraries which can be found here: and initialise a basic map and marker. In this example, I am going to use the leaflet v1.2.0 available for download at

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store