Circular Graph

Programming Questions

sonderfor..

in Programming Questions • 11 months ago

Hi there,

I'm working on a graph visualization showing multiple connections between nodes.

I want to map them in the circle like

http://www.visualcomplexity.com/vc/project.cfm?id=717

My data (*.tsv) looks like:

1 <Name> 2 4 5

2 <Name> 1 3

3 <Name> 1

4 <Name> 5 1

5 <Name> 1 2 3

n ...

I read that file out with the TABLE class by Ben Fry.

My status is that I read the rowCount and draw a point for each row in a circle.

Fine. But how to draw the connections between the rows?

I smell that I have to create an array per row. This I get possibly done.

But then compare the arrays with each other and draw the bezier if there's a match?

I can't imagine that in code.

If somebody can push me I'd be super happy.

Also if somebody knows a tutorial about circular graphs would be great.

thanks,

Replies(2)

amnon.owed

Re: Circular Graph

11 months ago

See and download:
http://www.generative-gestaltung.de/M_5_4_01
http://www.generative-gestaltung.de/M_5_5_01_TOOL

sonderfor..

Re: Circular Graph

10 months ago

Thanks for your answer. Yes. Respect to those boys.

But looking at this has only brought me some steps forward.

Key I think is that in the "sunburst" the lines are drawn from child to parent objects to visualize relations of hierarchical order. Well. It's hard for me to deduce from that.

line(x,y, sunburst[indexToParent].x,sunburst[indexToParent].y);

I have this table with cross reverences. I put a comment were the crux is. And elegant is probably something else.

float radius=400;
// --- CREATE DATA TABLE ---
Table patternTable;
int rowCount;
// --- CREATE NODES CLASS ARRAY ---
int numNodes = 15;
Node[] nodes = new Node[numNodes];
// --- CREATE EDGES CLASS ARRAY ---
int numEdges = 15;
Edge[] edges = new Edge[numEdges];
void setup(){
size(1000,1000);
background(0);
noStroke();
fill(0, 102, 153);
smooth();
PFont font = loadFont("Univers-Bold-12.vlw");
textFont(font);
// --- READ DATA ---
patternTable = new Table("patterns.tsv");
rowCount = patternTable.getRowCount();
for (int row=0; row < rowCount; row++){
float angle=TWO_PI/float(rowCount);
float x = radius*sin(angle*row) + width/2;
float y = radius*cos(angle*row) + width/2;
String patternName = patternTable.getRowName(row);
text(patternName,x+20,y);
// --- CREATE NODES ---
nodes[row] = new Node(x,y,20);
for (int column = 1; column < patternTable.getColumnCountForRow(row); column++) {
int ziel = patternTable.getInt(row, column);
println(ziel);
float to_x = radius*sin(angle*(ziel-1)) + width/2;
float to_y = radius*cos(angle*(ziel-1)) + width/2;
if (ziel > 0){
// *** HERE'S THE CRUX
edges[column] = new Edge(x, y, to_x, to_y);
}
}
}
}
void draw(){
for (int row=0; row < rowCount; row++){
nodes[row].display();
for (int column = 1; column < patternTable.getColumnCountForRow(row); column++) {
int ziel = patternTable.getInt(row, column);
if (ziel > 0){
edges[column].display();
}
}
}
}

Current result looks like that

Top Reply

Circular Graph

Replies(2)

Re: Circular Graph

Re: Circular Graph

Statistics

Tags

Actions

Related Posts