How do I visualize a relationship without a parent/child data structure?

Question

I'm working with an array of objects that has been pulled from a database; a csv file in essence. A sample object is like this:

var data = [
 {
  "name" : "blah",
  "number" : 1234,
  "associate" : 2234
 },
 {
  "name" : "blurg",
  "number" : 2234,
  "associate" : null
 },
 {
  "name" : "blarg",
  "number" : 3334,
  "associate" : null
 } 
]

What I want to do, is draw a line or path between the objects that have an "associate", and their appropriate "parent," though it's not structured as a parent/child.

Conceptually, this is what I'm thinking:

var diagonal = d3.svg.diagonal()
 .source(this)
 .target(dom_element_whose_number == d.associate);    

var filteredData = data.filter(function(d) { return d.associate };

svg.selectAll("path")
  .data(filteredData)
  .enter()
  .append("path")
  .attr("d", diagonal);

Any suggestions? I've been banging my head against this for a while...

You would need some kind of structure that tells it what source and target are. That is, preprocess the data such that you have elements that have `source` and `target` attributes and pass that to `.data()`. — Lars Kotthoff, Jul 17 '13 at 04:39

score 0 · Answer 1 · answered Jul 17 '13 at 04:51

You could do a recursive tree traversal and render the nodes step by step. This means also that your data has to be linked or you will be searching childs over and over in your dataset which is inperformant if the amount of nodes increases.

I've written a tree traversal which i used for process several tree structures in order to render the (in our case from bottom up - but traversal can be used in both sides). Unfortunately it's written in c# and i'm not in Office right now so i can't post the renderer. If you're interested i can outline the principal the renderer works.

I would be very interested in this! Some element of preprocessing seems to be necessary with this data... — lionade, Jul 18 '13 at 05:45

score 0 · Answer 2 · edited May 23 '17 at 12:11

0

I guess what you need is to draw a general graph (not tree structure), but don't know how to layout the nodes and edges so that they don't look like a total mess.

There are some graph layout algorithms out there. The basic idea is to treat the nodes as objects that repel each other (like in physics), so that the graph is expanded to the largest extent possbile.

I found this SO question relevant: Graph auto-layout algorithm

And if you want to dig deeper, here is some research papers on the subject: https://graphics.stanford.edu/wikis/cs448b-12-fall/Graph_Layout_and_Network_Analysis

Hope this helps!

edited May 23 '17 at 12:11

Community

1
1

answered Jul 17 '13 at 05:01

NeoWang

17,361
24
78
126

Thanks so much for the resources! I will definitely read up on those...data structures are actually very new to me as a social media guy gone front end designer gone data-visualizer...the auto layout system is exactly what I've been looking for, I'm going to be looking at that intensely. – lionade Jul 18 '13 at 05:49

How do I visualize a relationship without a parent/child data structure?

2 Answers2