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

niccolox’s picture

clemens.tolboom’s picture

Graph 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

function hook_graphapi_formats() {
}

function hook_graphapi_settings_form() {
}

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.

clemens.tolboom’s picture

Today added another hook graphapi_default_settings.

See the graphapi.api.php file.

asherry’s picture

Starting 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.

clemens.tolboom’s picture

@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)

asherry’s picture

Ok 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?

clemens.tolboom’s picture

dominikb1888’s picture

I'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?

saltednut’s picture

Subscribing.

clemens.tolboom’s picture

@dominikb1888 maybe you could help with #1398464: Provide theme suggestions

clemens.tolboom’s picture

Just 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 :-)

clemens.tolboom’s picture

Hmmm ... 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.

clemens.tolboom’s picture

Just 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

clemens.tolboom’s picture

An awesome demo http://bl.ocks.org/4183330 using TopoJSON and D3 ... could we do something with it's data?

niccolox’s picture

yep, that is F%^King AWESOME

asherry’s picture

That 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.

niccolox’s picture

I 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

clemens.tolboom’s picture

@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.

clemens.tolboom’s picture

Status: Active » Postponed (maintainer needs more info)

I'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?

asherry’s picture

@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.

clemens.tolboom’s picture

@asherry: let's first make d3 work :p

  1. Visit /admin/modules/graph
  2. Edit the view
  3. Change the format settings to D3
  4. Check the render type for D3 force directed
  5. Check preview view to make sure it's something like <div id="visualization" class="d3 forcedirected"></div>
  6. Save the view
  7. See ... unfortunately nothing :(

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)

asherry’s picture

I'll look at this - but please also fill out an issue on d3

clemens.tolboom’s picture

Assigned: Unassigned » clemens.tolboom

Hmm .. I need to check this again. I thought it worked after the D3 issues I reported.

dominikb1888’s picture

Probably the tiny issue I found here is related: http://drupal.org/node/1927228

clemens.tolboom’s picture

Status: Postponed (maintainer needs more info) » Closed (fixed)

I 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.

clemens.tolboom’s picture

Issue summary: View changes

question added