Last active
July 19, 2023 18:39
-
-
Save otrack/726b8ad423b4c04098dc8ee05a7810e2 to your computer and use it in GitHub Desktop.
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 mainElt = document.getElementById('main'); | |
var graphElt = document.getElementById('graph'); | |
var mainChart = echarts.init(mainElt); | |
var graphChart = echarts.init(graphElt); | |
var headers = [] | |
var headersMap = { | |
"nodes" : "#nodes", | |
"propagation_rate" : "propagation rate (%)", | |
"sent" : "#sent", | |
"seen" : "#seen (avg)", | |
"completion" : "completion", | |
"total_bandwidth" : "total bw. (KB)", | |
"useful_bandwidth" : "useful bw. (KB)", | |
"overhead" : "overhead", | |
"redundancy" : "redundancy (avg)", | |
"degree" : "degree (avg)", | |
"bandwidth" : "bandwidth" | |
} | |
var dataset = [] | |
var graphs = [] | |
function plotExperiments(dimension) { | |
var symbolSize = 2.5; | |
var option = {} | |
option = { | |
title: { | |
text: 'Experiments', | |
subtext: 'e2e - fast prototyping', | |
left: 'center' | |
}, | |
grid3D: {}, | |
xAxis3D: { | |
name: headersMap['nodes'] | |
}, | |
yAxis3D: { | |
name: headersMap['propagation_rate'] | |
}, | |
zAxis3D: { | |
name: headersMap[dimension], | |
}, | |
dataset: { | |
dimensions: headers, | |
source: dataset | |
}, | |
series: [ | |
{ | |
name: 'experiments', | |
type: 'scatter3D', | |
symbolSize: 10, | |
encode: { | |
x: 'nodes', | |
y: 'propagation_rate', | |
z: dimension, | |
tooltip: [0, 1, 2, 3, 4] | |
} | |
} | |
] | |
}; | |
option && mainChart.setOption(option); | |
mainChart.on('click', {seriesName: 'experiments'}, function (params) { | |
graphChart.clear(); | |
plotGraph(params.dataIndex); | |
}); | |
} | |
function plotGraph(idx) { | |
var data = graphs[idx]; | |
var max = 0 | |
var min = Number.MAX_SAFE_INTEGER | |
var option = {} | |
var nodes = []; | |
var edges = []; | |
$.each(data, function (n, peers) { | |
$.each(peers, function (m, bw) { | |
max = Math.max(max, bw) | |
min = Math.min(min, bw) | |
}); | |
}); | |
var i = 0; | |
$.each(data, function (n, peers) { | |
r = Math.floor(Math.min(200,100 + Math.random() * 156)); | |
g = Math.floor(Math.min(200, 100 + Math.random() * 156)); | |
b = Math.floor(Math.min(200, 100 + Math.random() * 156)); | |
nodes.push( | |
{ | |
name: n, | |
label: { | |
show: true, | |
position: 'inside', | |
fontSize: 20 | |
}, | |
symbolSize: 50, | |
itemStyle: { | |
color: 'rgb('+r+','+g+','+b+')' | |
} | |
} | |
); | |
var j = 0; | |
$.each(peers, function (m, bw) { | |
if (i != j && bw != 0) { | |
edges.push( | |
{ | |
source: n, | |
target: j, | |
lineStyle: { | |
width: 1, | |
curveness: 0.05, | |
opacity: 0.05 + ((bw-min)/(max-min)*0.3), | |
color: '#444' | |
}, | |
label: { | |
show: true, | |
position: 'middle', | |
fontSize: '20', | |
opacity: 1, | |
color: '#000', | |
formatter: function () { | |
return Math.floor(bw / 100) + " KB"; | |
} | |
} | |
} | |
); | |
} | |
j++ | |
}); | |
i++; | |
}); | |
var datas = []; | |
datas.push({ | |
nodes: nodes, | |
edges: edges | |
}); | |
option = { | |
title: { | |
text: 'Bandwidth usage', | |
subtext: "(#nodes = " + dataset[idx]["nodes"] + ", propagation rate = " + dataset[idx]["propagation_rate"] + ")", | |
left: 'center' | |
}, | |
tooltip: {}, | |
animationDurationUpdate: 1500, | |
animationEasingUpdate: 'quinticInOut', | |
series: { | |
name: 'graph', | |
type: 'graph', | |
layout: 'circular', | |
data: nodes, | |
links: edges, | |
roam: true, | |
edgeSymbol: ['circle', 'arrow'], | |
edgeSymbolSize: [4, 10], | |
labelLayout: { | |
hideOverlap: true | |
}, | |
emphasis: { | |
focus: 'self' | |
}, | |
} | |
} | |
option && graphChart.setOption(option); | |
} | |
jQuery.get( | |
'https://gist.githubusercontent.com/otrack/44d6d737c9096dae029add3d0300f441/raw/1867c40b45117ad43e92d1ce357880163354d47d/deg10.csv?'+Math.random(), | |
function (csv) { | |
var lines = csv.split("\n"); | |
var results = []; | |
headers=lines[0].split(";"); | |
for(var i=1; i<lines.length; i++){ | |
var obj = {}; | |
var currentline=lines[i].split(";"); | |
// skip empty lines | |
if (currentline.length > 1) { | |
for(var j=0; j<headers.length-1; j++){ | |
obj[headers[j]] = currentline[j]; | |
} | |
dataset.push(JSON.parse(JSON.stringify(obj))); | |
var graph = JSON.parse(currentline[j]); | |
graphs.push(graph); | |
} | |
} | |
var dropdown = document.getElementsByClassName('dropdown-content')[0]; | |
for(var i=1; i<headers.length; i++){ | |
if ( i != 0 && i != 1 && i != headers.length-1 ) { | |
console.log(headers[i]); | |
var child = document.createElement('a'); | |
child.setAttribute('onClick',"plotExperiments(\'"+headers[i]+"\')"); | |
child.innerHTML = headersMap[headers[i]]; | |
dropdown.appendChild(child); | |
} | |
} | |
plotExperiments('overhead') | |
plotGraph(0) | |
} | |
); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment