Skip to content

Instantly share code, notes, and snippets.

@mdamien

mdamien/perf-quad.html

Last active August 29, 2015 14:24
Show Gist options
  • Save mdamien/0d20f1c70a675b8a294a to your computer and use it in GitHub Desktop.
Save mdamien/0d20f1c70a675b8a294a to your computer and use it in GitHub Desktop.
Download ZIP
Raw
perf-quad.html
<!-- START SIGMA IMPORTS -->
<script src="../src/sigma.core.js"></script>
<script src="../src/conrad.js"></script>
<script src="../src/utils/sigma.utils.js"></script>
<script src="../src/utils/sigma.polyfills.js"></script>
<script src="../src/sigma.settings.js"></script>
<script src="../src/classes/sigma.classes.dispatcher.js"></script>
<script src="../src/classes/sigma.classes.configurable.js"></script>
<script src="../src/classes/sigma.classes.graph.js"></script>
<script src="../src/classes/sigma.classes.camera.js"></script>
<script src="../src/classes/sigma.classes.quad.js"></script>
<script src="../src/classes/sigma.classes.edgequad.js"></script>
<script src="../src/captors/sigma.captors.mouse.js"></script>
<script src="../src/captors/sigma.captors.touch.js"></script>
<script src="../src/renderers/sigma.renderers.canvas.js"></script>
<script src="../src/renderers/sigma.renderers.webgl.js"></script>
<script src="../src/renderers/sigma.renderers.svg.js"></script>
<script src="../src/renderers/sigma.renderers.def.js"></script>
<script src="../src/renderers/webgl/sigma.webgl.nodes.def.js"></script>
<script src="../src/renderers/webgl/sigma.webgl.nodes.fast.js"></script>
<script src="../src/renderers/webgl/sigma.webgl.edges.def.js"></script>
<script src="../src/renderers/webgl/sigma.webgl.edges.fast.js"></script>
<script src="../src/renderers/webgl/sigma.webgl.edges.arrow.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.labels.def.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.hovers.def.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.nodes.def.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edges.def.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edges.curve.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edges.arrow.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edges.curvedArrow.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edgehovers.def.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edgehovers.curve.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edgehovers.arrow.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edgehovers.curvedArrow.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.extremities.def.js"></script>
<script src="../src/renderers/svg/sigma.svg.utils.js"></script>
<script src="../src/renderers/svg/sigma.svg.nodes.def.js"></script>
<script src="../src/renderers/svg/sigma.svg.edges.def.js"></script>
<script src="../src/renderers/svg/sigma.svg.edges.curve.js"></script>
<script src="../src/renderers/svg/sigma.svg.labels.def.js"></script>
<script src="../src/renderers/svg/sigma.svg.hovers.def.js"></script>
<script src="../src/middlewares/sigma.middlewares.rescale.js"></script>
<script src="../src/middlewares/sigma.middlewares.copy.js"></script>
<script src="../src/misc/sigma.misc.animation.js"></script>
<script src="../src/misc/sigma.misc.bindEvents.js"></script>
<script src="../src/misc/sigma.misc.bindDOMEvents.js"></script>
<script src="../src/misc/sigma.misc.drawHovers.js"></script>
<!-- END SIGMA IMPORTS -->
<script src="../plugins/sigma.plugins.dragNodes/settings.js"></script>
<script src="../plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js"></script>
<script src="../plugins/sigma.helpers.graph/sigma.helpers.graph.js"></script>
<script src="../plugins/sigma.plugins.activeState/sigma.plugins.activeState.js"></script>
<script src="../plugins/sigma.plugins.select/sigma.plugins.select.js"></script>
<script src="../plugins/sigma.plugins.keyboard/sigma.plugins.keyboard.js"></script>
<script src="../plugins/sigma.renderers.linkurious/settings.js"></script>
<script src="../plugins/sigma.renderers.linkurious/canvas/sigma.canvas.labels.def.js"></script>
<script src="../plugins/sigma.renderers.linkurious/canvas/sigma.canvas.hovers.def.js"></script>
<script src="../plugins/sigma.renderers.linkurious/canvas/sigma.canvas.nodes.def.js"></script>
<script src="../plugins/sigma.renderers.linkurious/canvas/sigma.canvas.nodes.cross.js"></script>
<script src="../plugins/sigma.renderers.linkurious/canvas/sigma.canvas.nodes.diamond.js"></script>
<script src="../plugins/sigma.renderers.linkurious/canvas/sigma.canvas.nodes.equilateral.js"></script>
<script src="../plugins/sigma.renderers.linkurious/canvas/sigma.canvas.nodes.square.js"></script>
<script src="../plugins/sigma.renderers.linkurious/canvas/sigma.canvas.nodes.star.js"></script>
<script src="../plugins/sigma.renderers.linkurious/canvas/sigma.canvas.edges.def.js"></script>
<script src="../plugins/sigma.renderers.linkurious/canvas/sigma.canvas.edges.curve.js"></script>
<script src="../plugins/sigma.renderers.linkurious/canvas/sigma.canvas.edges.arrow.js"></script>
<script src="../plugins/sigma.renderers.linkurious/canvas/sigma.canvas.edges.curvedArrow.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<div id="container">
<style>
#graph-container {
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
}
</style>
<div id="graph-container"></div>
</div>
<script>
sigma.renderers.def = sigma.renderers.canvas;
function logtitle(x) {
document.title = x
console.log(x)
}
function milli2nice(m) {
var r = Math.round(m*1000)/1000;
return r+"ms"
}
function median(values) {
values.sort( function(a,b) {return a - b;} );
var half = Math.floor(values.length/2);
if(values.length % 2){
return values[half];
}
return (values[half-1] + values[half]) / 2.0;
}
function tocsv(results, name){
var csvContent = "data:text/csv;charset=utf-8,";
csvContent += results.join('\n');
var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", name);
link.click();
}
function bench(name, fn, options){
options = options || {};
samples = options.samples || 10;
maxtime = options.maxtime || 3; //seconds
var start, total, times = [];
var i = 0;
for(;i < samples; i++){
start = performance.now();
fn()
total = performance.now()-start;
//console.log('cycle',i,milli2nice(total))
times.push(total)
if(total > options.maxtime*1000){
break
}
}
var sum = times.reduce(function(a, b) { return a + b; });
var avg = sum / times.length;
var med = median(times)
logtitle(name+' => median '+milli2nice(med)+' values: '+times.map(milli2nice).slice(0,10).join(', '))
return {
avg:avg,
times:times,
median:med,
sampled:i,
}
}
var results = [
['N','E','maxLevel','index','lookup','index avg.','lookup avg.','index log'].join(';'),
]
NEs = [
[400,700],
[1200,1500],
[5000,8000],
[20000,32000]
]
NEs.map(function(NE){
var i,
s,
N = NE[0],
E = NE[1],
g = {
nodes: [],
edges: []
};
logtitle("building "+N+","+E+" graph")
// Generate a random graph:
for (i = 0; i < N; i++)
g.nodes.push({
id: 'n' + i,
label: 'Node ' + i,
x: Math.random(),
y: Math.random(),
size: Math.random(),
color: '#666'
});
for (i = 0; i < E; i++)
g.edges.push({
id: 'e' + i,
source: 'n' + (Math.random() * N | 0),
target: 'n' + (Math.random() * N | 0),
size: Math.random(),
color: '#ccc'
});
for (var level = 1; level < 7; level++) {
document.getElementById('graph-container').innerHTML = ""
logtitle("render "+N+","+E+" graph level "+level)
sigma.prototype.refresh = function(){}
var s = new sigma({
graph: g,
renderer: {
container: document.getElementById('graph-container'),
type: 'canvas'
},
settings: {
dragNodeStickiness: 0.01,
borderSize: 2,
outerBorderSize: 3,
defaultNodeBorderColor: '#fff',
defaultNodeOuterBorderColor: 'rgb(236, 81, 72)',
enableEdgeHovering: true,
edgeHoverExtremities: true,
edgeHoverHighlightNodes: 'circle',
edgeQuadtreeMaxLevel: level,
}
});
var bounds = sigma.utils.getBoundaries(
s.graph,
s.camera.readPrefix
);
var r = {
x: bounds.minX,
y: bounds.minY,
width: bounds.maxX - bounds.minX,
height: bounds.maxY - bounds.minY
}
var area = {
x: r.x+r.width/2,
y: r.y+r.height/2,
width:200,
height:200,
}
var base = 'N '+N+', E '+E+' level '+level;
logtitle("start bench of "+N+","+E+" graph")
var res1 = bench(base+' index',function(){
s.camera.edgequadtree.index(s.graph, {
prefix: s.camera.readPrefix,
maxLevel: s.camera.settings('edgeQuadtreeMaxLevel'),
bounds: {
x: bounds.minX,
y: bounds.minY,
width: bounds.maxX - bounds.minX,
height: bounds.maxY - bounds.minY
}
});
}, {samples:5, maxtime:20});
res2 = bench(base+' lookup ',function(){
var r = s.camera.edgequadtree.area(area) //getNodes()
console.log("lookup:",r.length)
}, {samples:20, maxtime:1});
results.push([
N,E,level,res1.median, res2.median, res1.avg, res2.avg, Math.log(res1.median)
].join(';'))
}
tocsv(results, "bench_"+N+".csv");
});
console.log('finished!');
</script>
Raw
z-arctic.html
<!-- START SIGMA IMPORTS -->
<script src="../src/sigma.core.js"></script>
<script src="../src/conrad.js"></script>
<script src="../src/utils/sigma.utils.js"></script>
<script src="../src/utils/sigma.polyfills.js"></script>
<script src="../src/sigma.settings.js"></script>
<script src="../src/classes/sigma.classes.dispatcher.js"></script>
<script src="../src/classes/sigma.classes.configurable.js"></script>
<script src="../src/classes/sigma.classes.graph.js"></script>
<script src="../src/classes/sigma.classes.camera.js"></script>
<script src="../src/classes/sigma.classes.quad.js"></script>
<script src="../src/classes/sigma.classes.edgequad.js"></script>
<script src="../src/captors/sigma.captors.mouse.js"></script>
<script src="../src/captors/sigma.captors.touch.js"></script>
<script src="../src/renderers/sigma.renderers.canvas.js"></script>
<script src="../src/renderers/sigma.renderers.webgl.js"></script>
<script src="../src/renderers/sigma.renderers.svg.js"></script>
<script src="../src/renderers/sigma.renderers.def.js"></script>
<script src="../src/renderers/webgl/sigma.webgl.nodes.def.js"></script>
<script src="../src/renderers/webgl/sigma.webgl.nodes.fast.js"></script>
<script src="../src/renderers/webgl/sigma.webgl.edges.def.js"></script>
<script src="../src/renderers/webgl/sigma.webgl.edges.fast.js"></script>
<script src="../src/renderers/webgl/sigma.webgl.edges.arrow.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.labels.def.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.hovers.def.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.nodes.def.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edges.def.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edges.curve.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edges.arrow.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edges.curvedArrow.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edgehovers.def.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edgehovers.curve.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edgehovers.arrow.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.edgehovers.curvedArrow.js"></script>
<script src="../src/renderers/canvas/sigma.canvas.extremities.def.js"></script>
<script src="../src/renderers/svg/sigma.svg.utils.js"></script>
<script src="../src/renderers/svg/sigma.svg.nodes.def.js"></script>
<script src="../src/renderers/svg/sigma.svg.edges.def.js"></script>
<script src="../src/renderers/svg/sigma.svg.edges.curve.js"></script>
<script src="../src/renderers/svg/sigma.svg.labels.def.js"></script>
<script src="../src/renderers/svg/sigma.svg.hovers.def.js"></script>
<script src="../src/middlewares/sigma.middlewares.rescale.js"></script>
<script src="../src/middlewares/sigma.middlewares.copy.js"></script>
<script src="../src/misc/sigma.misc.animation.js"></script>
<script src="../src/misc/sigma.misc.bindEvents.js"></script>
<script src="../src/misc/sigma.misc.bindDOMEvents.js"></script>
<script src="../src/misc/sigma.misc.drawHovers.js"></script>
<!-- END SIGMA IMPORTS -->
<script src="../plugins/sigma.plugins.dragNodes/settings.js"></script>
<script src="../plugins/sigma.plugins.dragNodes/sigma.plugins.dragNodes.js"></script>
<script src="../plugins/sigma.helpers.graph/sigma.helpers.graph.js"></script>
<script src="../plugins/sigma.plugins.activeState/sigma.plugins.activeState.js"></script>
<script src="../plugins/sigma.plugins.select/sigma.plugins.select.js"></script>
<script src="../plugins/sigma.plugins.keyboard/sigma.plugins.keyboard.js"></script>
<script src="../plugins/sigma.renderers.linkurious/settings.js"></script>
<script src="../plugins/sigma.renderers.linkurious/canvas/sigma.canvas.labels.def.js"></script>
<script src="../plugins/sigma.renderers.linkurious/canvas/sigma.canvas.hovers.def.js"></script>
<script src="../plugins/sigma.renderers.linkurious/canvas/sigma.canvas.nodes.def.js"></script>
<script src="../plugins/sigma.renderers.linkurious/canvas/sigma.canvas.nodes.cross.js"></script>
<script src="../plugins/sigma.renderers.linkurious/canvas/sigma.canvas.nodes.diamond.js"></script>
<script src="../plugins/sigma.renderers.linkurious/canvas/sigma.canvas.nodes.equilateral.js"></script>
<script src="../plugins/sigma.renderers.linkurious/canvas/sigma.canvas.nodes.square.js"></script>
<script src="../plugins/sigma.renderers.linkurious/canvas/sigma.canvas.nodes.star.js"></script>
<script src="../plugins/sigma.renderers.linkurious/canvas/sigma.canvas.edges.def.js"></script>
<script src="../plugins/sigma.renderers.linkurious/canvas/sigma.canvas.edges.curve.js"></script>
<script src="../plugins/sigma.renderers.linkurious/canvas/sigma.canvas.edges.arrow.js"></script>
<script src="../plugins/sigma.renderers.linkurious/canvas/sigma.canvas.edges.curvedArrow.js"></script>
<script src="../plugins/sigma.parsers.gexf/gexf-parser.js"></script>
<script src="../plugins/sigma.parsers.json/sigma.parsers.json.js"></script>
<script src="../plugins/sigma.parsers.gexf/sigma.parsers.gexf.js"></script>
<script src="../plugins/sigma.plugins.animate/sigma.plugins.animate.js"></script>
<script src="../plugins/sigma.layout.forceLink/worker.js"></script>
<script src="../plugins/sigma.layout.forceLink/supervisor.js"></script>
<script src="../plugins/sigma.exporters.gexf/sigma.exporters.gexf.js"></script>
<div id="container">
<style>
#graph-container {
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
}
</style>
<div id="graph-container"></div>
</div>
<script>
sigma.renderers.def = sigma.renderers.canvas;
function logtitle(x) {
document.title = x
console.log(x)
}
function milli2nice(m) {
var r = Math.round(m*1000)/1000;
return r+"ms"
}
function median(values) {
values.sort( function(a,b) {return a - b;} );
var half = Math.floor(values.length/2);
if(values.length % 2){
return values[half];
}
return (values[half-1] + values[half]) / 2.0;
}
function tocsv(results, name){
var csvContent = "data:text/csv;charset=utf-8,";
csvContent += results.join('\n');
var encodedUri = encodeURI(csvContent);
var link = document.createElement("a");
link.setAttribute("href", encodedUri);
link.setAttribute("download", name);
link.click();
}
function bench(name, fn, options){
options = options || {};
samples = options.samples || 10;
maxtime = options.maxtime || 3; //seconds
var start, total, times = [];
var i = 0;
for(;i < samples; i++){
start = performance.now();
fn()
total = performance.now()-start;
//console.log('cycle',i,milli2nice(total))
times.push(total)
if(total > options.maxtime*1000){
break
}
}
var sum = times.reduce(function(a, b) { return a + b; });
var avg = sum / times.length;
var med = median(times)
logtitle(name+' => median '+milli2nice(med)+' values: '+times.map(milli2nice).slice(0,10).join(', '))
return {
avg:avg,
times:times,
median:med,
sampled:i,
}
}
sigma.prototype.refresh = function(){}
var results = [
['N','E','maxLevel','index','lookup','index avg.','lookup avg.','index log'].join(';'),
]
sigma.parsers.gexf('data/arctic.gexf', {
// container: 'graph-container',
renderer: {
container: document.getElementById('graph-container'),
type: 'canvas'
},
settings: {
edgeColor: 'default',
defaultEdgeColor: '#ccc',
animationsTime: 5000,
drawLabels: false,
scalingMode: 'outside',
batchEdgesDrawing: true,
hideEdgesOnMove: true,
sideMargin: 1
}
}, function(s) {
S = s
var N = 1700;
var E = 6600;
for (var level = 1; level < 30; level++) {
document.getElementById('graph-container').innerHTML = ""
logtitle("render "+N+","+E+" graph level "+level)
s.camera.settings['edgeQuadtreeMaxLevel'] = level;
var bounds = sigma.utils.getBoundaries(
s.graph,
s.camera.readPrefix
);
var r = {
x: bounds.minX,
y: bounds.minY,
width: bounds.maxX - bounds.minX,
height: bounds.maxY - bounds.minY
}
var area = {
x: r.x+r.width/2,
y: r.y+r.height/2,
width:200,
height:200,
}
var base = 'N '+N+', E '+E+' level '+level;
logtitle("start bench of "+N+","+E+" graph")
var res1 = bench(base+' index',function(){
s.camera.edgequadtree.index(s.graph, {
prefix: s.camera.readPrefix,
maxLevel: s.camera.settings('edgeQuadtreeMaxLevel'),
bounds: {
x: bounds.minX,
y: bounds.minY,
width: bounds.maxX - bounds.minX,
height: bounds.maxY - bounds.minY
}
});
}, {samples:5, maxtime:20});
res2 = bench(base+' lookup ',function(){
var r = s.camera.edgequadtree.area(area) //getNodes()
console.log("lookup:",r.length)
}, {samples:20, maxtime:1});
results.push([
N,E,level,res1.median, res2.median, res1.avg, res2.avg, Math.log(res1.median)
].join(';'))
}
tocsv(results, "bench_"+N+".csv");
console.log('finished!');
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment