Skip to content

Instantly share code, notes, and snippets.

@jlafon

jlafon/centralized.csv

Last active January 2, 2016 08:19
Show Gist options
  • Save jlafon/8275964 to your computer and use it in GitHub Desktop.
Save jlafon/8275964 to your computer and use it in GitHub Desktop.
Download ZIP
Heatmap using D3 with legend.
Raw
centralized.csv
We can make this file beautiful and searchable if this error is corrected: No commas found in this CSV file in line 0.
Sender Receiver Bytes
0 0 0
0 1 1416764092
0 2 4098253320
0 3 2106916386
0 4 1262617412
0 5 1059002706
0 6 891019678
0 7 719843912
0 8 794784178
0 9 705375450
0 10 633794346
0 11 545948094
0 12 557540490
0 13 540263648
0 14 498643870
0 15 511809624
0 16 554348884
0 17 550255516
0 18 523935306
0 19 484032112
0 20 507731712
0 21 523864308
0 22 514341244
0 23 475911560
0 24 495823644
0 25 486259456
0 26 471343942
0 27 446707372
0 28 536274564
0 29 569101028
0 30 500390494
0 31 534429930
1 0 23106442962
1 1 0
1 2 0
1 3 0
1 4 0
1 5 0
1 6 0
1 7 0
1 8 0
1 9 0
1 10 0
1 11 0
1 12 0
1 13 0
1 14 0
1 15 0
1 16 0
1 17 0
1 18 0
1 19 0
1 20 0
1 21 0
1 22 0
1 23 0
1 24 0
1 25 0
1 26 0
1 27 0
1 28 0
1 29 0
1 30 0
1 31 0
2 0 610495002
2 1 0
2 2 0
2 3 0
2 4 0
2 5 0
2 6 0
2 7 0
2 8 0
2 9 0
2 10 0
2 11 0
2 12 0
2 13 0
2 14 0
2 15 0
2 16 0
2 17 0
2 18 0
2 19 0
2 20 0
2 21 0
2 22 0
2 23 0
2 24 0
2 25 0
2 26 0
2 27 0
2 28 0
2 29 0
2 30 0
2 31 0
3 0 160505722
3 1 0
3 2 0
3 3 0
3 4 0
3 5 0
3 6 0
3 7 0
3 8 0
3 9 0
3 10 0
3 11 0
3 12 0
3 13 0
3 14 0
3 15 0
3 16 0
3 17 0
3 18 0
3 19 0
3 20 0
3 21 0
3 22 0
3 23 0
3 24 0
3 25 0
3 26 0
3 27 0
3 28 0
3 29 0
3 30 0
3 31 0
4 0 70361538
4 1 0
4 2 0
4 3 0
4 4 0
4 5 0
4 6 0
4 7 0
4 8 0
4 9 0
4 10 0
4 11 0
4 12 0
4 13 0
4 14 0
4 15 0
4 16 0
4 17 0
4 18 0
4 19 0
4 20 0
4 21 0
4 22 0
4 23 0
4 24 0
4 25 0
4 26 0
4 27 0
4 28 0
4 29 0
4 30 0
4 31 0
5 0 56677892
5 1 0
5 2 0
5 3 0
5 4 0
5 5 0
5 6 0
5 7 0
5 8 0
5 9 0
5 10 0
5 11 0
5 12 0
5 13 0
5 14 0
5 15 0
5 16 0
5 17 0
5 18 0
5 19 0
5 20 0
5 21 0
5 22 0
5 23 0
5 24 0
5 25 0
5 26 0
5 27 0
5 28 0
5 29 0
5 30 0
5 31 0
6 0 63926386
6 1 0
6 2 0
6 3 0
6 4 0
6 5 0
6 6 0
6 7 0
6 8 0
6 9 0
6 10 0
6 11 0
6 12 0
6 13 0
6 14 0
6 15 0
6 16 0
6 17 0
6 18 0
6 19 0
6 20 0
6 21 0
6 22 0
6 23 0
6 24 0
6 25 0
6 26 0
6 27 0
6 28 0
6 29 0
6 30 0
6 31 0
7 0 31849816
7 1 0
7 2 0
7 3 0
7 4 0
7 5 0
7 6 0
7 7 0
7 8 0
7 9 0
7 10 0
7 11 0
7 12 0
7 13 0
7 14 0
7 15 0
7 16 0
7 17 0
7 18 0
7 19 0
7 20 0
7 21 0
7 22 0
7 23 0
7 24 0
7 25 0
7 26 0
7 27 0
7 28 0
7 29 0
7 30 0
7 31 0
8 0 32826998
8 1 0
8 2 0
8 3 0
8 4 0
8 5 0
8 6 0
8 7 0
8 8 0
8 9 0
8 10 0
8 11 0
8 12 0
8 13 0
8 14 0
8 15 0
8 16 0
8 17 0
8 18 0
8 19 0
8 20 0
8 21 0
8 22 0
8 23 0
8 24 0
8 25 0
8 26 0
8 27 0
8 28 0
8 29 0
8 30 0
8 31 0
9 0 30718716
9 1 0
9 2 0
9 3 0
9 4 0
9 5 0
9 6 0
9 7 0
9 8 0
9 9 0
9 10 0
9 11 0
9 12 0
9 13 0
9 14 0
9 15 0
9 16 0
9 17 0
9 18 0
9 19 0
9 20 0
9 21 0
9 22 0
9 23 0
9 24 0
9 25 0
9 26 0
9 27 0
9 28 0
9 29 0
9 30 0
9 31 0
10 0 19137146
10 1 0
10 2 0
10 3 0
10 4 0
10 5 0
10 6 0
10 7 0
10 8 0
10 9 0
10 10 0
10 11 0
10 12 0
10 13 0
10 14 0
10 15 0
10 16 0
10 17 0
10 18 0
10 19 0
10 20 0
10 21 0
10 22 0
10 23 0
10 24 0
10 25 0
10 26 0
10 27 0
10 28 0
10 29 0
10 30 0
10 31 0
11 0 15596010
11 1 0
11 2 0
11 3 0
11 4 0
11 5 0
11 6 0
11 7 0
11 8 0
11 9 0
11 10 0
11 11 0
11 12 0
11 13 0
11 14 0
11 15 0
11 16 0
11 17 0
11 18 0
11 19 0
11 20 0
11 21 0
11 22 0
11 23 0
11 24 0
11 25 0
11 26 0
11 27 0
11 28 0
11 29 0
11 30 0
11 31 0
12 0 20192340
12 1 0
12 2 0
12 3 0
12 4 0
12 5 0
12 6 0
12 7 0
12 8 0
12 9 0
12 10 0
12 11 0
12 12 0
12 13 0
12 14 0
12 15 0
12 16 0
12 17 0
12 18 0
12 19 0
12 20 0
12 21 0
12 22 0
12 23 0
12 24 0
12 25 0
12 26 0
12 27 0
12 28 0
12 29 0
12 30 0
12 31 0
13 0 10711718
13 1 0
13 2 0
13 3 0
13 4 0
13 5 0
13 6 0
13 7 0
13 8 0
13 9 0
13 10 0
13 11 0
13 12 0
13 13 0
13 14 0
13 15 0
13 16 0
13 17 0
13 18 0
13 19 0
13 20 0
13 21 0
13 22 0
13 23 0
13 24 0
13 25 0
13 26 0
13 27 0
13 28 0
13 29 0
13 30 0
13 31 0
14 0 13247168
14 1 0
14 2 0
14 3 0
14 4 0
14 5 0
14 6 0
14 7 0
14 8 0
14 9 0
14 10 0
14 11 0
14 12 0
14 13 0
14 14 0
14 15 0
14 16 0
14 17 0
14 18 0
14 19 0
14 20 0
14 21 0
14 22 0
14 23 0
14 24 0
14 25 0
14 26 0
14 27 0
14 28 0
14 29 0
14 30 0
14 31 0
15 0 18247100
15 1 0
15 2 0
15 3 0
15 4 0
15 5 0
15 6 0
15 7 0
15 8 0
15 9 0
15 10 0
15 11 0
15 12 0
15 13 0
15 14 0
15 15 0
15 16 0
15 17 0
15 18 0
15 19 0
15 20 0
15 21 0
15 22 0
15 23 0
15 24 0
15 25 0
15 26 0
15 27 0
15 28 0
15 29 0
15 30 0
15 31 0
16 0 18990280
16 1 0
16 2 0
16 3 0
16 4 0
16 5 0
16 6 0
16 7 0
16 8 0
16 9 0
16 10 0
16 11 0
16 12 0
16 13 0
16 14 0
16 15 0
16 16 0
16 17 0
16 18 0
16 19 0
16 20 0
16 21 0
16 22 0
16 23 0
16 24 0
16 25 0
16 26 0
16 27 0
16 28 0
16 29 0
16 30 0
16 31 0
17 0 12903490
17 1 0
17 2 0
17 3 0
17 4 0
17 5 0
17 6 0
17 7 0
17 8 0
17 9 0
17 10 0
17 11 0
17 12 0
17 13 0
17 14 0
17 15 0
17 16 0
17 17 0
17 18 0
17 19 0
17 20 0
17 21 0
17 22 0
17 23 0
17 24 0
17 25 0
17 26 0
17 27 0
17 28 0
17 29 0
17 30 0
17 31 0
18 0 17275910
18 1 0
18 2 0
18 3 0
18 4 0
18 5 0
18 6 0
18 7 0
18 8 0
18 9 0
18 10 0
18 11 0
18 12 0
18 13 0
18 14 0
18 15 0
18 16 0
18 17 0
18 18 0
18 19 0
18 20 0
18 21 0
18 22 0
18 23 0
18 24 0
18 25 0
18 26 0
18 27 0
18 28 0
18 29 0
18 30 0
18 31 0
19 0 9624686
19 1 0
19 2 0
19 3 0
19 4 0
19 5 0
19 6 0
19 7 0
19 8 0
19 9 0
19 10 0
19 11 0
19 12 0
19 13 0
19 14 0
19 15 0
19 16 0
19 17 0
19 18 0
19 19 0
19 20 0
19 21 0
19 22 0
19 23 0
19 24 0
19 25 0
19 26 0
19 27 0
19 28 0
19 29 0
19 30 0
19 31 0
20 0 19176028
20 1 0
20 2 0
20 3 0
20 4 0
20 5 0
20 6 0
20 7 0
20 8 0
20 9 0
20 10 0
20 11 0
20 12 0
20 13 0
20 14 0
20 15 0
20 16 0
20 17 0
20 18 0
20 19 0
20 20 0
20 21 0
20 22 0
20 23 0
20 24 0
20 25 0
20 26 0
20 27 0
20 28 0
20 29 0
20 30 0
20 31 0
21 0 14517602
21 1 0
21 2 0
21 3 0
21 4 0
21 5 0
21 6 0
21 7 0
21 8 0
21 9 0
21 10 0
21 11 0
21 12 0
21 13 0
21 14 0
21 15 0
21 16 0
21 17 0
21 18 0
21 19 0
21 20 0
21 21 0
21 22 0
21 23 0
21 24 0
21 25 0
21 26 0
21 27 0
21 28 0
21 29 0
21 30 0
21 31 0
22 0 25347724
22 1 0
22 2 0
22 3 0
22 4 0
22 5 0
22 6 0
22 7 0
22 8 0
22 9 0
22 10 0
22 11 0
22 12 0
22 13 0
22 14 0
22 15 0
22 16 0
22 17 0
22 18 0
22 19 0
22 20 0
22 21 0
22 22 0
22 23 0
22 24 0
22 25 0
22 26 0
22 27 0
22 28 0
22 29 0
22 30 0
22 31 0
23 0 11748116
23 1 0
23 2 0
23 3 0
23 4 0
23 5 0
23 6 0
23 7 0
23 8 0
23 9 0
23 10 0
23 11 0
23 12 0
23 13 0
23 14 0
23 15 0
23 16 0
23 17 0
23 18 0
23 19 0
23 20 0
23 21 0
23 22 0
23 23 0
23 24 0
23 25 0
23 26 0
23 27 0
23 28 0
23 29 0
23 30 0
23 31 0
24 0 16868502
24 1 0
24 2 0
24 3 0
24 4 0
24 5 0
24 6 0
24 7 0
24 8 0
24 9 0
24 10 0
24 11 0
24 12 0
24 13 0
24 14 0
24 15 0
24 16 0
24 17 0
24 18 0
24 19 0
24 20 0
24 21 0
24 22 0
24 23 0
24 24 0
24 25 0
24 26 0
24 27 0
24 28 0
24 29 0
24 30 0
24 31 0
25 0 13369354
25 1 0
25 2 0
25 3 0
25 4 0
25 5 0
25 6 0
25 7 0
25 8 0
25 9 0
25 10 0
25 11 0
25 12 0
25 13 0
25 14 0
25 15 0
25 16 0
25 17 0
25 18 0
25 19 0
25 20 0
25 21 0
25 22 0
25 23 0
25 24 0
25 25 0
25 26 0
25 27 0
25 28 0
25 29 0
25 30 0
25 31 0
26 0 13200128
26 1 0
26 2 0
26 3 0
26 4 0
26 5 0
26 6 0
26 7 0
26 8 0
26 9 0
26 10 0
26 11 0
26 12 0
26 13 0
26 14 0
26 15 0
26 16 0
26 17 0
26 18 0
26 19 0
26 20 0
26 21 0
26 22 0
26 23 0
26 24 0
26 25 0
26 26 0
26 27 0
26 28 0
26 29 0
26 30 0
26 31 0
27 0 9923536
27 1 0
27 2 0
27 3 0
27 4 0
27 5 0
27 6 0
27 7 0
27 8 0
27 9 0
27 10 0
27 11 0
27 12 0
27 13 0
27 14 0
27 15 0
27 16 0
27 17 0
27 18 0
27 19 0
27 20 0
27 21 0
27 22 0
27 23 0
27 24 0
27 25 0
27 26 0
27 27 0
27 28 0
27 29 0
27 30 0
27 31 0
28 0 29637524
28 1 0
28 2 0
28 3 0
28 4 0
28 5 0
28 6 0
28 7 0
28 8 0
28 9 0
28 10 0
28 11 0
28 12 0
28 13 0
28 14 0
28 15 0
28 16 0
28 17 0
28 18 0
28 19 0
28 20 0
28 21 0
28 22 0
28 23 0
28 24 0
28 25 0
28 26 0
28 27 0
28 28 0
28 29 0
28 30 0
28 31 0
29 0 16314678
29 1 0
29 2 0
29 3 0
29 4 0
29 5 0
29 6 0
29 7 0
29 8 0
29 9 0
29 10 0
29 11 0
29 12 0
29 13 0
29 14 0
29 15 0
29 16 0
29 17 0
29 18 0
29 19 0
29 20 0
29 21 0
29 22 0
29 23 0
29 24 0
29 25 0
29 26 0
29 27 0
29 28 0
29 29 0
29 30 0
29 31 0
30 0 15893186
30 1 0
30 2 0
30 3 0
30 4 0
30 5 0
30 6 0
30 7 0
30 8 0
30 9 0
30 10 0
30 11 0
30 12 0
30 13 0
30 14 0
30 15 0
30 16 0
30 17 0
30 18 0
30 19 0
30 20 0
30 21 0
30 22 0
30 23 0
30 24 0
30 25 0
30 26 0
30 27 0
30 28 0
30 29 0
30 30 0
30 31 0
31 0 18624438
31 1 0
31 2 0
31 3 0
31 4 0
31 5 0
31 6 0
31 7 0
31 8 0
31 9 0
31 10 0
31 11 0
31 12 0
31 13 0
31 14 0
31 15 0
31 16 0
31 17 0
31 18 0
31 19 0
31 20 0
31 21 0
31 22 0
31 23 0
31 24 0
31 25 0
31 26 0
31 27 0
31 28 0
31 29 0
31 30 0
31 31 0
Raw
drqs.csv
We can make this file beautiful and searchable if this error is corrected: No commas found in this CSV file in line 0.
Sender Receiver Bytes
0 0 0
0 1 1337735
0 2 1498089
0 3 1927158
0 4 954470
0 5 1059291
0 6 337230
0 7 1196630
1 0 920993
1 1 0
1 2 68509952
1 3 24007175
1 4 294988
1 5 33621593
1 6 746257
1 7 3212629
2 0 3064254
2 1 36162185
2 2 0
2 3 2552097
2 4 140083
2 5 503400
2 6 3624428
2 7 984222
3 0 12371778
3 1 71141164
3 2 39918684
3 3 0
3 4 165707
3 5 1998975
3 6 523288
3 7 254694
4 0 5878690
4 1 3743080
4 2 1084812
4 3 89613280
4 4 0
4 5 2189278
4 6 43995619
4 7 823902
5 0 52302944
5 1 11820707
5 2 23220812
5 3 8316031
5 4 38104169
5 5 0
5 6 1027855
5 7 1455038
6 0 4636646
6 1 12330615
6 2 3741502
6 3 6500068
6 4 219557981
6 5 3391134
6 6 0
6 7 104803858
7 0 12262082
7 1 2535301
7 2 2735266
7 3 22877396
7 4 3142736
7 5 3213889
7 6 341987
7 7 0
Raw
heatmap.js
function heatMap(csvFile, elementID) {
// Constants
var margin = {
top: 80,
right: 0,
bottom: 10,
left: 80
};
width = 520;
height = 520;
// Create and attach top level svg
var svg = d3.select(elementID)
.append('svg')
.attr('width', width + margin.left + margin.right)
.attr('height', height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("text")
.attr("class", "chartTitle")
.attr("text-anchor", "middle")
.attr("transform", "translate(" + width / 2 + "," + -margin.top / 2 + ")")
.text("Receiving Rank");
svg.append("text")
.attr("class", "chartTitle")
.attr("text-anchor", "middle")
.attr("transform", "translate(" + -margin.left / 2 + "," + height / 2 + ")rotate(-90)")
.text("Sending Rank");
var legendHeight = 20;
var legendWidth = width + margin.left + margin.right;
var legendId = 'legendGradient';
var legend = d3.select(elementID).append("div").append("svg:svg")
.attr("width", legendWidth)
.attr("height", legendHeight);
var gradientID = elementID + "-gradient";
if (gradientID.substring(0, 1) == '#') {
gradientID = gradientID.substr(1, gradientID.length);
}
console.log(gradientID);
var gradient = svg.append("svg:defs")
.append("svg:linearGradient")
.attr("id", gradientID)
.attr("x1", "0%")
.attr("y1", "0%")
.attr("x2", "100%")
.attr("y2", "0%")
.attr("spreadMethod", "pad");
gradient.append("svg:stop")
.attr("offset", "0%")
.attr("stop-color", "#5ff4ff")
.attr("stop-opacity", 1);
gradient.append("svg:stop")
.attr("offset", "100%")
.attr("stop-color", "#c42bd4")
.attr("stop-opacity", 1);
legend.append("svg:rect")
.attr("width", legendWidth)
.attr("height", legendHeight)
.style("fill", "url(#" + gradientID + ")")
.attr("transform", "translate(" + margin.left + ",0)");
var cellValue = d3.select('body').append("div")
.style("position", "absolute")
.style("opacity", 1e-6)
.attr("class", "tooltip");
// Map the ranks to a bands
var x = d3.scale.ordinal().rangeBands([0, width]);
var z = d3.scale.linear().range([0, 1]).clamp(true);
var c = d3.scale.linear().range(["#5ff4ff", "#c42bd4"]);
function formatBytes(bytes) {
var sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
if (bytes == 0) return '0 Bytes';
var i = parseInt(Math.floor(Math.log(bytes) / Math.log(1024)));
return Math.round(bytes / Math.pow(1024, i), 2) + ' ' + sizes[i];
}
// Build a space delimited parser and parse the CSV
var parser = d3.dsv(" ", "text/plain")
var points = parser(csvFile)
.row(function(d) {
return {
Sender: +d.Sender,
Receiver: +d.Receiver,
Bytes: +d.Bytes
};
})
.get(function(error, rows) {
var rankCount = Math.sqrt(rows.length);
var xScale = d3.scale.linear()
.domain([0, rankCount])
.range([0, width]);
var yScale = d3.scale.linear()
.domain([0, rankCount])
.range([height, 0]);
var matrix = [];
var row_idx = 0;
for (var i = 0; i < rankCount; i++) {
matrix[i] = [];
for (var j = 0; j < rankCount; j++) {
matrix[i][j] = [];
}
}
rows.forEach(function(row, i) {
matrix[row.Sender][row.Receiver] = {
"sender": row.Sender,
"receiver": row.Receiver,
"bytes": row.Bytes
};
});
// Apply color gradient domain
var extent = d3.extent(rows, function(d) {
return d.Bytes;
});
var min = extent[0];
var max = extent[1];
c.domain([min, (min + max) / 2, max]);
legend.append("text")
.attr("class", "legendText")
.attr("text-anchor", "end")
.attr("y", legendHeight - 5)
.attr("x", legendWidth - margin.right - 10)
.text(formatBytes(max));
legend.append("text")
.attr("class", "legendText")
.attr("y", legendHeight - 5)
.attr("x", margin.left + 10)
.text(formatBytes(min));
// Apply the rankCount as the domain for x
x.domain(d3.range(rankCount));
svg.append("rect")
.attr("class", "background")
.attr("width", width)
.attr("height", height)
.style("fill", "#eee");
var row = svg.selectAll(".row")
.data(matrix)
.enter().append("g")
.attr("class", "row")
.attr("transform", function(d, i) {
return "translate(0," + x(i) + ")";
})
.each(rowFunc);
function rowFunc(rowObject) {
var cell = d3.select(this).selectAll(".cell")
.data(rowObject)
.enter().append("rect")
.attr("class", "cell")
.attr("x", function(d, i) {
return x(i);
})
.attr("width", x.rangeBand())
.attr("height", x.rangeBand())
.style("fill-opacity", function(d) {
return z(d.bytes);
})
.style("fill", function(d) {
return c(d.bytes);
})
.on("mousemove", mouseMove)
.on("mouseover", mouseOver)
.on("mouseout", mouseOut);
}
function mouseOver(evt) {
cellValue.transition()
.duration(300)
.style('opacity', 1);
}
function mouseOut(evt) {
cellValue.transition()
.duration(300)
.style('opacity', 1e-6);
d3.selectAll(".row text").classed("active", false);
d3.selectAll(".column text").classed("active", false);
}
function mouseMove(evt) {
cellValue.text("Rank " + evt.sender + " to " + evt.receiver + ": " + formatBytes(evt.bytes));
cellValue.style("left", (d3.event.pageX) + "px");
cellValue.style("top", (d3.event.pageY) + "px");
d3.selectAll(".row text").classed("active", function(d, i) {
return evt.sender == i;
});
d3.selectAll(".column text").classed("active", function(d, i) {
return evt.receiver == i;
})
}
row.append("line")
.attr("x2", width)
.attr("stroke", "#fff");
row.append("text")
.attr("x", -6)
.attr("y", x.rangeBand() / 2)
.attr("dy", ".32em")
.attr("text-anchor", "end")
.text(function(d, i) {
return i;
});
var column = svg.selectAll(".column")
.data(matrix)
.enter().append("g")
.attr("class", "column")
.attr("transform", function(d, i) {
return "translate(" + x(i) + ")rotate(-90)";
});
column.append("line")
.attr("x1", -width)
.attr("stroke", "#fff");
column.append("text")
.attr("x", 6)
.attr("y", x.rangeBand() / 2)
.attr("dy", ".32em")
.attr("text-anchor", "start")
.text(function(d, i) {
return i;
});
});
}
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.active {
fill: red;
}
.tooltip {
position: absolute;
text-align: center;
width: 100px;
color:white;
padding: 8px;
font: 10px sans-serif;
background: black;
border: solid 1px #aaa;
pointer-events: none;
}
</style>
<body>
<div id="drqs"></div>
<div id="master-slave"></div>
<script src="http://d3js.org/d3.v3.js"></script>
<script src="heatmap.js"></script>
<script>
heatMap('centralized.csv', '#master-slave');
heatMap('drqs.csv', '#drqs');
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment