Closed (fixed)
Project:
Graph API
Version:
7.x-1.x-dev
Component:
Miscellaneous
Priority:
Normal
Category:
Feature request
Assigned:
Reporter:
Created:
28 Mar 2012 at 01:43 UTC
Updated:
26 Feb 2013 at 09:21 UTC
could d3.js be integrated into GraphAPI ?
not sure if this belongs in Graph API or Relation or somewhere in between
d3.js Data-Driven Documents is a small, free JavaScript library for manipulating documents based on data
has anyone looked at http://mbostock.github.com/d3/
Comments
Comment #1
niccolox commentedhttp://drupal.org/sandbox/asherry/1477334
Comment #2
clemens.tolboomGraph API is about relations. I just skimmed d3 examples and some of these are definitely compatible with Graph API.
The module of asherry should implement two hooks
and have a theme function (this is not quite working yet as planned).
graph_phyz module is a working example.
For each d3 representation a format must be returned.
Comment #3
clemens.tolboomToday added another hook graphapi_default_settings.
See the graphapi.api.php file.
Comment #4
asherry commentedStarting to work on this now as part of a reporting project for a client. (hence the delay, sorry) This seems like a great module, I'm kind of curious why it only implements force directed graphs? I looked into trying to integrate into the charts project but it is not at all in a working state for drupal 7 yet. Ideally I would like to have a helper module like graphapi to unify all or most the different types of graphs and visualizations that D3 does.
Comment #5
clemens.tolboom@asherry : there is naming confusion between a graph and chart I guess.
Graph API is about connecting points to form a mesh aka graph. It has (still) it's own render engine graph_phyz. Using thejit one can render a spacetree or a force directed.
Using 3D it could render some 'charts' as those looks like a 'relational graph' to me. But most of 3D graphs have nothing to do with the data produced by Graph API.
I would love to build both kind of interfaces :)
(you can hire me)
Comment #6
asherry commentedOk so you're saying that the graphapi module will mainly handle relational data. That's fine - d3 does relational data in addition to charts. I have d3 working with graphapi - I'm trying now to use it with views. It seems like graphapi is going to call template_preprocess_views_graphapi_style_graphapi.
How do I customize that function if you choose the engine as d3 in a view?
Comment #7
clemens.tolboomI'm not sure ... I have trouble with these too. See #1398464: Provide theme suggestions and/or #1393810: Move theming code out of graphapi.module into graph_phyz.module
Comment #8
dominikb1888 commentedI'd be very interested in this as well and willing to spend some time on views integration. @asherry: Are there any of your efforts online already?
Comment #9
saltednutSubscribing.
Comment #10
clemens.tolboom@dominikb1888 maybe you could help with #1398464: Provide theme suggestions
Comment #11
clemens.tolboomJust had a look at https://github.com/mbostock/d3/wiki/Gallery ... it has some awesome Graph API related graphs.
So maybe I start some work on it.
Sponsors needed! Anyone :-)
Comment #12
clemens.tolboomHmmm ... I forgot about the sandbox. I tried it today without luck :(
I asked for git access for @asherry sandbox to move it forward ... let's see what happens.
Comment #13
clemens.tolboomJust had a look @ http://mbostock.github.com/d3/ex/chord.html and http://mbostock.github.com/d3/talk/20111116/bundle.html (Hierarchical Edge Bundling)
For chord to work we need to get only link properties: value and color apart from node.from_id, node.to_id. The resulting $graph must be transformed into a matrix regarding the chord data.
Bundle needs a from.value (not sure a to.value is appropriate there. Question: Must Graph API be symmetric in it's node from-to?!?)
The interaction element of both seems a lot of customization so the architecture of thejit seems a proper way to do this. Having theme functions for every interaction element which can be overridden by an implementer.
Btw: I haven't heard from @asherry
Comment #14
clemens.tolboomAn awesome demo http://bl.ocks.org/4183330 using TopoJSON and D3 ... could we do something with it's data?
Comment #15
niccolox commentedyep, that is F%^King AWESOME
Comment #16
asherry commentedThat is a great visualization. I made quite a few changes to the d3 sandbox module, and I think that it's now a lot easier to incorporate visualizations like this into drupal. Since libraries can depend on other libraries, it's easy now to have a world tour library, and then have it depend on another library which is topojson. I'm back to working on this more frequently so I'd like to get some conversations going again.
Comment #17
niccolox commentedI wonder if there is something easy and powerful that could draw attention to this project space?
I really like the www.processingjs.org sites top nav bar animation of nodes and relations
Imagine if that animation was a ui of a drupal sites real nodes and links, taxonomy etc
A kind of topic map or semantic map relations menu block
Node map menu? Something like that... basically a killer app
Comment #18
clemens.tolboom@niccolo please file a separate issue with some more UI ... I think you have all tools in place already but let's see what happens.
Comment #19
clemens.tolboomI've summarized the integration benefits in #1818870: Big patch trying to get Graph API running comment #3
To help D3 with this (loosen the required right side for Graph API views integration) I need some prove the integration is in place.
Has anyone tried this integration?
Comment #20
asherry commented@clemens.tolboom - I don't understand the benefit with exclusively using graphapi for all data structures. This would mean that for every new type of visualization, and data structure, we would have to update graphapi, and add in overhead code to somehow accomodate any graph renderer.
There are hundreds of d3 visualizations -
https://github.com/mbostock/d3/wiki/Gallery
Also, as it stands now (correct me if I'm wrong) but graphapi can only render one type of visualization. When you call the api code, it will output the default selected visualization type. As you can see from the example above, there are 15 different types of force directed charts alone. You should be able to use anyone of these, for any visualization that you want - and then create new ones easily. Right now the d3 module can do this, because it utilizes the libraries module, and the php to js is one direct translation. Any data you send to the api argument array, gets sent directly to the settings var in each library, so no need for any additional php code.
Comment #21
clemens.tolboom@asherry: let's first make d3 work :p
<div id="visualization" class="d3 forcedirected"></div>This has probably to do with D3: #1875338: Where are the Examples? and D3 : #1886856: github does not have d3.v3.min.js and you should check for d3.min.js
(we probably did not downloaded the correct or enough d3 js code)
Comment #22
asherry commentedI'll look at this - but please also fill out an issue on d3
Comment #23
clemens.tolboomHmm .. I need to check this again. I thought it worked after the D3 issues I reported.
Comment #24
dominikb1888 commentedProbably the tiny issue I found here is related: http://drupal.org/node/1927228
Comment #25
clemens.tolboomI close this issue as D3 has some support now. We can feed that project with issues from now on :p
Feel free to create new issues from this one when applicable.
Comment #25.0
clemens.tolboomquestion added