Building a D3.js Network Graph in Domo

Owned by Chitra Borker (Deactivated)
Sept 19, 2022
2 min read

While Domo supports most visualization and chart types as out-of-the-box solutions ready to be graphed using an imported dataset as input, Domo does not currently support network graphs.

Network graphs, also known as node graphs, display relations between elements (nodes) using links and semantic metadata. Network graphs are particularly useful for visualizing a conversational node path or tree. We can use a network graph to answer questions like:

  • What path did a user take through a conversation?

  • What nodes were most frequented over a series of sessions?

  • What conversational themes were most popular?

To answer these questions, we have experimented with designing a custom network graph in Domo using D3.js, a JavaScript library for producing dynamic, interactive data visualizations in web browsers.

What can be achieved

Feature Summary:

  • Conversation network graph built in D3.js

  • D3.js solution transforms Conversation Node Summary endpoint data into a force-directed graph depicting conversation flow

  • Nodes are colour coded by the node category they belong to

  • Graph legend can be flexed to display any number of node groups

  • Node names and edge hit values can be surfaced by hovering over the node/edge itself

  • Zoom, click and drag functionality

    • Better able to read and maneuver overlapping edges by zooming into detailed areas and dragging/rotating nodes

    • Node and edge labels remain constant when zooming

    • Enables 360° view of the network

 

Sample code to achieve this can be found at https://github.com/soulmachines/analytics-domo-node-graph

 

Â