A Flex component for graph visualization
I’d like to introduce a Adobe Flex component I’ve been working on. The component displays a graph of objects that are linked to each other, using a force-directed layout algorithm. My SpringGraph page presents some examples, the documentation, and a download. Go take a look.
This component is the result of an ongoing experiment in exploring the information of the internet as a set of interconnected data. This is not the same as web browsing, which focuses on websites and pages of data. This is web “roaming” - exploring data by the connections from one piece of information to another. This is exemplified by the Amazon roamer, with which you can roam the Amazon product database by following the “similar products” links between products. When you play with it a little bit, you’ll notice how the data groups itself into clusters, and how sometimes only a few links can take you to a very different product area.
There are actually 2 Flex components in the download. SpringGraph is the main component - you give it a graph of items and links, and specify the Flex UI for displaying each item. The graph can be given as XML, or built from the Graph class. The UI can range from as a single MXML tag, all the way to a complex component. The component follows the dataProvider/itemRenderer pattern seen in other Flex components such as DataGrid or List, with one difference - the dataProvider is a graph rather than an array.
The other component is called Roamer. It is a subclass of SpringGraph, and adds the abilty to filter the view to a small neighborhood around the ‘current’ item. This makes it possible to load in a huge graph and then view it a little bit at a time. The Roamer Demo shows a couple of examples, one with 12,000 items and one with 26,000.
This component is also available for download from the . Thanks to everyone who has already downloaded it, I hope it’s working OK for you. I’ve made several updates to the component, so make sure you have the latest version. And special thanks to the 5 generous people who gave SpringGraph a 5/5 rating!
November 17th, 2006 at 5:23 pm
It’s really impressive, Maybe Orkut could use it in their network to map all members assosiated.
Here in Brazil it could have a good uses.
November 19th, 2006 at 6:40 pm
Awesome job Mark,
I have uses for this one immediately.
I’m sure this will become one of the more highly distributed flex 2 components
thanks.
November 19th, 2006 at 9:37 pm
Bjorn, let me know how it goes, if you find any bugs I’ll try to fix them. If you publish anything online, send me the URL - I’d love to collect links to work created using SpringGraph and/or other data visualizations.
November 20th, 2006 at 12:25 am
[…] El POC muestra una pequeña aplicación donde podemos ver una distribución de usuarios en forma de Tabla (DataGrid) y Gráfico (El componente Spring Graph de Mark Shepherd). La aplicación muestra los tres puntos principales de discusión en mi charla: […]
November 20th, 2006 at 5:50 pm
Hi Mark,
Great work, I will use this in the near future. Have you had any thought on providing more editing features or an editor?
I created a path editor in Flash some time ago and have been re-writing in Flex recently which I see as a potential editor.
Here is a link to the flash version to give you some ideas.
November 22nd, 2006 at 6:25 am
this is great, but I’m having a problem - as soon as I add the SpringGraph.swc to the build library path, I get the following problem - unable to resolve a class for resourcebundle: styles
I’m using Flex 2.0 plug-in with Eclipse 3.2 - am I missing something?
November 22nd, 2006 at 10:27 am
Mark, outstanding work. I am working on a project right now that can use this sort of layout for the UI, but i haven’t had the time in the last week to build it. Thanks for the work! I am having the same problem as Fred (previous post). Can’t seem to find the reason, however. What are we doing wrong?
November 22nd, 2006 at 1:54 pm
Thanks for the feedback, everyone. I posted version 20061119 of springgraph.zip that I hope fixes the resourcebundle problem. Download the latest version. That version also introduces a new ‘autofit’ mode and some other features. I will update the online docs and post a blog entry as soon as I have the time. You can see the new autoFit mode in the RoamerDemo app.
November 24th, 2006 at 2:54 am
DEAR
I WANT TO KNOW ABOUT HOW CAN I LEARN FLEX FROM TUTORIAL FOR THAT PLS TELL ME BETS FLEX TUTUROAIL SITES
I ALSO HAVE SOME PROBLEM THAT FLASH MOVIE . HOW CAN I CONTROL FLASH MOVIE WITH HTML AND FLASH GRAPH BY HTML OR OTHER LANGUAGE
November 24th, 2006 at 8:12 am
Mark, thanks for the update. The new version fixed the problem. Customizing the code now to use in my project. I do a great deal of work with network scientists here at Indiana University, so this will be a very nice tool for simple visualizations. Thanks!
November 25th, 2006 at 9:24 am
NITIN - to learn more about Flex, try Adobe’s . The Quick Start section has various tutorials, and there are many other articles and resources. To learn more about controlling Flex apps from HTML, you can look at the articles on Flex + Ajax. Here are some other flex-related websites: , the , www.madeinflex.com, and the Flex news aggregator.
November 25th, 2006 at 9:34 am
cb - I’m very interested in seeing what you create using SpringGraph/Roamer. If you put anything online, please send me a link and I’ll post it here.
November 25th, 2006 at 1:27 pm
Thanks, Mark, it works now! We’re doing a lot with ontologies and semantic web stuff - this will be a great visual UI!
November 29th, 2006 at 5:56 am
what i’m working on won’t be ready for public consumption just yet, but should be available the first of January. I’ll keep you posted.
December 1st, 2006 at 9:05 am
Mark
This looks great. We are building a knowledge networking web application and are considering flex. I would appreciate discussing springgraph and whether we need to extend or rebuild things to suit our needs. Would you be available to discuss either by email or face-to-face if you are in the Silicon Valley area?
Regards,
Keith
December 11th, 2006 at 4:51 pm
Beautiful stuff man. I’m sure I will find some uses for it in the near future.
December 14th, 2006 at 9:21 am
Is it possible or are there plans in the works to allow the user to specify the layout algorithm. We are looking for a Hierarchical Algorithm
December 19th, 2006 at 3:06 pm
[…] Crear un proyecto Flex en Flex Builder y copiar el contenido de la carpeta “UserSoap” en dicho proyecto. (Nota: Para compilar este proyecto es necesario el componente Spring Graph de Mark Shepherd. Puedes añadir el SWC a este proyecto para compilarlo. […]
December 27th, 2006 at 6:23 am
Mark,
Great component. Like the way that it works and opens a number of interesting opportunities for visualizations that are difficult or impossible elsewhere.
One question, maybe this is more a questions with flex than your component. I run your demo, ad 50+ nodes, do no further linking and it takes up between 25% and 50% of my CPU. Am I doing something wrong or is this just the redraw and floating effect. We have this issue with another image component that we cycle an effect on. Are there ways to optimize these to reduce processor overhead?
January 8th, 2007 at 8:15 am
Wonderful component. Thanks.
Couple of questions though - firstly, when I use it, the inital graph comes in from the top-left of the screen and moves into the centre as it gets auto-laid-out. Is there any way I can force it to begin centred and lay out from there ?
Also, if I have the background color of the ‘nodes’ associated with a function which calculates the required color based on some node attribute, how can I force the graph to refresh the colours when I know I’ve altered them in the XML ? I tried romer.refresh() but that doesn’t work for me - any ideas ?
Thanks,
Jamie.
March 29th, 2007 at 3:58 pm
Hi Mark,
The limits are endless with this SpringGraph component. I made a Music Roamer using xml feeds from Last.FM
http://www.ccs.neu.edu/home/cash21/bin/MusicRoamer.html
Thanks and keep up the great work!
March 31st, 2007 at 7:06 am
Hi Tanya,
This is an exellent program. Could you post your code. thanks
April 24th, 2007 at 4:11 am
Is there a way to draw a link like an arrow ?
May 10th, 2007 at 4:12 am
I’ve got another question : Is there any way to link items to each other several times ?
May 28th, 2007 at 2:03 am
Hello Mark, It is very impressive graphs which can be customized easily. I have few questions. 1. Can We have multiple links between two nodes with different colors ? ( Instead of having one straight line, there will be a curbe ).
2. Way of making it directed graph
3. Any examples/insights to develop the editing of those network graphs?