_ ____ _ __ _ _ __ __ _ _ __ | |__ / ___| _ _| |__ / _` | '__/ _` | '_ \| '_ \\___ \| | | | '_ \ | (_| | | | (_| | |_) | | | |___) | |_| | |_) | \__, |_| \__,_| .__/|_| |_|____/ \__,_|_.__/ |___/ |_|
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.
- Display graph subsets. Given a data-set with 1000+ nodes, displaying all nodes at once can clutter your screen. With graphSub you can display only a subset of your data-set whilst being able to navigate through the entire data-set with mouse clicks.
- The search box feature allows you to quickly locate the node that you are interested in.
- None over-lapping labels means that node labels do not obscure each other.
- Works on touch screens.
- The responsive chart resizes upon a browser resize.
- The code uses an MVC architecture, making future development easier to manage.
- More features to be added....
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 seen by downloading the repo and opening index.html
Example bl.ock.s used in the development of this graph: