Jekyll Network Analysis Component

This article will take about 5 minutes to read.

I’m experimenting with creating new components in Jekyll, and since I’m interested in network analysis, I wanted to create a D3 graph component.

Skip to the demo if you are just interested in seeing the component in action.

Some issues to work out later

Code duplication

The component defines the function for creating the graph each time it is included, which causes duplication for no good reason. This is ok if there is just one or two at a time, but would cause issues if there were many on one page.

Hard to set the height of the graph

One thing that I noticed while writing this is that there doesn’t seem to be a good way to pass the width and height into the component, because D3 sets those fields during runtime. The creation of the SVG looks like this

const width = 400;
const height = 400;

const svg = d3
  .select("#graph-container-")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

which means that we need to pass in the width and height. I tried to pass in width: 100%, height: 300 to no avail.

Demo

Below are some examples that I’m using to test its functionality.

They use D3’s drag and force simulation features, so you can drag the nodes around to see them in different orientations.

loop

linear

branch

branch and join