Flex: Prefuse Flare Force Directed Graph Demo

Prefuse Flare is a visualisation library for AS3.

Sample App

This is a demo I have been cobbling together for about a week now. Right click to examine the source code.

I am extremely impressed at how well designed and implemented the Flare library is. There are, however, a few problems.

The edges sometimes get left behind when dragging the graph. I would like to get to the bottom of this as it’s a bit of a showstopper.

The DataSprite class which is a base class for the graph nodes always calls it’s renderer in the constructor. You can reassign the node renderer when you build the graph (to say use images instead, see below) but it’s too late as the node will have draw it’s default shape.

There are also a few things I have added.

– Modified Button class with the ability to anchor it’s position and display tooltip text.

– EdgeLabelLayout ‘operator’ class which keeps EdgeLabel objects positioned at the mid-point of the graph edges.

– ShapePalette and ImageRenderer classes to implement rendering PNGs on the nodes. I have left the functionality switched-out for now as the library code always renders the default node shape regardless if you plug in a different node renderer.

This is a bit of a try-out to see if I could reimplement the Social Graph Browser with a different graph component. I really like the Flare library and hope to use it more.

Update #1
The issue with the DragControl has been resolved. You can pass in a predefined filter function to limit the items which can be selected:

new DragControl(this,Filters.isNodeSprite);

Right-click to view updated source.

Update #2
I have created an AIR version of this demo which uses the latest version of the Flare library. All of the issues in this original demo have been fixed. Go here.


12 Responses to “Flex: Prefuse Flare Force Directed Graph Demo”

  1. dave on March 28th, 2008 7:58 pm

    Hi Al,

    Thanks for an awesome demo.

    I am currently trying to incorporate your concepts into the Flare ‘graphView’ demo. If you are familiar with this demo, I’m having an issue getting your simulation to run twice. I have it set to run once the user clicks on ‘ForceDirectedLayout’ — the first time it works beautifully, but if I click another layout, then come back to this option, it just shrivels up.

    Do you have any thoughts as to why this could be happening?

    – Dave

  2. Administrator on March 28th, 2008 9:51 pm

    Hello Dave,

    I have seen this before. I think it’s something to do with having to apply the ‘RadialTreeLayout’ layout to the graph before displaying. This make the nodes spring out before the ‘ForceDirectedLayout’ is applied. I am mystified why the ‘graphView’ demo works okay and this doesn’t.

    Send me your code in a zip file if you can’t resolve it and I will have a look at it (email in the ‘About me’ page).

    Another good resource is Martin on the Prefuse Flare sourceforge forum. He seems a great deal more knowledgeable about this stuff than me.


  3. dave on March 28th, 2008 10:51 pm

    Thanks, Al! I saw the post — Martin is good! I just thought I’d give you first crack at it, since it is your code.

    I totally agree with you…it’s like they compress but won’t spring out. I will send you an email with my zip in it; thanks in advance!

    Just a word of warning, I had to change the name of ‘Button.as’ to ‘Button_2.as’ as it was causing a conflict with another project I was working on.

  4. Jeffrey Heer on April 2nd, 2008 2:52 pm

    hi Al,

    This is Jeff, of the Prefuse and Flare projects. Glad you are enjoying Flare, and thanks for pointing out the issues. I’ve made a number of recent fixes that should help, including better force directed layout (faster and more stable for large graphs), an updated drag control (hopefully those lagging edges are a thing of the past), and slight updates to how rendering is handled (I’ve tested this and have plugged in new renderers without any problems). These fixes are in the Flare Subversion repo (svn.prefuse.org/flare/trunk/flare) and will be out with the next release…


  5. Administrator on April 2nd, 2008 11:08 pm

    Cheers Jeff. I will try out the changes.


  6. Janet Huang on April 15th, 2008 10:25 am

    Hi AI,
    I refer your method to put my flare visualization by flex.
    But I meet some strange problem.
    I create the same visualization by flex and AS project.

    In AS version, it is no problem.
    In flex version, nodes display in the beginning and edges display during a period of time.

    Do you meet such problem in flex???

    My visualization:
    1) AS version

    2) Flex version

    Thanks a lot..

    – janet

  7. Carlos Carvalhar on March 7th, 2009 3:44 am


    i’m trying to add edge labels but i can’t make it move, e.y1, e.y2 is returning NaN.

    why did you setup return true to edge’s visit?

    ah, i can see the labels, they just don’t update

  8. Administrator on March 9th, 2009 12:29 am

    Oh man, it’s been ages since I looked at this. I would have to familiarise myself with the code again. I assume the core library has been updated quite a lot since I wrote this so you might want to get the latest version and try that.

  9. salawank on November 24th, 2009 6:06 am

    Hi there,

    do you provide source code for this?
    I would like to implement network/topology graph and hope to get some ideas from your codes.

    Thanks in advance

  10. Administrator on November 25th, 2009 9:11 pm

    Hi salawank,

    The source code is available by right clicking on the application. The version of Prefuse that I use is totally out of date though. You would be better off going to the Prefuse site and downloading the library with examples.


  11. shammi on July 5th, 2014 5:58 pm

    Hi, can you please help. i am getting this error.

    TypeError: Error #1034: Type Coercion failed: cannot convert Function to flare.data.DataField.
    at flare.data::DataSchema()
    at flare.data.converters::GraphMLConverter/parse()
    at FlareChat()

    when i am using this is flash. on line

    var gmlc:GraphMLConverter = new GraphMLConverter();
    var datar:flare.data.DataSet = gmlc.parse(GRAPHML);

    what an i doing wrong??

  12. admin on July 7th, 2014 11:08 am

    The demos are quite old and only work against a specific version of Prefuse. If you are attempting to run the demo against a more recent version I am afraid I don’t think it will work.