Sign in

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

Illustrative tutorial to deploy a ML model on a Flask Web App for public use.


  1. Heroku account (Sign up at if you haven’t got an existing one)
  2. GIT installed on local PC (Install GIT at at no cost)
  3. A trained ML model (shall name it as model.pkl in this tutorial) developed in python.

So you have a working ML model on your local development environment and you are stuck at the “Model Deployment” stage illustrated in the the ML lifecycle below:

Image by Author | Showing casing the ML life cycle

Then you have come to the right place! The rest of the article shall be focusing on the Model Deployment step. The full source code is available at my GitHub at…

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 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…

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 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…

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. Dashboard visualisations) or to minimise spatial distortion from overlapping geometry features. Well, I have got good news for these individuals as I have recently discovered that the combined use of 2 JavaScript libraries — enables users to render the required output instantly, eliminating the hassle of adding any extra calculated fields in Tableau. This new functionality has been deployed onto my web app at for the convenience of users and for future…

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 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 —

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:

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:

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