communicate - All Forums

multiple directed edges and labels

Thu, 24 Jul 2008 13:15:42 +0200

I'm making a program that will visualize some data - the nodes can have multiple same directed edges.

So the first thing is to make multiple edges on nodes - I already looked into Edgerenderer, but I wan't your opinion how it would be possible to implement this.

At last those edges have labels (decorators), currently I place them by getting
from edge layout all items and get their bounds.
Excerpt from program:

Code:
Iterator iter = m_vis.items(m_group);
while (iter.hasNext()) {
DecoratorItem decorator = iter.next();
VisualItem decoratedItem = decorator.getDecoratedItem();

if (decoratedItem.isVisible()) {
Rectangle2D bounds = decoratedItem.getBounds();
...

This obviuously doesn't work if you have more than one edge on same nodes, because all labels will be centered between that nodes.

How can I solve this in best possilbe way?

new user seeking help with network graph

Fri, 18 Jul 2008 05:54:04 +0200

Martin

this is the graphml file I was talking about...I realise there may be things that need to cleaned up like :

- there are alot of links
- nodes are identified by proper nouns
- weights range may be too large

but I can manage all this in the futue...

thanks

RadialTreeLayout out of bounds

Thu, 17 Jul 2008 16:02:02 +0200

Hi There!

I have a problem applying RadialTreeLayout, the nodes are out of bounds of my display, i dont know how to put inside bounds of my display. In others words i want that action fit in my display.

thanks!

ForceDirectedLayout - individual edge spring length

Wed, 16 Jul 2008 14:24:58 +0200

Good morning,

hope all are inspired out there.

This demo pretends to show how to customize the edge spring length for the ForceDirectedLayout on an individual edge level. It does this by overriding the restLength:Function variable of the layout

Code:
var fdl:ForceDirectedLayout = new ForceDirectedLayout();

fdl.restLength = function(e:EdgeSprite):Number {
    if (e.source.data.type == e.target.data.type) {
        return 177;
    } else {
        return 266;
    }
}

In this demo nodes are categorized into three node types. Edges between nodes of the same type have a shorter rest length.

[attachment=262]

Cheers

martin

html labels for svn flare

Fri, 11 Jul 2008 11:19:15 +0200

hi everybody,

I'm following this fantastic forum for a while and I finally found the time to contribute something back.

The svn version of flare contains a Labeler class which simplifies the use of labels on nodes. Unfortunately it does not permit to set htmlText, so I hacked up a quick solution: HtmlLabeler that extended the Labeler adding some support for flash HTML.

Here is a almost complete example of using it:

Code:
/* Initialize labeler */
            var ll:HtmlLabeler = new HtmlLabeler(nodeLabel, Data.NODES, textFormat);

            /* set bounding box */
            ll.width = boxWidth;
            ll.height = boxHeight;

            /* set some css */
            var css:StyleSheet = ll.css;
            var body:Object = new Object();
            body.fontFamily = "Arial";
            body.fontSize = 9;
            css.setStyle("body", body);

            /* set textmode to smooth rendering */
            ll.textMode = 0;

            /* add it to visualization */
            vis.operators.add( ll );

the class containing this code should implement a nodeLabel method that returns the HTML string to be displayed on each node:

Code:
public function nodeLabel( d:DataSprite ):String {
            return "

LABEL

IN HTML !!!

";
}

Any comment and suggestion will be welcome.

PreciseZoomControl

Tue, 08 Jul 2008 14:19:36 +0200

I noticed while zooming with the mousewheel, it either goes too deep or too far away.

To solve this issue, I butchered the ZoomControl, and made the following modifications:

private function onMouseWheel(event:MouseEvent) : void
{
var dw:Number = event.delta;
var dz:Number = dw < 0 ? 0.975 : 1.025;
Transforms.zoomBy(_object, dz);
}

it checks whether the event delta is positive or negative, then assigns dz according to that. one improvement could be based on delta substract or add it to one multiplied with a constant.

PrecisePanZoomControl is attached.

Best to all.

Using Data from a DataSet

Mon, 07 Jul 2008 10:16:09 +0200

**I also posted this on the sourceforge forums
Hi all, I know this is probaly a stupid question, but I can't seem to find any information about my particular problem.

I have this code, taken from the tutorial, in my program.

private function loadData():void
{
var ds:DataSource = new DataSource(
"http://blah.blah.txt", "tab");
var loader:URLLoader = ds.load();
loader.addEventListener(Event.COMPLETE, function(evt:Event):void {
var ds:DataSet = loader.data as DataSet;
buildVis(Data.fromDataSet(ds),5);
});
}

I want to use the Data object that was created from the Dataset which was in turn created from the loader to populate some nodes. The data located in blah.txt is a tab delimited text file that has rows with data, obviously :).

How do i get into the Data object I created with my TAB file, and grab specific values from each of my tab delimited rows?

For example, one row is called "user ID"... How do I go about getting the fourth row under the "user ID" column? I don't really know how to work with this Data object that I have created... and the tutorial only uses the WHOLE data column to drop into encoders which isn't very helpful to me to understand this.

I hope someone can point me to a tutorial or post something.

flare and the PureMVC framework

Fri, 04 Jul 2008 14:41:37 +0200

Good morning,

hope all are well.

This demo is my first attempt to fit flare into the wonderful PureMVC framework. The implementation follows Chandima Cumaranatunge’s excellent PureMVC walk-through in its updated version by Alastair (in order to work with version 2.0.3 of PureMVC)

Make sure you have PureMVC in your class path in order to be able to run this demo.

My first PureMVC based application so please be patient.

TO BE DISCUSSED

Cheers

martin

ps this demo is the complementing the flare and the model view controller pattern demo which achieves exactly the same result as this demo here.

NEW VERSIONS
Just attached the second version of this demo to this thread. The previous one missed the ApplicationFacade class.

Please see one of the replying threads for version 3 of this demo.

flare and the model view controller pattern

Thu, 03 Jul 2008 18:20:09 +0200

Good morning,

hope all are well.

This demo is my first round approach of fitting flare into a MVC pattern architecture. I basically tried to follow the implementation outline of the "Car" example from the 12th chapter of the book "ActionScript 3 Design Patterns" by William Sanders and Chandima Cumaranatunge.
The 12th chapter of this book can be downloaded for free from here.

I hope that this demo program stimulates a discussion within the flare community about different architectures for flare applications suiting varying needs. I am by no means an OO architect so this demo is meant as a starting point rather than a demonstration how to do it.

What might be worse noting about the approach chosen here is that the graph data is held twice, once as usual in the model layer, secondly in the view.
This approach is partly stimulated by a post from Wouter Van den Broeck in the sourceforge flare forum http://sourceforge.net/forum/message.php?msg_id=5066814 who explained there about his specific implementation: "I do have a 'real' data model separate from the flare data, as I consider the flare data to be part of the 'view"

In this demo here the flare Data class is also used in the model layer to hold the data (yet in a different instance than the one used in the view). This is solely due to the laziness on side of the author when it comes to writing demo programs and most likely not the way to go in normal applications. Nevertheless I hope this is not crucial for the discussion I would love to stimulate.

TO BE DISCUSSED

Cheers

martin

I just posted version 02 of this demo, which exchanges the ridiculous modelName lookup routine in the GraphView class with a dictionary lookup

Multimedia support

Mon, 30 Jun 2008 13:59:24 +0200

Hi prefusers,

I'm looking for how to put multimedia (sound and video) as a node at prefuse. Anybody do this ?

thanks!

ps: sorry post here, but i dont know why the sourceforge is down for me.

adding a graph to existing one

Tue, 24 Jun 2008 17:56:13 +0200

hey everyone!
so i was wondering if anyone could help with this:
i've built a visualisation of an intial graph already, and then i put an eventlistener on one of the nodes such that when u click it, a new graph will be shown.
what i want then is to add an edge between the root of this new graph and the node that triggered this!

any help will be greatly appreciated ! (also note that my code is inspired by the codes posted in this forum !! :D)

thank you very much!
best!
yassine

IndentedNodeTree registering mouse clicks for closed nodes

Mon, 23 Jun 2008 17:21:45 +0200

I'm working on a program (my first in as3, flex, or flare) that takes in a given dataset and dynamically displays menus and the data. However, somehow the indented node tree I'm using as a menu for now has begun acting oddly. The leaf nodes for some (but not all) of the unexpanded nodes are registering mouse clicks when I'm attempting to select a sibling node below it in the layout. I'd really appreciate it if someone could help me out with this.

The menu is in the class LayoutMenuSprite in the project I've attached, and I've been using the data from the tutorial to test it with (http://www.cs.berkeley.edu/~jheer/data/h...es.tab.txt)

Thanks,
John

Flare in Flex Need ScrollBars

Mon, 23 Jun 2008 05:28:01 +0200

I am using flare in Flex. When I render the graph it is going outside the canvas. I really don't want to add pan/zoom control. How can I add scroll to flare visualization. Help me.

Regards,
Jaga

Updated Topology With True Graph Type Layout and Collapsible Containers

Fri, 20 Jun 2008 17:27:35 +0200

Excuse the poor quality, the videos were taken with a cellphone.

I just figured some people might like to see some of the things flare is being utlized in.

Enjoy!

(It's the topology component of Akorri's BalancePoint product http://www.akorri.com)

http://www.youtube.com/v/E1HvMMlqjrA&hl=en

http://www.youtube.com/v/CI57VAyvYxs&hl=en

http://www.youtube.com/v/J5j_mJlQbuM&hl=en

How to get the Id of the Node

Tue, 10 Jun 2008 10:24:48 +0200

I have a graph in graphml format and I need to get the 'id' of the nodes while rendering the node.How do I get the ID if the node?

Multiple bars in a bar chart

Sun, 08 Jun 2008 13:52:43 +0200

Hi,
I am pretty new to flare. Could anyone help me, by telling in detail, how to display multiple data on a single bar graph using Flare?

For an example:
I want to represent A, B, C and D, along the x-axis. Along the y-axis, I want to display marks ranging from 1-10. For each of A, B, C and D, I want to display 3 data, their knowledge in C, knowledge in C++ and knowledge in Java, on a scale of 1-10.

In short, I want to represent 3 bars for each individual. You can see what I exactly want to built here, its just the same visualization:
http://services.alphaworks.ibm.com/manye...~~vgcAKO2~

Thanks in advance :)

progressive node adding

Sat, 07 Jun 2008 16:27:54 +0200

Good morning,

hope life is well out there.

This demo compares two ways of adding nodes and edges to a graph

adding all at once
adding nodes and edges in a progressive manner

The progressive approach was inspired by Aharef's wonderful Websites as Graphs application. The initial hope was that the progressive manner leads to better unfolding of the graph but funny enough in all examples I tried so far the progressive approach was at best not worth than the adding all at once implementation. Based on that I focus now on emphasizing the visual attraction of the progressive strategy.

For sure still rawish and to be refined.

cheers

martin

the demo in action

Is it possible to do Fisheye with a Radial Spannning Tree?

Thu, 05 Jun 2008 17:53:54 +0200

Just wondering, haven't had any luck but I would not be surprised if it doesn't work.

Force-Directed Layout Simple Question

Thu, 05 Jun 2008 16:04:47 +0200

I'm brand new to Flex and Actionscript and have literally only been working with them for about a week, and I'd never heard of flare or prefuse until then.

I'm trying to get a simple (or so I think anyway ...) Force-Directed Layout going, but I can't get any edges to appear at all. The edges are dynamically generated and do exist in the Data variable, but none appear.

So, my question is, can you make a ForceDirectedLayout with only some nodes having edges? Ie, can there be two separate clusters of edge-connected nodes, and some free-floating ones?

Thanks,
John

how to avoid overlapping edges?

Wed, 04 Jun 2008 19:42:17 +0200

Hi guys

I am not an expert on visualization techniques, but by looking at the many examples (btw, tx a lot goosebumps4all!) I still managed to get something done with flare.
Basically I'm visualizing a network of 'claims', where the nodes are the texts of the claims and the arrows are the logical relations among the claims. I am using the basic stuff in flare, plus I added some components I've found here and there online, in particular the EdgeLabelLayout, ArrowEdgeRenderer and other stuff. Needless to say, thanks to all of you for having shared that!

I've run into various issues while using the force directed layout... i posted all the examples and the code at http://cohere.open.ac.uk/flare_test/readme.html

1) Everything kinda works with a small graph, but when I have a lot of data to visualize things start overlapping all the time... making the resulting visualization impossible to read. I guess I need some sort of reduce-crossing-things algorithm.. but I believe I dont have enough expertise to delve into this topic..do you have any suggestion about that? I implemented a quite simple 'expansion' routine to overcome this problem [reduceCrossings() function], but it doesnt perform well when there are a lot of nodes.

2) Also, in the code you'll find a couple of functions [createMyLayouts(), switchLayout()] which are partially inactive in the demo. Basically I was trying to set up controls for letting a user change the layout (e.g. from force directed to indented or radial) of the whole graph. But unfortunately this doesnt work ... the biggest problem, i guess, is that (as mentioned in another previous post) most of the flare layouts work only with trees... while what i'm dealing with here is a graph (that is, a set of trees with no common ancestor). Does anybody know whether is there any workaround for this?

3) finally - i've been trying to make the whole thing work within a flex application (so to use the other UI components too). I tried to follow the instructions posted at [http://sourceforge.net/forum/forum.php?thread_id=2037783&forum_id=757572] ... but the resulting output is really messy (see the example). I couldnt get my head around it yet.... any idea why this is happening?

thaaaaaanks!!!
mik