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.
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:
to render the following icon:
in web applications:
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
Overview
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:
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. …
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.
Basically when Internet accessibility is not available, the above map rendered becomes like this instead —
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:
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: http://leafletjs.com/download.html and initialise a basic map and marker. In this example, I am going to use the leaflet v1.2.0 available for download at http://cdn.leafletjs.com/leaflet/v1.2.0/leaflet.zip …
