Example of asynchronous data retrieval for a TnT Board track. Instead of making calls to an external service, this example delays retrieving the data by 1 second.
Last active
January 12, 2016 16:30
-
-
Save emepyc/6130a7ae73d66727106b to your computer and use it in GitHub Desktop.
Asynchronous data retrieval
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var async = function (div) { | |
| var board = tnt.board().from(20).to(500).width(950); | |
| var axis_track = tnt.board.track() | |
| .height(0) | |
| .color("white") | |
| .display(tnt.board.track.feature.axis() | |
| .orientation("top") | |
| ); | |
| var pin_track = tnt.board.track() | |
| .height(60) | |
| .color("white") | |
| .display(tnt.board.track.feature.pin() | |
| .domain([0.3, 1.2]) | |
| .color("red") | |
| ) | |
| .data(tnt.board.track.data.async() | |
| .retriever (function () { | |
| var track = this; | |
| var arr = [ | |
| { | |
| pos : 200, | |
| val : 0.5 | |
| }, | |
| { | |
| pos : 355, | |
| val : 0.8 | |
| }, | |
| { | |
| pos : 100, | |
| val : 0.3 | |
| }, | |
| { | |
| pos : 400, | |
| val : 1 | |
| }, | |
| { | |
| pos : 401, | |
| val : 1 | |
| } | |
| ]; | |
| return new Promise (function (resolve, reject) { | |
| // We "fake" async data by delaying 1s | |
| setTimeout(function () { | |
| resolve(joinClose(arr, track.display().scale())); | |
| }, 1000); | |
| }); | |
| }) | |
| ); | |
| board | |
| .add_track(axis_track) | |
| .add_track(pin_track); | |
| board(div); | |
| board.start(); | |
| }; | |
| function joinClose (arr, xScale) { | |
| var lim = 2; | |
| arr.map (function (d) { | |
| d._px = xScale(d.pos); | |
| }); | |
| arr.sort (function (a, b) { | |
| return a.pos > b.pos; | |
| }); | |
| var groups = []; | |
| var currGroup = [arr[0]]; | |
| var curr = arr[0]; | |
| for (var i=1; i<arr.length; i++) { | |
| if ((arr[i]._px - curr. _px) < lim) { | |
| currGroup.push(arr[i]); | |
| } else { | |
| groups.push (currGroup); | |
| currGroup = [arr[i]]; | |
| curr = arr[i]; | |
| } | |
| } | |
| groups.push (currGroup); | |
| for (var g=0; g<groups.length; g++) { | |
| if (groups[g].length > 1) { | |
| var med = groups[g][~~(groups[g].length / 2)]; | |
| med.label = groups[g].length; | |
| } | |
| } | |
| return arr; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <head> | |
| <link rel="stylesheet" href="http://tntvis.github.io/tnt.board/build/tnt.board.css" type="text/css" /> | |
| <style> | |
| #mydiv { | |
| margin-top: 200px; | |
| } | |
| </style> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/es6-promise/3.0.2/es6-promise.js"></script> | |
| <script src="http://tntvis.github.io/tnt.board/build/tnt.board.min.js"></script> | |
| <script src="async.js"></script> | |
| </head> | |
| <body> | |
| <div id="mydiv"></div> | |
| <script> | |
| async(document.getElementById("mydiv")); | |
| </script> | |
| </body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment