Graphsub

A Javascript plugin for d3js. A resubale force directed graph with some useful features rolled in.

View the Project on GitHub TimeBandit/graphSub

                       _     ____        _     
  __ _ _ __ __ _ _ __ | |__ / ___| _   _| |__  
 / _` | '__/ _` | '_ \| '_ \\___ \| | | | '_ \ 
| (_| | | | (_| | |_) | | | |___) | |_| | |_) |
 \__, |_|  \__,_| .__/|_| |_|____/ \__,_|_.__/ 
 |___/          |_|                            

graphSub is a re-usable force directed chart for displaying connected data. Written in Javascript with the d3js library. It has some cool features rolled in.

Featues include:

Instructions:

The following code can be found at the end of static/js/graphsub.js please modify it to suit your needs. Your data must follow the format given in the example data-set. This can be found in /data/miserables.json More information on d3s' force layouts can be found here.

/*----------------------------------------------------------------------------`
The code example below:
1. Loads the JSON data.
2. Sets the width to 760px.
3. Set the height to 500px.
4. Displays all nodes within 2 hops of the selected node.
5. Attaches the chart to the DOM element with id #chart
*/

d3.json("data/miserables.json", function(error, graph) {
    if (error) throw error;

    // Parse JSON into the correct format if needed

    var chart = d3.graphSub()
                  .width(760)
                  .height(500)
                  .hops(2);

    d3.select("#chart")
      .datum(graph)
      .call(chart);
});

Want to contribute a bug fix or enhancement; then feel free to clone the repository and make a pull request.

*A working example can be found by downloading the repo and opening index.html.*

Example bl.ock.s used in the development of this graph:

Simple example of reusable d3 plugin

Force-based label placement

Force-Directed Graph

General Update Pattern, I

General Update Pattern, II

General Update Pattern, III

Animating Changes in Force Diagram

Please enable JavaScript to view the comments powered by Disqus.