Your SlideShare is downloading. ×
0
Using Arbor/ RGraph JS libaries for Data Visualisation
Using Arbor/ RGraph JS libaries for Data Visualisation
Using Arbor/ RGraph JS libaries for Data Visualisation
Using Arbor/ RGraph JS libaries for Data Visualisation
Using Arbor/ RGraph JS libaries for Data Visualisation
Using Arbor/ RGraph JS libaries for Data Visualisation
Using Arbor/ RGraph JS libaries for Data Visualisation
Using Arbor/ RGraph JS libaries for Data Visualisation
Using Arbor/ RGraph JS libaries for Data Visualisation
Using Arbor/ RGraph JS libaries for Data Visualisation
Using Arbor/ RGraph JS libaries for Data Visualisation
Using Arbor/ RGraph JS libaries for Data Visualisation
Using Arbor/ RGraph JS libaries for Data Visualisation
Using Arbor/ RGraph JS libaries for Data Visualisation
Using Arbor/ RGraph JS libaries for Data Visualisation
Using Arbor/ RGraph JS libaries for Data Visualisation
Using Arbor/ RGraph JS libaries for Data Visualisation
Using Arbor/ RGraph JS libaries for Data Visualisation
Using Arbor/ RGraph JS libaries for Data Visualisation
Using Arbor/ RGraph JS libaries for Data Visualisation
Using Arbor/ RGraph JS libaries for Data Visualisation
Using Arbor/ RGraph JS libaries for Data Visualisation
Using Arbor/ RGraph JS libaries for Data Visualisation
Using Arbor/ RGraph JS libaries for Data Visualisation
Using Arbor/ RGraph JS libaries for Data Visualisation
Using Arbor/ RGraph JS libaries for Data Visualisation
Using Arbor/ RGraph JS libaries for Data Visualisation
Using Arbor/ RGraph JS libaries for Data Visualisation
Using Arbor/ RGraph JS libaries for Data Visualisation
Using Arbor/ RGraph JS libaries for Data Visualisation
Using Arbor/ RGraph JS libaries for Data Visualisation
Using Arbor/ RGraph JS libaries for Data Visualisation
Using Arbor/ RGraph JS libaries for Data Visualisation
Using Arbor/ RGraph JS libaries for Data Visualisation
Using Arbor/ RGraph JS libaries for Data Visualisation
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Using Arbor/ RGraph JS libaries for Data Visualisation

5,699

Published on

Slides demonstrating implementing arbor js and rgraph to visualise data

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
5,699
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
0
Comments
0
Likes
3
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. EPSRC – Data Visualisation Proof of Concept Alex Hardman
  • 2. Topics• Node Graph (bouncing balls) – (Quick) Demo – Libraries – Frontend / AJAX• Details Graphs (bar charts etc) – (Quick) Demo – Libraries – Frontend / AJAX
  • 3. Quick Demo
  • 4. Libraries• Node Graph  arborjs.org• Graphs  rgraph.net HTML5 + Canvas
  • 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. 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. Feeding the graph• Three calls to the server for graph data loadInitialData loadChildNodes search
  • 8. Feed the graph… “NodeGraphDTO”• JSON from the server  “NodeGraphDTO”
  • 9. Feed the graph… “NodeGraphDTO”• Lists of : Entities Relationships
  • 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. Feed the graph… APIif(showPeople() && showGrants(){ foreach (rel in grantPersons) { get the grant get the person ParticleSystem.addEdge( grantId personId }}
  • 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. 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. 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. 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. ControlsManager//Define controls once as privatevar showGrantsChk = $("input:checkbox[id=ShowGran ts]");var showOutcomesChk = $("input:checkbox[id=ShowOutc omes]");etc…
  • 17. ControlsManager//access them via public functionsself.initialiseControls = function () { …on(‘click’,…) etc. }self.clearDetails = function() {…}
  • 18. DataHandlerself.saveNodeGraphData(data) { //Stores NodeGraphDTO object //from server}self.childData = [];//can contain child DataHandler(s)//retrieved when clicking on nodesself.addChildData(childDataHandler)
  • 19. DataHandler//Contains ajax functionilty for//graph data.loadInitialData()//called on document readyloadChildNodes()//called after clicking on a node
  • 20. NodeControllerfunction initSystem() { var sys = arbor.ParticleSystem(..);}self.throttle()self.unthrottle()
  • 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. NodeController - buildPeopleself.buildPeople() { if (_state.showPeople()){ for(each person in _aData.People){ addPersonNode(person) sys.addEdge(…) } }}
  • 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. 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. 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. 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. RestoreManager//initialises the reset storage//in local storagefunction initResetStorage(){ localStorage.resetData = "";}
  • 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. 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. Drawing out the nodes - Renderer arborgraph.js Line 1172
  • 31. RGraph
  • 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); }};

×