DB Links across the Enterprise, a Connectogram with d3.js (Work In Progress)

Submitted by dave on Mon, 07/16/2012 - 00:43

The Idea
I have been seeing a lot of chord and connectogram types of visualisations and an idea immediately popped into my mind. I have a homegrown system that collects information from 500+ databases every evening. We constantly struggle to keep up with Database Link requests between databases. I wanted a way to visualize the DB link connections between all of these databases:

  • Circular graph with database names in outside ring
  • Cluster the database names by application
  • Show each database link as lines between nodes
  • Indicate sources/targets for each relationship

Nice to haves:

  • Reposition
  • Link color progression - Green shading source, red shading target
  • Gravity slider

Demo of Result

How to do it...
I used Oracle Application express to build this web page but you could use JavaScript, Python, Perl, or anything else to generate this data and make use of the visualization. Here is a static version of the visualization that you can dissect with your web browser inspector : links.html
Process Flow

  • The data in the database lives in a simple 2 column table that holds Source DB and Target DB.
  • I used an Application Express Dynamic Action to read the table and produce JSON output...
  • JavaScript in the page fires the Dynamic Action and accepts the JSON formatted text.
  • It parses the JSON text to create real JavaScript objects that are used by the d3.js code to produce objects that make up the visualization.
  • After the page is rendered there are a few dynamic behaviors (rotation and link gravity) that JavaScript reacts to.

d3 Related Logic for Rendering/Updating the visualization

I was able to find examples, inspirations, and prior art to use as good starting places.
Cluster Layout API /
ClusterRadial /
MBostock Bundle Example

Putting it all Together
As sometimes it is easier to develop dynamic behavior like this in straight HTML and then port to Apex I mocked up and refined what I wanted in a straight HTML page first, then ported to Apex after that. Here is the final version that I was happy with: links.html
Create table in your Apex DB
DDL and sample data are here: links.sql .
Create Dynamic Action

  • Edit your page
  • Add a Page Process
  • Select "PL/SQL"
  • Name your process GetData
  • Select "On Demand - Run this process when requested by AJAX"
  • Select Next
  • Enter the PL/SQL you want to run On Demand and click Create Process. In this case see logic.sql

When called by JavaScript the Dynamic Action should return something that looks like this: links.json

Build Apex Page
Add a HTML region to your page named myviz with the following code.
Check inline comments for explanations and highlights: