Asterisq Blog

Roamer 1.3 is Out!

daniel — Thu, 15 Jul 2010 12:28:20 -0700

We're releasing a new version of Constellation Roamer which adds some of the most-requested features as well as fixing a bunch of bugs. Here's the low-down.

Label Positioning

Not everyone likes how Constellation Roamer displays its centered node labels so we've added a "label_position" property which allows you to place the label, above, below, or to either side of your graphic.

We reckon a lot of people will turn the label background off and place the label to the right of the node.

<node
  ...
  label_bg_enabled="false"
  label_position="right" />

More Performance = More Nodes

The new version gets a performance boost that came with optimizations to Framework. The old Constellation Roamer was most comfortable displaying 50-75 nodes but version 1.3 easily doubles that number.

That means you can show more information without bogging down your users' CPU.

Tooltip Styling

There are now several configuration options which allow you to customize tooltips. You can change fonts and colors, control character embedding, and set a maximum width for wrapping.

See the full list of customizable visualization options for more info.

More Javascript Hooks

Roamer 1.3 adds the ability to dynamically set the "passthru" variable which is fed back to the server via the data URL. You can use this feature to dynamically change the dataset being visualized without having to reload the page.

There are also new methods for getting and setting the tree depth. This will give you finer control over how much information to display in one screen. For example, if you know the selected node has heaps of neighbors you might reduce the tree depth. Alternately, you can put the user in control and provide a way to adjust the depth themselves.

Finally, we've added a zoomToFit method which adjusts the zoom scale and centers the visualization on the screen.

var roamer = swfobject.getElementById(
  'constellation_roamer');
 
// you can send any string to the backend
roamer.setPassthru('data.php?dataset=4');
 
// increment the displayed tree depth
var depth = roamer.getTreeDepth();
roamer.setTreeDepth(depth + 1);
 
// fit the visualization to the screen
roamer.zoomToFit();

Bug Fixes

We squashed a few bugs in this release, too.

Tweaked the physics to reduce oscillations.
Arrowheads now align to the edge correctly when the "selected_graphic_radius" node proerty is set.
Added support for Danish characters.
Fixed zooming issue.
Corrected pixel-shifting problem with node images.

If you spot any bugs in the new version or if you're interested in seeing some new functionality, please contact us. Most of these changes were made because of your feedback!

Getting a Hold of 1.3

If you're already a Roamer customer, just download the updated SWF file and it will work with your current license. Swap and go.

For everyone else, we're also releasing a free (as in beer) version of Constellation Roamer so if you're keen to take the new version for a spin, you can download it here.

Download Constellation Roamer for free

Embed Mentionmap in Your Website!

daniel — Thu, 08 Jul 2010 00:33:47 -0700

Our Twitter network explorer, Mentionmap, has already been included in your.FlowingData and more recently, in Twitalyzer. Now, you can embed this snazzy little visualization in your website!

Just visit Mentionmap and click the "Embed" button in the lower left corner of the app. Paste the given HTML code into your blog or webpage and you're set.

Note that you can start the visualization with any user you like. The embed code is prefilled with the username of the person you last visited when you clicked the "Embed" button.

Happy embedding!

Check out Mentionmap on Twitalyzer.

New Projects by Asterisq

daniel — Thu, 01 Jul 2010 15:15:02 -0700

Things have been quiet on the blog but we're still kicking! In fact, Asterisq has been busier than ever. Below are screenshots from just a few of the projects we've pushed out over the past six months.

Our new work includes some exciting research & development into graph visualization UIs, the usual Constellation Roamer customizations, and web applications for big-name companies that (sadly) won't let us post their names.

A few ideas we've implemented in recent projects:

Edge paging (previous/next) controls. This comes in handy when a node has too many neighbors to display on the screen at once. It shows the important relationships first but you can always dig deeper by clicking "next."
Exploding edges. When two nodes are connected to each other in more than one way, you can zoom in on the details about all the relationships.
Node and edge filtering UIs. Filtering is powerful but a poorly-designed interface will just confuse. We've produced a graph visualization with intuitive filter controls for narrowing down on the relevant data.
Hierarchies with crosslinks. These interfaces are great for viewing the relationships between nodes in a hierarchy. For example, it can be useful to view company communication patterns in the context of the hierarchy of executives, directors, managers, and employees.
Editing capabilities. We've hooked in with both Drupal and WordPress to take care of the content management side. Then, we put a slick graph editing UI right in the visualization.

There have been other exciting developments lately, too. We caught some of the HTML 5 hype and started experimenting with its capabilities for displaying graphs. We're also working on smarter visualizations which use business intelligence algorithms. More to come!

Constellation Framework 0.3 Released!

daniel — Tue, 08 Dec 2009 23:48:01 -0800

Rolling out the latest version of Constellation Framework today with a lot of improvements! Probably the biggest benefit is the huge performance improvement but a lot of features have been added to the API as well.

40% Faster

The CPU load of the physics engine is the big limiting factor in animated graph visualizations. That's why we spent so much time optimizing and testing to get as much speed out of the Flash Player as possible.

Previous versions of Constellation Framework would start to choke when displaying over 50 nodes on the screen. Approach 100 nodes and the user experience was severely compromised.

With the performance optimizations you can animate 300 nodes with full physics quite comfortably. And larger datasets can still be displayed by precalculating layouts or using simpler layout algorithms.

Here's an example of a sparse graph with 300 nodes.

Performance demo: 300 nodes

New Layout Behaviors

Even more layouts are possible by combining the effects of different behaviors. Existing classes have been optimized and several new ones have been added. That includes several "layout behaviors" which move nodes to calculated positions instead of using the force-directed physics engine.

The new layout behaviors can place nodes in horizontal or vertical trees, or tightly-packed spirals.

For additional flexibility, the behaviors can be applied to subsets of nodes. That means you can combine a spring layout with a static layout.

In the example below, force-directed spring behaviors are used alongside three tree layout behaviors. The trees are rooted at the three dark purple nodes.

Spring + Tree Layout Demo

Graph Views

Some visualizations display the data exactly as received but in many instances it needs to be filtered. The graph view classes provide several ways of filtering graph data.

They make it easier to do things like:

Display a tree rooted at a particular node.
Run custom node and edge filters.
Display particular nodes and the shortest paths between those nodes.

You just feed the incoming graph data into the the view's model property and it will calculate the resulting graph for you. When the model changes, the graph view class will make sure it stays up-to-date.

Finally, the new ChainedGraphView class allows you to combine the filters in series.

More Features

The latest version of Constellation Framework also includes an updated physics engine, new graph loading and parsing classes, and XML instantiation and initialization methods.

We hope you're just as excited about the future of Framework as we are. The new version makes a lot of common visualizations much easier to build, and adds some exciting possibilities!

Happy coding!

GovHack Best of Show Features Constellation Roamer

daniel — Wed, 11 Nov 2009 15:55:42 -0800

Last weekend, Canberra hosted a government data hack day where some 150 geeks made use of Australian federal and state data to create public mashups. The winners of the Best of Show award used Constellation Roamer as part of their LobbyClue application.

Team members @zephell, @frglps, @DorisSpiel, @mjec, and @maxious had only thirty-six hours to build the impressive app which features tag clouds, geographic maps, and a graph visualization. They took advantage of Roamer's quick setup and customization to display the relationships between lobbyists, organizations, and post codes.

I think the movement toward open government data is an important one and it's great to be able to contribute to it. Releasing government data is only one step—you have to make it accessible and digestible to the public before it's really useful and data visualization is a great way to do that.

View the entry website

More Info

Vocalocity Launches Phone Network Design Tool

daniel — Wed, 28 Oct 2009 16:47:36 -0700

Asterisq worked with interactive internet marketing agency, NeboWeb, to create a simple online tool for designing a phone system. The interface was launched as part of Vocalocity's website redesign—it's perfect for engaging their users with a fun, friendly little app.

With the help of Constellation Framework, visitors can instantly see the phone system they designed. Taking the interactivity even further, users can add and remove new locations and phone extensions, and can even take a screenshot to be printed out.

As the user makes changes to the number of extensions and features, the monthly price estimate is updated dynamically.

This particular custom implementation includes a few features that haven't been used before. One of these is an automatic zooming functionality. When locations and extensions are added so that the layout is too big for the screen, it automatically zooms out. If nodes are removed, it zooms in again.

Another new feature is the graph editing functionality. Most visualizations have been a relatively passive exploration of an existing dataset. However, the Vocalocity project provides an interface for quickly adding and removing nodes.

Finally, there's the functionality that's only doing its job if you don't notice it. Great care was taken to make sure the layout looks good as the user adds and removes nodes.

The interface can be seen on the Vocalocity website, you just need to make up numbers for a couple of questions.

Try the phone network designer.

Explore Your Twitter Network with Mentionmap

daniel — Wed, 14 Oct 2009 10:57:49 -0700

Asterisq just released Mentionmap, an exciting web app for exploring your Twitter network. Discover which people interact the most and what they're talking about. It's also a great way to find relevant people to follow.

The visualization runs right in your browser and displays data from the Twitter API. Click the screenshot above to launch the visualization in your browser.

Give Mentionmap a whirl

How Does Mentionmap Work?

Mentionmap loads each user's Twitter status updates (tweets) and finds the people and hashtags they talked about the most. The data is displayed using Constellation Framework, a graph visualization library for Actionscript.

In this data visualization, mentions become connections and discussions between multiple users emerge as clusters.

Clicking a user will display their network of mentions as well as details from their profile. You can also search for friends by typing their Twitter usernames into the search box.

The Visualization

This graph visualization uses custom node renderers which display profile images, usernames, and hashtags. The appearance of each node changes depending on its distance from the select user or hashtag. Also, both nodes and edges have mouse over effects which can be used to emphasize subnetworks.

The lines drawn between nodes become thicker if the users talked about each other more often. This draws the viewer's attention to big discussions. Hovering over an edge also reveals the exact number of mentions.

Twitter API Integration

Mentionmap makes the most of limited access to information: Twitter allows no more than 150 requests to their server every hour. Graph visualizations can be data hungry but with careful caching and smart use of the API you can see a lot without breaking the request limit.

Even better, a bar chart shows how many calls you have left so users can explore wisely.

The data from Twitter doesn't come all at once and the visualization reflects that. As soon as new information is loaded, nodes and edges will appear and the layout will shift to accommodate them.

The Twitter server can be temperamental at times—and with good reason—so multiple fail cases are handled. Whether Twitter responds with an "over capacity" message, "server unavailable" error, or simply doesn't respond at all, the user is given appropriate feedback so they know what's going on.

Other Features

The Mentionmap interface has several features that have been used in previous graph visualization projects including dragging the canvas to pan, zooming controls, auto-centering, and search. Users can retrace their steps using the history bar which sports a careful animation without being too distracting.

One new feature is support for the browser's back button. Clicking the back and forward buttons in your browser will update the visualization.

With the browser back button functionality also comes the ability to link directly to a particular node. The current node is stored right in the URL so you can copy the link and send it to a friend. After they login they'll be taken directly to that node.

Feedback and Thanks

If you have any feedback, suggestions, or comments, don't hesitate to contact Asterisq or leave me a tweet at @danielgm.

Thanks to missjenny.com for help with the design and thanks to the folks at Twitter for making their API publicly available!

Launch Mentionmap

Website Updates, Graph Parsing Tutorials

daniel — Thu, 01 Oct 2009 10:12:15 -0700

A couple new tutorials on graph parsing have just been posted over at Framework documentation. These tutorials teach you to parse data loaded from an external file into the graph data structure. If you're working with unique data format, there's also a tutorial for implementing a custom graph parser class.

Also, the Constellation Roamer section of the website now has a FAQ! There are only four questions in there but these are the most common hiccups experienced by people getting started with Roamer. One of the entries addresses a tricky problem with REST tree edge IDs. Have a look!

Enterprise-Class Use Cases Enabled by Constellation

daniel — Mon, 21 Sep 2009 16:50:03 -0700

I'm excited to announce that LinkWex Inc. has purchased a license for the Constellation Framework full source code to enable high impact business solutions for Silicon Valley's large enterprise giants! They were searching for a web-based graphviz framework that supported their feature requirements and had the flexibility to handle all their use cases.

Over the past few weeks, Asterisq implemented a number of demos which show off the capabilities of the Constellation Framework. These apps read sample data provided by LinkWex and demonstrate different ways of interacting with it in a graph visualization. Here's a look at some of the features in the demos.

Finding What is Common Between Two Defects

One of the demos involved visualizing customer support data for a set of products and software to enable support personnel to deliver enhanced service. The Constellation framework visualized complex scenarios of vast amounts of service interaction data with an ability to traverse and identify common paths within the data.

The demo also features custom node and edge renderers. The node renderer has the ability to display a different icon based on the context along with a checkbox to show or hide the node's immediate neighbors. The edge renderers can be customized to display the characteristics of the relationship.

Filtering Controls

Another demo makes use of a few node filters to show the user exactly what they're looking for. The filters are divided between two panels: one controls general graph filters and the other filters nodes based on specific attributes.

The general graph filters include a tree filter—only nodes within a certain distance from the selected node are displayed. This is just like the behavior of Constellation Roamer.

There are also filters which limit the total number of nodes and the number of neighbors allowed for each node. These limits and the tree depth can all be adjusted using sliders and the visualization is updated immediately.

The attribute filter automatically finds all values for the filtered node attribute and displays a checkbox for each one. By checking or unchecking the box, users can show or hide all nodes with that value.

The number of nodes that have the given attribute value is also displayed in each row. This gives you some idea of how many nodes will be affected when adjusting the filters.

Context Map

The folks at LinkWex, along with some of their customers, wanted an overview of the graph visualization, much like the navigator panel in Photoshop. This control displays the entire visualization canvas and highlights the currently visible area. The user can click or drag the map to shift to other areas of the image.

Parsing and Loading Progress Bars

One of the datasets used in the demos has nearly 20,000 nodes! While loading text data is still fairly fast, parsing it all can take several seconds. An asynchronous parser was used so the user's machine doesn't freeze up while Flash processes the data.

A pair of progress bars makes the wait easier to bear.

Versatile Runtime Configuration

Yet another demo features an XML configuration file, which indicates which classes should be used for graph loading, graph parsing, node and edge rendering, and layout. The Flash movie is compiled with several possible classes and the configuration decides which class to use. You can even set the values of initialization variables.

In the screenshot above, the MultiURLGraphLoader class is being used to load data from two tab-separated text files containing customer data. The data is parsed using CustomerGraphParser which is setup to treat the "theater" and "region" properties as nodes.

The class names and initial values can be updated without the need to recompile, making the resulting app extremely portable.

Choosing Constellation Framework

It's been very exciting working on this project because the folks at LinkWex have really tested the capabilities of Framework and expanded its feature set. Knowing that the Constellation platform will be used by LinkWex's Maestro solution to enable innovative solutions and opportunities with enterprise clients is very exciting! A lot of work has gone into Constellation and LinkWex's choice to deploy in enterprises speaks to the quality and scalability of the product. Constellation is a nice complement to Maestro. Maestro brings data from disparate sources together and Constellation provides a visual representation and interconnections inherent in the data.

Framework Tutorial Updates

daniel — Thu, 17 Sep 2009 00:30:08 -0700

The Constellation Framework tutorials have been updated for the soon-to-be-released version 0.3. There are some minor changes for implementing node renderers and edge renderers in the new version. Framework now takes care of more of the dirty work and there's also a significant performance improvement.

There's also a new tutorial on implementing a custom edge renderer in Flex. This was long overdue and there are more guides on the way.

Optimice Launches Professional Network Visualization

daniel — Sat, 12 Sep 2009 10:55:49 -0700

Australian professional networking company, Optimice, has just launched a new website featuring a visualization based on Constellation Framework. This customization reads data from a special format and displays it in a unique interface built by Asterisq.

The "Thinkmap-Style" Interface

The interface itself features zooming and filtering options for refining and navigating the dataset. Clicking the checkboxes updates the visualization immediately.

When users join the network, they rank the topics that matter to them. Highly-ranked topics are connected using shorter, thicker lines. Taking it one step further, edges connecting people to topics that aren't so important to them are more curved. This reduces the visual association between the nodes and creates a more organic aesthetic.

The nodes themselves are colored according to type and topics that have more high-priority connections are displayed using larger circles. Also, hovering over a node emphasizes its label for better legibility.

The Social Network Data

Optimice's application is used to display the people in their network and their top five areas of interest. The data is transmitted in the "VNA" format used by the Netdraw Network Visualization App.

To speed up the user experience for displaying a large network, data is only loaded as it is needed. The screenshot shows an example of the VNA format.

Check out the live Optimice Network Visualization.

Editable Graph Visualization for CSIS

daniel — Mon, 31 Aug 2009 13:07:01 -0700

Asterisq recently completed a Drupal-backed graph visualization project for the Center for Strategic and International Studies (CSIS). They came to us looking for an interface which encouraged users to explore their dataset of people, organizations, and political events related to Lebanon. Besides the intriguing data, the project was also interesting because of some special requirements.

Content Managed Graph Data

The CSIS needed a content editor which made it easy to add and remove nodes and connections in the visualization. Further, each node was associated with a hierarchical category, images, and descriptive text which could contain links to other nodes. In the interest of rapid development and keeping the budget down, the powerful open source CMS, Drupal, was used.

An autocomplete form makes it easy to create edges or links between nodes in the graph visualization.

Drupal had to be customized with a "bilateral node reference" module that turned one-way node links into two-way connections. That way, when a user adds a reference from node A to node B, it's visible on both nodes. This means less work for the user and no duplicate connections in the dataset.

The result was a friendly UI for entering and maintaining the data used in the visualization.

Presenting from a CD

CSIS also decided they needed to be able to present the visualization offline using a CD. We used Server2Go to start a web server which would run off the disc and load up either the Drupal content editor or the visualization itself, depending on the configuration. It's a great piece of donation ware which works with MySQL, Apache, and PHP. This feature would have been a lot of work without it!

The Graph Navigation Interface

The interface itself was quite powerful and had a lot of features:

Full text searching built on Drupal's search module. Clicking the search result takes you to the node.
Textual description that displays basic HTML and has links that jump to other nodes in the graph.
A list of thumbnails and a full-size image in the sidebar.
History functionality, including a shifting animation which makes navigation less disorienting.

The graph visualization was only required to show the selected node and its neighbors. However, often there would be too many of them to put in a simple ring so instead, a sunflower-inspired packing algorithm was used. The resulting layout makes good use of the space and gives the visualization an organic appearance.

Happy Clients

This was a big project with a few twists but Asterisq was able to keep up with the feedback and requirements. We're proud to say that the folks at CSIS were very pleased with the result and were excited to have an interface which was "better than we had imagined."

Yahoo! Uses Roamer for Research

daniel — Wed, 26 Aug 2009 11:24:22 -0700

Research scientist Siddharth Suri has been conducting online experiments for the Human & Social Dynamics group at Yahoo! Research. He's using Amazon's Mechanical Turk service and Roamer to gain insight into human behavior.

The experiment is called "the Investment Game" and it explores how friends can affect a person's behaviors. You can find out more about it on the Investment Game project page.

Constellation Roamer has quite a bit of flexibility in terms of customization so it fits the needs of the experiment out-of-the-box. This is just another example of the diverse and interesting ways in which graph visualization interfaces can be used.

Adobe Prototypes a Constellation Interface for Exploring Ideas

daniel — Wed, 19 Aug 2009 11:19:05 -0700

BrightIdea has been working with Adobe to manage their innovation. Now a prototype graph visualization built by Asterisq is being featured on their online "WebStorm" for Acrobat, found at http://ideas.acrobat.com.

Collecting and Visualizing Ideas

BrightIdea's WebStorm platform is a content management system for ideas. Employees submit their ideas to company-hosted campaigns and vote on each other's submissions. They also have an API which allows developers to grab the data and take it further.

That's where Asterisq comes in. Constellation Framework was used to build a custom graph visualization for BrightIdea and Adobe. The interface allows users to explore submissions and their tag relationships in an engaging manner.

The GraphViz Interface

The custom visualization explores the tag space using a behavior similar to Roamer. Clicking a node shows its neighborhood and the nodes are arranged using a force-directed layout.

Asterisq implemented a mouse hovering zoom behavior which makes it easy to view the full idea title while still maintaining the context of the visualization. Double-clicking takes you to the idea's URL.

There's also a popout sidebar which gives additional information about the selected node. It also contains an autocomplete tag search and history functionality.

This is only a prototype so the UI isn't polished and there are features we feel are missing, such as the ability to quickly vote on ideas and dynamically-loaded data to improve start up time. Still, it's very exciting to have Constellation put to good use by a company like Adobe!

Check out the Acrobat.com Ideas Visualization.

Custom GraphViz at Reach. Grow. Thrive.

daniel — Thu, 30 Jul 2009 09:06:13 -0700

Reach. Grow. Thrive. just launched a series of maps using a customization of Constellation Roamer. Check out the visualizations live!

These visualizations feature a black background which was setup entirely using Constellation Roamer's configuration parameters. It gives quite a different effect compared to the typical white background interfaces.

