Data visualisation with RaVis in Flex

RaVis (Relational Analysis Components) is part of the BirdEye “a community project to advance the design and development of a comprehensive open source information visualization and visual analytics library for Adobe Flex.”

The RaVis components all you to create interactive data visualisation interfaces for the analysis of relational data sets such as social networks, organisation trees, navigation systems and anything else you can think of.

To create this example I followed an article I beta tested for the Flash&Flex Developer’s Magazine.
Once you get to grips with setting up the project and components it’s really easy, this was my first proper dive into flex and I found it to be quite manageable.

The data for this example and the ones on the project website are loaded in form an xml file and are very basic, for example to make 2 nodes and connect them takes as little as this code:

// the first node
//<node id=”1″ name=”Food” desc=”Stuff you can eat” nodecolor=”0x333333″ nodesize=”50″></node>
// the second node
//<node id=”2″ name=”Dairy Products” desc=”milk and stuff ” nodecolor=”0xFFE76B” nodesize=”15″></node>
// the connection between them
//<edge fromid=”1″ toid=”2″ edgelabel=”is a group of” color=”0x000000″></edge>
More data is revealed as you drill down – double click on the ‘cow’ node.

[flash http://samhassan.co.uk/blog/swfs/ravis/main.swf w=600 h=600 mode=1]

————-
Update

download source (2.4mb zip)

The source contains all the folders for this project – it also includes the libRaVis.swc in the libs folder.
some comments on code

This entry was posted on Tuesday, July 15th, 2008 at 8:32 pm and is filed under Data Visualisation, Flex. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

5 Comments so far

  1. Hi,

    I been wanting to do something like this for a long time, but I somehow can’t seem to get the Ravis example on the birdseye website to work and the link provided in your article (Flash&Flex Developer’s Magazine) doesn’t point me to a tutorial of some sort. Do you still have a direct link to the tutorial or may be a source I can look at from your example? I would be very grateful. I downloaded the Ravis stuff from the repository, but I can’t get it to work properly. I’m in a need of some sort of simple start guide.

    Thanks,
    Tije O

  2. Hi Sam,

    Thank you very much! The Example is working perfectly and in the meanwhile I got the RavisExplorer example on the birdseye website working too! I’m now going to figure out how it works and i’ll send you my application if I finish it.

    Thanks again,
    Tije

  3. Hi Sam

    I am a newbie to flex and Birdeye-Ravis .I am trying to run a RavIS project with Level1.mxml file from http://birdeye.googlecode.com/svn/trunk/ravis/RaVisExamples/src/Level1.mxml

    I imported the libRavis.swc from the RAR file you have attached and I get 2 errors:

    1. Call to a possible undefined method BaseEdgeRenderer
    2. Access of possibly undefined property edgeDrawGraphics through a reference with static type org.un.cava.birdeye.ravis.graphLayout.visual:VisualGraph

    Both errors 1 and 2 refer to line 112 of Level1.mxml which is vgraph.edgeRenderer = new BaseEdgeRenderer(vgraph.edgeDrawGraphics);

    Do you know how to solve this error?

    It would be great if you can please help me out on this!

    And I ran your code.No errors there. And amazing!! I plan to develop a similar graph in which on clicking a node the edges and nodes connected to the clicked node get selected.

    Thank you.

  4. Hi Sam

    I would also like to know how to highlight a node .. and other nodes with edges that are connected to the selected node..?

    Thank you
    Sharada

  5. Hi Sam,
    Is it possible to use ‘nested xml’ as dataprovider for the RaVis Graph? If yes can you please explain how?

Have your say

Fields in bold are required. Email addresses are never published or distributed.

Some HTML code is allowed:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>
URIs must be fully qualified (eg: http://www.domainname.com) and all tags must be properly closed.

Line breaks and paragraphs are automatically converted.

Please keep comments relevant. Off-topic, offensive or inappropriate comments may be edited or removed.