Working Example of dc.graph.js

544 views
Skip to first unread message

Murat Ozer

unread,
Feb 9, 2017, 10:47:45 AM2/9/17
to dc-js user group
Is there any working example for dc.graph.js that works together with dc.js chart(s)?
Thank you very much for your help.

Gordon Woodhull

unread,
Feb 9, 2017, 11:05:56 AM2/9/17
to dc.js user group
I've been meaning to put one together - it will be pretty easy to do so, as I use the integration regularly.

However, I don't have an example data set handy - is there anything you can recommend?

Presumably the nodes and/or edges would have measurements associated with them, and the dc.js charts would show those measurements aggregated, as well as using them to filter the dc.graph. (It's technically possible to have the nodes and edges represent an aggregate, but I don't know how this would work.)


On Feb 9, 2017, at 10:47 AM, Murat Ozer <ozer....@gmail.com> wrote:

Is there any working example for dc.graph.js that works together with dc.js chart(s)?
Thank you very much for your help.

--
You received this message because you are subscribed to the Google Groups "dc-js user group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to dc-js-user-gro...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/dc-js-user-group/5de95d28-4484-4587-bd9b-1a4b82c6a399%40googlegroups.com.

Gordon Woodhull

unread,
Feb 9, 2017, 11:06:14 AM2/9/17
to dc.js user group

Murat Ozer

unread,
Feb 9, 2017, 12:11:42 PM2/9/17
to dc-js user group
Thank you very much Gordon! I created something. It seems working but I need your help to refine. I will upload to jsfiddle within 10 mins. I really appreciate your help.

On Thursday, February 9, 2017 at 11:06:14 AM UTC-5, Gordon Woodhull wrote:

Murat Ozer

unread,
Feb 9, 2017, 2:02:40 PM2/9/17
to dc-js user group
Sorry Gordon, it took much more time than I thought. For some reason, I couldn't make it work for jsfiddle one. For this reason, please find the below link directly from my server. I also included the jsfiddle one underneath of it
Row chart is now successfully cross filtering the network graph. I would like to filter row chart by clicking on the nodes as well. In addition to this, is that possible to hide nodes and edges whey they are not select.
Thanks a lot again.

Gordon Woodhull

unread,
Feb 9, 2017, 2:39:34 PM2/9/17
to dc.js user group
Thanks for starting on this. Not to pry, but I was trying to ask for an example of some data that actually makes sense, though. ;-)

If you don't want to talk about your project, that's okay. Just it's kind of hard to talk about functionality when it's some random unix process diagram. I doubt that counting the number of edges with some sourcename is very useful - do you have categories of nodes you'd like to filter in or out? Numeric measurements on nodes or edges? Time?

Selecting multiple nodes is currently not supported - definitely something I will get to soon. (There's currently no support for selecting edges, either.) I've gotten as far as adding a "behavior" which lets you select an individual node.

This example already demonstrates hiding edges - that's what causes the layout to change. If you filtered the crossfilter  xf4 which contains the nodes, you would see nodes disappear from the layout. Is this what you mean, or are you looking for a different behavior?


--
You received this message because you are subscribed to the Google Groups "dc-js user group" group.
To unsubscribe from this group and stop receiving emails from it, send an email to dc-js-user-gro...@googlegroups.com.

Murat Ozer

unread,
Feb 9, 2017, 2:59:15 PM2/9/17
to dc-js user group
oh, I see now. I have no restraints in bringing my data. Let me add my own data with additional variables. In that case we can better see crossfilter behaviors. I have never encountered before but wondering whether we can merge two dimensions (in this case edges and nodes) to filter both nodes and edges. I will do more practicing and upload a new one to our group.
Thank you again!

Murat Ozer

unread,
Feb 9, 2017, 11:40:51 PM2/9/17
to dc-js user group
Hi Gordon,
I added real data but noticed that it is extremely slow. dc charts open very quickly but cola.js opens very very slow. Please see below. I previously used cytoscape.js and experienced the same problem. For this reason, I switched to d3 force directed network. I am very pleased with the performance of d3 graph but I cannot effectively use crossfilter. Do you have any idea why cola.js is too slow? If we cannot solve this problem, is that possible that we can incorporate d3 force directed graph to dc.js? I searched a lot how to add a d3 chart to dc.js but couldn't find a documentation for that. Any help is greatly appreciated.
Thanks. 



On Thursday, February 9, 2017 at 2:39:34 PM UTC-5, Gordon Woodhull wrote:

Gordon Woodhull

unread,
Feb 10, 2017, 12:34:38 AM2/10/17
to dc-js-us...@googlegroups.com
cola.js is not intended to be used for really big graphs but this one is not huge. I think there may be something I don't understand about how to configure it so that it converges quickly. Cola has a lot of parameters.

Those big star formations seem to be an especial problem. It's something I've looked at but haven't figured out. It might help to set timeLimit to, say, 2000 (milliseconds).


And yeah I definitely plan to interface with d3 force layout as well. I think cola is designed to be a drop-in replacement for d3-force so this should not be difficult if you want to give it a try.

Plugging other charts into dc.js also isn't hard; here's the canonical SO answer on that (read the comments too):

Murat Ozer

unread,
Feb 11, 2017, 4:26:54 PM2/11/17
to dc-js user group
I looked at cola.js website and found this:
My biggest hurdle now is that I cannot crossfilter node and edge dimensions. When I pass crossfilter to them, graph gives error. I checked your dc.graph.js codes and noticed that you wrote codes to overcome this problem. Could you please let me know the correct way of crossfiltering nested data?

Gordon Woodhull

unread,
Feb 12, 2017, 5:13:53 PM2/12/17
to dc.js user group
As in the earlier example you cloned, the trick I use is called a "flat group". It's something that could be useful for dc.js bubble charts and scatter plots as well, anywhere you want a group which directly reflects the filtered rows.

Right now the flat group class that I use is part of dc_graph. I've upgraded the dc.graph.js documentation to HTML and documented dc_graph.flat_group here:

This class is pretty simple (shorter than the documentation actually) and should be moved to a crossfilter utilities library, once one exists.

[I'm not sure what you mean by passing crossfilter to the node and edge dimensions. It's the groups that provide data; generally speaking crossfilter groups serve as the model and crossfilter dimensions serve as the controller. 

Right now the nodeDimension and edgeDimension parameters are unused, although it's a good practice to pass them anyway. The selection behaviors don't yet filter anything, yet, although this is trivial to implement. (Multiple node selection and edge selection will be a little more difficult.)]


Murat Ozer

unread,
Feb 12, 2017, 9:48:45 PM2/12/17
to dc-js user group
Thank you Gordon! This is very helpful. I thought a lot on this and would like to think more to create a data structure to support both node and edge dimensions. As a quick solution, I added d3 buble chart to dc.js to filter the data by node dimension. I use php at the back end for the link analysis, for this reason, the data come as ready to the web page (even it shows the degree of relationship). I am going to use dc.charts, dataTable, d3 buble chart to provide full analytical ability to the users. I will send you the link when I am done.
By the way, I tried to use dc.js bubble chart but then noticed that it requires x and y axis. For that reason, I incorporated d3 bubble chart with d3. dispatch to dc.js. I am very excited about dc.graph.js. I think people are not aware of its ability. I hope I can start using soon in an efficient way. Thank you for this great contribution.
I will keep you posted if you don't mind. 

Gordon Woodhull

unread,
Feb 12, 2017, 10:06:25 PM2/12/17
to dc-js-us...@googlegroups.com
Yes, please let me know how it goes and if I can be of any help.

There are two kinds of bubble chart. The one in dc.js is like a scatter plot (x+y coords) with radius; there is also a kind that's more of a force directed model where the bubbles cling together - dc-addons calls it a bubble cloud:



If you get something working and it's publicly available, it would be cool to start a community examples page for dc.graph.js. I haven't tried to promote it because it's pretty young, but I think it's starting to get good.

Murat Ozer

unread,
Feb 19, 2017, 8:32:06 AM2/19/17
to dc-js user group
Good morning Gordon,
I successfully crossfiltered both nodes and edges in a single dimension. When I want to update dc.chart with this corssfiltered data with chart onclick function, the first update works but the second ones gives an error related to chart event listener. I copied the link below. Could you please help me on this?
Thank you again for your time.

Murat Ozer

unread,
Feb 19, 2017, 3:55:23 PM2/19/17
to dc-js user group
Hi again Gordon,
Please disregard my previous question. When I look at it with fresh eye, I noticed that I was doing something wrong with the crossfilter. I corrected it and working very good now. I will create a jsfiddle for that so that people who need force directed graph with dc.js can use it.
Thank you very much again for your quick response and support.

Gordon Woodhull

unread,
Feb 19, 2017, 6:05:25 PM2/19/17
to dc-js-us...@googlegroups.com
Sure thing. Yes please create a fiddle and I'll link to it from the README. That will be very helpful.

Glad you got it working!

Gordon Woodhull

unread,
Apr 3, 2017, 1:00:19 PM4/3/17
to dc.js user group
I've added behaviors and an example for rectangular/multiple selection of nodes in dc.graph.js:

Zoom and pan using the alt-key, drag or shift/ctrl-click to change the selection. 

Mode switching is not perfect; when you pan the selection drag also gets activated. More to come!
Reply all
Reply to author
Forward
0 new messages