Jonas Kersulis     Posts     Research     Teaching     Presentations

Visualizing Power Grids with D3

The graph visualization at right is based on data from MATPOWER. I followed this post to get it working on this site (see the page source).

Sometimes you need to learn five things to do one thing. I wanted to visualize power grids with D3. I had to learn:

  • D3 itself. I worked through the first eight chapters of Scott Murray’s book.
  • JavaScript. D3 is JavaScript, of course, so you can’t really separate the two. I learned from chapter 3 of Murray’s book and played around with the console in Chrome’s developer tools. JavaScript also has commonalities with Visual Basic for Applications and Julia in, and I have a good years’ experience with each. The worst JavaScript I had to work through was for Jupyter/Julia/D3 integration; it wasn’t too bad.
  • HTML. Where do scripts go? In what order does the browser do things? I don’t need to know everything about HTML, so I’m just learning what’s necessary as I go.
  • CSS. One uses CSS selectors to modify SVG attributes, so got re-acquainted with CSS.
  • JSON. D3 and Julia seem equally happy with CSV and JSON, but I went with JSON for this project to learn something new. I wrote Julia code to build a Dict containing network information, then used JSON.jl to convert it to JSON. The beauty of D3 is that visualization structure and markup are independent of data, so I can simply pass different JSON objects to visualize different networks.

I am currently working on a Julia interface to the D3 force layout. The goal is to be able to specify a property and corresponding data, and have D3 update the appropriate graph properties. Something like:

g = d3graph()
d3update(g, "nodes", [0;1;2])
d3update(g, "node_colors", ["blue";"blue";"red"]
d3update(g, "links", [(0,1);(0,2)])
d3update(g, "link_labels", ["first link"; "second link"])

My most immediate application for this tool is visualization of injection shift factors and transmission line temperatures. Hopefully my code remains flexible enough to see a variety of additional applications.

Update, March 21

I’ve begun binding research results to my graph visualizations. This one compares injection shift factors with the output of an algorithm I have been working on.