Leverage on D3.js v4 to build a Network Graph for Tableau | by Charmaine Chui | Towards Data Science

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. Hence, I proceeded to explore and implement ways to plot the exact same graph on Tableau with minimal effort. This led me to create a pet project comprising of 2 parts —
Part I: A web application to output data directly for Tableau (functionalities include flexibility to manually adjust the graph’s layout + export of the final Tableau-ready data output)
Part II: Using the data generator created in Part I, include a network diagram in my next Tableau dashboard accordingly.
With regards to this part of the project, I had based my web app’s layout and functionalities on Tristan Guillevin’s https://observablehq.com/@ladataviz/network-data-generator
Don’t get me wrong while I felt it was wonderful and I was thoroughly impressed in the ingenuity of leveraging on the d3 graphing library, there were 2 main constraints when I attempted to use the outputs in Tableau —
Constraint 1: The tool does not allow the flexibility of dragging nodes directly to other positions to enable a more custom layout. While strength and collision parameters can be toggled, the node movements are unpredictable and hard to manipulate.
Constraint 2: The output generated ultimately does render the exact layout previewed in the tool. However, when I attempted to filter the displays of some nodes or links, there was no particular field in the data outputs — nodes.csv and links.csv which allowed this to happen in Tableau easily.
Before resolving the above 2 issues, I went ahead to develop the web interface in a similar format as the one by Tristan Guillevin:
Basically, it’s a single page application with all instructions and required information along the way. Now, here comes arguable one of the most user-friendly features — Enabling users to manually alter and drag the nodes to conform the graph to their desired layout:
Here’s a clear comparison that the tool has successfully altered the nodes’ coordinates after being shifted:
Hence, (1/2) of the constraints is resolved — the other outstanding issue being that the original output generated do not allow filtering of specific nodes or links when plotted in Tableau (which shall be addressed and elaborated on in the Part II).
Eventually, I decided on identifying Singapore’s Dengue Clusters in 2020-Q3. The raw data sources are stated in the final dashboard itself but after geocoding and some data transforming, the required JSON input to generate the Tableau graphs are churned out: https://github.com/incubated-geek-cc/tableau-data-utility/blob/master/public/data/sg_dengue_clusters.json
After plotting the network graph and adding the maps onto the dashboard, I faced the 2nd constraint of being unable to filter by specific nodes/links:
[Id] (nodes.csv): Identifier of each node
[Id] (links.csv): The [Id] of the node i.e. the source/target
[Key] (links.csv): a numerical value auto-generated to identify the source node and target node
[Type] (links.csv): source/target
Realistically only the [Id] field can be used to identify which nodes/links to filter. However due to the output format when a single node is filtered the links of the nodes are not filtered by default, this leaves many suspending links in the diagram:
The solution I came up with was to generate an extra field known as [Link Id], which basically concatenates the [Id] of the source node and the [Id] of the target node. This serves the same purpose as the [Key] field, which is used to distinguish the links but both nodes and links are now identifiable by the [Link Id].
Thereafter, a field known as [Filter by Link Id] is created with the following formula:
IF [Parameters].[Cluster Id]=’All’ THEN TRUE ELSE  RIGHT(link_id,LEN([Parameters].[Cluster Id]))=[Parameters].[Cluster Id] END
Hence, the dashboard can finally be cross-filtered across the network diagram and other visualisations simultaneously:
Feel free to use the tool deployed over at https://tableau-data-utility.herokuapp.com/ to generate your Tableau network datasets.