7

Can someone recommend a library or code to visualize bipartite graphs in C#?

Graph# seems not to support this kind of graph directly (but has some support to disentangle vertices).

I want to create some graphic like this bipartite graph with some text in the nodes. Nodes being same width and height would be ideal.

A WPF control would be perfect, as it exists for graph#. Perhaps even a XAML definition exists? As an alternativ: a report window can also be very good.

Probably someone with more experience in Graph# can provide hints on how to do this utilizing Graph#.

Tried around a bit with NodeXL but that seems not to be the perfect solution, as the nodes seems not be that much modifiable. Perhaps someone can provide a better solution. Have played with the NetworkView provided by Soroush. At the moment this comes closest to what I want.

-update- Tried out NetworkView shared by Soroush Falahati. This seems to be a good base, but is not yet that flexible as I need it. I have problems to believe that there is no library out there that can do those things out of the box. (NetworkView has the excellent feature to set connections / edges in the control which gives it an extra boost over the NodeXL). Perhaps Graph# can do even more, but at the moment I just have tried those two.

Mare Infinitus
  • 8,024
  • 8
  • 64
  • 113
  • There is none I think (wpf control). It seems you need to write it yourself. :) – Soroush Falahati Feb 01 '13 at 18:42
  • As there is none that I could find either, I asked here. Writing it myself is possible, but it is just a little eye candy in a current project, I do not want to spend too much time with. If it exists, I will use it, if not, I will write one later (in about three to four months I think I can find the time) – Mare Infinitus Feb 01 '13 at 18:45
  • Maybe some of this things help you: http://www.codeproject.com/Articles/23871/WPF-Diagram-Designer-Part-3 or http://www.nwoods.com/components/silverlight-wpf/goxam-overview.htm or http://www.mindscapehq.com/products/wpfdiagrams or http://www.mindfusion.eu/wpfdiagram.html or http://www.codeproject.com/Articles/182683/NetworkView-A-WPF-custom-control-for-visualizing-a actually none of them created for this propose but they may help you. – Soroush Falahati Feb 01 '13 at 18:50
  • Seems to be helpful when I start writing it on my own. Thank you! – Mare Infinitus Feb 01 '13 at 19:22
  • @Soroush Falahati: As your comment is right now most helpful, please provide it as an answer. – Mare Infinitus Feb 03 '13 at 16:55
  • I will post it but first see if @edallme can help you better or not. :) – Soroush Falahati Feb 03 '13 at 19:17
  • @SoroushFalahati Please undelete your answer. At the moment NetworkView is what comes closest to what I want. I believe that I will use it as a base when I have to implement it myself. – Mare Infinitus Feb 04 '13 at 22:42
  • Actually one of moderators deleted it because it has nothing more than link to other places. So forget it, I cant undelete it. :) – Soroush Falahati Feb 05 '13 at 00:11
  • As it is still the most valuable answer, I really would like to reward the bounty to you. Perhaps you can provide another answer. NodeXL is still in, but I believe it is much harder to get something working with it than with NetworkView. – Mare Infinitus Feb 05 '13 at 11:05
  • @Mare Infinitus, what do you mean by NetworkView's ability to "set connections / edges in the control"? – edallme Feb 05 '13 at 20:50
  • The user has the possibility to drag from one node to another to create an edge. This is really funny. – Mare Infinitus Feb 05 '13 at 20:54

6 Answers6

2

Actually if you could use client side jquery .. iwoul strongly recommend jqPlumbs.. http://www.jsplumb.org/jquery/demo.html

Mortalus
  • 10,574
  • 11
  • 67
  • 117
2

You can approximate your bipartite graph visualization in NodeXL, and even improve on it by removing edge crossings. I took your sample bipartite graph, and in the image below I colored the nodes by their side (u or v). They are laid out using the Sugiyama algorithm that minimizes edge crossings. I did this in the interactive NodeXL template for Excel 2007--2013, but all these features should be available as the standalone NodeXL C# and WPF class libraries. The current libraries as of this post are available to download here.

Bipartite graph in NodeXL Sugiyama layout

I also tried NodeXL's group-in-a-box layout to separate the groups and display them each individually in a grid, with marginal results.

NodeXL bipartite graph

Disclaimer: I'm an advisor for the NodeXL project.

edallme
  • 949
  • 5
  • 8
  • This one is really good! Have to take a closer look! Thank you very much! Btw: Is it possible to put some text into the nodes? Or at least next to the nodes? – Mare Infinitus Feb 03 '13 at 17:49
  • Absolutely! You can do it manually by typing in the correct cells or there is a feature called Autofill Columns where you can create a label from any other data column you have in the table. – edallme Feb 03 '13 at 17:52
  • I'm pretty sure it is. If you have trouble getting it to work or finding the right part of the code to use, post a message on the [NodeXL discussion page](https://nodexl.codeplex.com/discussions) and the main developer will help you out. – edallme Feb 03 '13 at 18:09
  • Found the NodeXLControl which seems to be a good match to what I want. But are there no demo projects to see how it works? – Mare Infinitus Feb 03 '13 at 18:52
  • The only demo project for the NodeXLControl is the "NodeXL Excel Template," which shows a graph within the Excel window. If you don't have Excel or don't want to bother installing the NodeXL Excel Template, it's pretty easy to download the NodeXL Class Libraries and try the NodeXLControl in your own application. For instructions on how to do that, go to the [NodeXL Downloads page](http://nodexl.codeplex.com/releases) and look for the latest "NodeXL Class Libraries" release under "Other Downloads." – edallme Feb 04 '13 at 05:33
  • When you use the NodeXLControl to embed a graph in your WPF or Windows Forms application, you can create what's called a "label shape", which is a box with text inside. You can also create other shapes, such as disks, squares, and diamonds, and place a "label annotation" next to the shape. – edallme Feb 04 '13 at 05:33
  • Have those class libraries, but it is not that easy to get results when there is no demo and the documentation does not work. (always get "You seem to have no internet connection" in the chm part). Perhaps there is better documentation, but the chm is not very good. – Mare Infinitus Feb 04 '13 at 22:46
  • You may see nothing but empty topics when you attempt to view the NodeXLApi.chm file. To fix this problem, which is due to a security restriction in Internet Explorer, right-click the chm file in Windows Explorer, select Properties, and click the Unblock button on the General tab. – edallme Feb 05 '13 at 16:31
  • Seems to be a different problem, as I do not have a "Unblock" button even with a explorer in administrator mode. Maybe something for SuperUser ;) – Mare Infinitus Feb 05 '13 at 17:36
  • Figured out the problem: It was because I placed it in a folder containing the "#" character in it (actually C#)... – Mare Infinitus Feb 05 '13 at 17:41
  • Wow, weird bug. I'll pass that on. – edallme Feb 05 '13 at 20:47
  • It is for sure. found it in this link here http://blogs.msdn.com/neerajag/archive/2006/04/26/584144.aspx – Mare Infinitus Feb 05 '13 at 20:52
  • Your answer was the one with the most effort, so you get the bounty. But I will play around with the one from codeproject for a while in my sparetime. Probably NodeXL will come get in future versions. – Mare Infinitus Feb 07 '13 at 18:07
1

Ok, As you want,

Here is an example/library that let you create graphs and flowcharts easily,

http://www.codeproject.com/Articles/182683/NetworkView-A-WPF-custom-control-for-visualizing-a

It has actually very good features.

Soroush Falahati
  • 2,196
  • 1
  • 27
  • 38
  • Definitly it has. Still playing around with NetworkView, think this is a really good base for visualizing bipartite graphs. – Mare Infinitus Feb 05 '13 at 12:20
1

  1. yFiles WPF is an extensive .NET class library for Windows Presentation Foundation (WPF) applications. Its first-class UI controls for viewing and editing diagrams allow you to automatically arrange complex graphs, diagrams, and networks with the click of a button. Our diagramming library crafted for Windows Forms-based applications is yFiles.NET

  2. Graph# is a graph layout framework. It contains some layout algorithms and a GraphLayout control for WPF applications.

  3. Using WPF to Visualize a Graph with Circular Dependencies

Jeromy French
  • 11,812
  • 19
  • 76
  • 129
zandi
  • 704
  • 5
  • 17
0

If you can do it in Windows Forms, you can use NShape. Since the source is available, you could probably port it to WPF if you needed to. It might beat writing it from scratch. Or perhaps you could host a WinForms control to get the functionality you need. Not as nice as a pure WPF solution, though.

Katie Kilian
  • 6,815
  • 5
  • 41
  • 64
0

D3.js is a JavaScript library for manipulating documents based on data. D3 helps you bring data to life using HTML, SVG and CSS. D3’s emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework, combining powerful visualization components and a data-driven approach to DOM manipulation

D3 allows you to bind arbitrary data to a Document Object Model (DOM), and then apply data-driven transformations to the document. For example, you can use D3 to generate an HTML table from an array of numbers. Or, use the same data to create an interactive SVG bar chart with smooth transitions and interaction.

D3 is not a monolithic framework that seeks to provide every conceivable feature. Instead, D3 solves the crux of the problem: efficient manipulation of documents based on data. This avoids proprietary representation and affords extraordinary flexibility, exposing the full capabilities of web standards such as CSS3, HTML5 and SVG. With minimal overhead, D3 is extremely fast, supporting large datasets and dynamic behaviors for interaction and animation. D3’s functional style allows code reuse through a diverse collection of components and plugins.

http://d3js.org/

http://mbostock.github.com/d3/talk/20111116/force-collapsible.html

zandi
  • 704
  • 5
  • 17
  • 2
    D3 is for visualisation, as opposed to plotting. Where matplotlib is great for easily generating publication quality plots (by calls like pylab.hist(data) to make a histogram), D3 is more general. The basic concept is that you create a collection of objects (usually shapes in an svg), and bind data to them. You use the data to manipulate their properties, so you can have e.g. rectangles positioned around the screen based on a vector of input data. D3 is a bit painful for making simple plots, but it really shines when you want to do something a little more custom. – zandi Feb 05 '13 at 14:38
  • 1
    D3 is great for animation and interactivity: Animation is almost trivial with D3. Remember those rectangles? Simply bind a new vector of data to them, and use the built in transitions to make the shapes slide pleasantly into their new positions (or sizes, colours, etc.). Interactivity comes from the fact that D3 is implemented in javascript, and allows you to make these transitions occur in response to keyboard or mouse input. – zandi Feb 05 '13 at 14:38
  • 2
    D3 is magic, in that I can send anyone in the world an html file, and the visualisation will render perfectly in their browser. The only caveat is that it has to be a browser that complies with HTML5, CSS3 and embedding javascript (which makes any recent version of Firefox, Chrome, Safari or even Internet Explorer 9+ fine). – zandi Feb 05 '13 at 14:38
  • okay... I see you love D3. Just have to solve the "Javascript in WPF" problem then, or what? – Mare Infinitus Feb 05 '13 at 15:29