Using Arbor/ RGraph JS libaries for Data Visualisation

6,458 views
6,243 views

Published on

Slides demonstrating implementing arbor js and rgraph to visualise data

Published in: Technology, Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,458
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Using Arbor/ RGraph JS libaries for Data Visualisation

  1. 1. EPSRC – Data Visualisation Proof of Concept Alex Hardman
  2. 2. Topics• Node Graph (bouncing balls) – (Quick) Demo – Libraries – Frontend / AJAX• Details Graphs (bar charts etc) – (Quick) Demo – Libraries – Frontend / AJAX
  3. 3. Quick Demo
  4. 4. Libraries• Node Graph  arborjs.org• Graphs  rgraph.net HTML5 + Canvas
  5. 5. Node Graph• Uses Canvas (via the HTML5 getContext() object.• The getContext("2d") object has methods to draw lines, boxes, circles, and more.• Uses the Arbor js framework to store nodes and edges and handle updating their coordinates as the simulation progresses.
  6. 6. Node Graph - Creation arbor.ParticleSystem()• Parameters – Repulsion (the force repelling nodes from each other) – Stiffness (600 the rigidity of the edges) – Friction (the amount of damping in the system) – Gravity (an additional force attracting nodes to the origin) – Fps (frames per second) – Dt (timestep to use for stepping the simulation) – Precision (accuracy vs. speed in force calculations (zero is fast but jittery, one is smooth but cpu-intensive) (stored in web.config passed to the view)
  7. 7. Feeding the graph• Three calls to the server for graph data loadInitialData loadChildNodes search
  8. 8. Feed the graph… “NodeGraphDTO”• JSON from the server  “NodeGraphDTO”
  9. 9. Feed the graph… “NodeGraphDTO”• Lists of : Entities Relationships
  10. 10. Feed the graph… APIforeach(grant in Grants){ If (showGrants()) { ParticleSystem.addNode( Id, {data we define such as size, colour, label text etc }) }}… Do for each type in NodeGraphDTO
  11. 11. Feed the graph… APIif(showPeople() && showGrants(){ foreach (rel in grantPersons) { get the grant get the person ParticleSystem.addEdge( grantId personId }}
  12. 12. Node Graph – API Callbacks• redraw()  Gets called repeatedly for each frame• We handle callbacks for: – particleSystem.eachEdge(edge, pt1 pt2) • Draw a gradient line between pt1 and pt2 – particleSystem.eachNode(node, pt) • Work out what type of node we have • Draw it out accordingly (Shape? ,Text? Size? Colour?)
  13. 13. Node Graph – API Callbacks• initMouseHandling – Moved  used to determine whether to display hover text – Clicked – Dragged – Dropped  determine whether to load child nodes and quick details
  14. 14. JS – (as DRY as possible?)$(document).ready(function () { //Instantiate control objects _restoreManager = new RestoreManager(); _state = new SystemState(); _aData = new DataHandler(); _controlsManager = new ControlsManager(); _nodeController = new NodeController(); //Initialise controls _controlsManager.initialiseControls(); //Load initial data _aData.loadInitialData();});
  15. 15. General Usage//Define object function ‘ControlsManager’function ControlsManager() { var self = this; //Fix context of ‘this’ to the object function self.aPublicFunction = function(param) { //I’m public } function aPrivateFunction (){ I’m private// }}
  16. 16. ControlsManager//Define controls once as privatevar showGrantsChk = $("input:checkbox[id=ShowGran ts]");var showOutcomesChk = $("input:checkbox[id=ShowOutc omes]");etc…
  17. 17. ControlsManager//access them via public functionsself.initialiseControls = function () { …on(‘click’,…) etc. }self.clearDetails = function() {…}
  18. 18. DataHandlerself.saveNodeGraphData(data) { //Stores NodeGraphDTO object //from server}self.childData = [];//can contain child DataHandler(s)//retrieved when clicking on nodesself.addChildData(childDataHandler)
  19. 19. DataHandler//Contains ajax functionilty for//graph data.loadInitialData()//called on document readyloadChildNodes()//called after clicking on a node
  20. 20. NodeControllerfunction initSystem() { var sys = arbor.ParticleSystem(..);}self.throttle()self.unthrottle()
  21. 21. NodeControllerself.doGraphObjects() { buildThemes(); buildPeople(); //and all other nodes buildPeopleToGrantEdges(); //and all other edges for (var i = 0; i < _aData.childData.length; i++) { var childDataHandler = _aData.childData[i]; self.doChildObjects (childDataHandler); }}
  22. 22. NodeController - buildPeopleself.buildPeople() { if (_state.showPeople()){ for(each person in _aData.People){ addPersonNode(person) sys.addEdge(…) } }}
  23. 23. NodeController - addPersonNodeaddPersonNode(person){ if (!nodeExists(person.Id)){ sys.addNode( person.Id, { color:pColor, display:person.Id, size: nodeSize, type: person.Type, nodeType:labelNodeType, showLabel:true } ); }}
  24. 24. NodeController - buildPeopleToGrantEdgesbuildPeopleToGrantEdges () { if (_state.showPeople() && _state.showGrants()) { for (var i = 0; i < _aData.peopleToGrants.length; i++) { var pg = _aData.peopleToGrants[i]; var personNode = sys.getNode(pg.PersonId); var grantNode = sys.getNode(pg.GrantId); if (personNode !=undefined && grantNode != undefined) { sys.addEdge(pg.PersonId, pg.GrantId, { color: edgeColour }); } } } };
  25. 25. NodeControler - doChildObjectsself.doChildObjects = function(cData){ var parent = sys.getNode (cData.rootData.Id); //If the parent is null it is not //a child object so do nothing if (parent != undefined) { addChildPeopleNodes(parent, cData.peopleData); //And all the other types //(grants…, research areas…) }};
  26. 26. NodeController - addCildPeopleNodesfunction addChildPeopleNodes(parentNode, peopleDataArr) { if (_state.showPeople()) { for (var i = 0; i < peopleDataArr.length; i++) { var person = peopleDataArr[i]; //If the node is root it ain’t a child! if (!_state.isCurrentRoot(person.Id)) { var exisitng = sys.getNode(person.Id); if (exisitng == undefined) { addPersonNode(person); _aData.addNodeId(person.Id); } sys.addEdge( parentNode.data.display, person.Id, { color: edgeColour }); } } } }
  27. 27. RestoreManager//initialises the reset storage//in local storagefunction initResetStorage(){ localStorage.resetData = "";}
  28. 28. RestoreManagerself.addRestorePoint = function (data) { if (localStorage.resetData != "") { var resetArr = JSON.parse (localStorage.resetData); resetArr.push(data); localStorage.resetData = JSON.stringify (resetArr); } else { localStorage.resetData = JSON.stringify (new Array(data)); } };
  29. 29. RestoreManagerself.getLastRestoreData = function () { var resetData = JSON.parse (localStorage.resetData); if (resetData.length > 0) { if (resetData.length == 1) { return resetData[0]; } var l = resetData.length; var data = resetData[l - 2]; resetData.pop(); localStorage.resetData = JSON.stringify (resetData); return data; } return null; };
  30. 30. Drawing out the nodes - Renderer arborgraph.js Line 1172
  31. 31. RGraph
  32. 32. Details.js - ControlsManagerself.doResearchAreaGraph = function () { var canvas = getCanvas(); var ctx = canvas.getContext(2d); ctx.clearRect (0, 0, canvas.width, canvas.height); if(_state.selectedGraphType() == "Bar Chart"){ graph = new RGraph.Bar(graphCanvas, _dataManager.raData.GraphValues); graph.Set(chart.background.barcolor1, white); graph.Set(chart.background.barcolor2, white); graph.Set(chart.labels, _dataManager.raData.Themes); }};

×