The only visual customization for this project was the addition of a dynamically-loaded icon to the left of each label. The project also includes a Javascript method to dynamically set the tree depth. This is used subtly to extend the hierarchy of nodes depending on which node is selected.

See the live visualization.

AdMob Showcases Services Using Framework GraphViz

daniel — Mon, 22 Jun 2009 23:29:26 -0700

The mobile advertising company, AdMob, has picked up a license of Constellation Framework for showing off their products.

This custom visualization features a tree navigation specially suited to AdMob's data. The selected node appears at center, its children in a ring around it, and their children on the next ring and so on. Clicking a node centers it and rearranges all the children.

During the recentering animation, the nodes move in such a way as to eliminate confusing and disorient crossovers or unnecessary movement. In addition to the custom layout, AdMob also uses half a dozen different node renderers which display both images and text. Some nodes even expand to reveal additional information when selected.

The app also includes a bar chart for displaying the most popular mobile devices and a stylized world map showing hits in real time!

New Roamer GraphViz at Fuzzzy and Health Analysis

daniel — Tue, 09 Jun 2009 10:09:46 -0700

New Roamer graph visualizations have gone up on a couple of websites. Both implementations take advantage of Roamer's customization properties to make the interface blend in with their website.

Fuzzzy's Semantic Web Visualization

Fuzzzy is a social networking / social bookmarking website which helps users discover relevant web-related knowledge. Roamer is being used to display topic maps and the relationships between each topic. It provides a perfect interface for exploring the various categories of information available on Fuzzzy.

Project Explorer at Health Analysis

Health Analysis provides consulting for the UK's National Health Service, among other things. Here, Roamer lets users browse the different types projects completed by this firm.

Government of Canada Chooses Constellation

daniel — Mon, 08 Jun 2009 10:41:41 -0700

I'm super excited to announce that Natural Resources Canada is using Constellation Framework to create their custom graph visualizations.

After evaluating a few options they decided to go with Asterisq's powerful graph visualization library. It's a great feeling to have created a software product that my government can put to good use.

I've seen some amazing GIS / web-based mapping work from NRCan in the past and I can't wait to see what they build with Framework!

Ultimate Movie Site Using Framework for Facebook

daniel — Fri, 15 May 2009 12:47:15 -0700

Movie and Actor Visualization

Ultimate Movie Site has launched their new website, a one-stop resource for everything movies. Constellation Framework is used to explore the relationships between films and actors. All the integration and customization was done by the folks at Ultimate Movie Site so check out their excellent work.

Gotta love how it starts you off with Kevin Bacon. (what?)

Check out the The Movie Degrees GraphViz.

Graph Viz Facebook App

They also simultaneously released a Facebook application, Movie Degrees, which is used to explore your friends' favorite movies.

Each users' movie list is loaded from Ultimate Movie Site if available, or parsed from Facebook's "info" tab. Once you've chosen your top ten, you can click around and find out which movies your friends like.

Customizations to this application were done by Asterisq and more updates are on the way.

Try the The Movie Degrees Facebook App.

Custom Node Renderer Gallery

daniel — Fri, 08 May 2009 10:01:45 -0700

Constellation Framework gives you complete control over the look and feel of your graph visualization. The display of nodes and edges is very flexible as you'll see in the following examples.

Creating a 3D Effect

The above example uses basic text to represent each node but adds color and a drop shadow for effect. Translucent grey edge renderers fade out in thin wedges to enhance the feeling of depth in this pseudo-3D graph visualization.

Mix and Match Renderer Styles

Multiple styles can be used in a single graph visualization. This image shows a simple node with text in a rectangle, another node with a stylized label with additional descriptive text below, and finally, a label combined with an image.

Expandable Node Renderers

The node highlighted above shows a text label and an image (blur and fade for emphasis). When the node is clicked, however, it expands to show a larger image and some additional descriptive text.

Label, Image, and Description Node Renderer

Interact With the Data

The screenshot above shows a custom node renderer that displays a plus sign when it has neighbours that aren't being displayed. Clicking on the node expands the view to show its neighbors and the plus changes to a minus.

Clicking again will withdraw the neighboring nodes from the visualization.

Customize!

As you can see, there are a lot of possibilities for customizing the nodes and edges in your graph visualization. To see how it's done, check out the tutorial on Custom Node Renderers.