A different take on the previous experiment, this time using a color encoding and without complex cursors (hopefully resulting in a more readable code).
forked from nitaku's block: Half matrix II
A different take on the previous experiment, this time using a color encoding and without complex cursors (hopefully resulting in a more readable code).
forked from nitaku's block: Half matrix II
SIDE = 7 | |
DIST = 8 | |
svg = d3.select('svg') | |
width = svg.node().getBoundingClientRect().width | |
height = svg.node().getBoundingClientRect().height | |
vis = svg.append('g') | |
.attr | |
transform: "translate(#{width/2}, #{height-10})" | |
d3.json 'miserables.json', (data) -> | |
length = data.nodes.length | |
max = d3.max data.links, (d) -> d.value | |
cellcolor = (x) -> d3.hcl(270-40*x/max, 30-Math.pow(max/2-x,2)/400, 100-100*x/max) | |
# objectify the graph | |
data.links.forEach (l) -> | |
l.source = data.nodes[l.source] | |
l.target = data.nodes[l.target] | |
# store the index of the node within its object, in order to use it when placing link cells | |
data.nodes.forEach (d, i) -> | |
d.i = i | |
# draw the cells containing data | |
cells = vis.selectAll('.cell') | |
.data(data.links) | |
cells.enter().append('rect') | |
.attr | |
class: 'cell' | |
x: -SIDE/2 | |
y: -SIDE/2 | |
width: SIDE | |
height: SIDE | |
transform: (d) -> "rotate(-45) translate(#{(d.source.i-length/2)*DIST},#{(d.target.i-length/2)*DIST})" | |
fill: (d) -> cellcolor(d.value) | |
# draw the labels | |
PAD = 4 | |
labels_a = vis.selectAll('.label_a') | |
.data(data.nodes.slice(1)) # first label is useless, the diagonal is not shown | |
labels_a.enter().append('text') | |
.each((d) -> d.label_a = d3.select(this)) | |
.text((d) -> d.name) | |
.attr | |
class: 'label label_a' | |
dy: '0.35em' | |
transform: (d) -> "rotate(45) translate(#{-length/2*DIST-PAD-DIST/2},#{(-d.i+length/2)*DIST})" | |
labels_b = vis.selectAll('.label_b') | |
.data(data.nodes.slice(0,-1)) # last label is useless, the diagonal is not shown | |
labels_b.enter().append('text') | |
.each((d) -> d.label_b = d3.select(this)) | |
.text((d) -> d.name) | |
.attr | |
class: 'label label_b' | |
dy: '0.35em' | |
transform: (d) -> "rotate(-45) translate(#{length/2*DIST+PAD-DIST/2},#{(d.i-length/2)*DIST})" | |
# create "interactive" cells to show the cursors | |
icells = [] | |
d3.range(0, length).forEach (y) -> | |
d3.range(y+1, length).forEach (x) -> | |
icells.push {x: x, y: y, source: data.nodes[x], target: data.nodes[y]} | |
interactive_cells = vis.selectAll('.interactive_cell') | |
.data(icells) | |
interactive_cells.enter().append('rect') | |
.attr | |
class: 'interactive_cell' | |
x: -DIST/2 | |
y: -DIST/2 | |
width: DIST | |
height: DIST | |
transform: (d) -> "rotate(-45) translate(#{(d.x-length/2)*DIST},#{(d.y-length/2)*DIST})" | |
.on 'mouseenter', (d) -> | |
d.source.label_a.classed('highlighted_x', true) | |
d.target.label_b.classed('highlighted_y', true) | |
.on 'mouseleave', (d) -> | |
d.source.label_a.classed('highlighted_x', false) | |
d.target.label_b.classed('highlighted_y', false) |
@font-face { | |
font-family: "Lacuna"; | |
src: url("lacuna.ttf"); | |
} | |
.label { | |
font-family: "Lacuna"; | |
font-size: 8px; | |
} | |
.highlighted_x.label { | |
font-weight: bold; | |
fill: #E21975; | |
} | |
.highlighted_y.label { | |
font-weight: bold; | |
fill: #FF7100; | |
} | |
.label_a { | |
text-anchor: end; | |
} | |
.interactive_cell { | |
fill: transparent; | |
} | |
.interactive_cell:hover { | |
stroke: #FF3B1C; | |
} |
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<title>Half matrix for symmetrical relations</title> | |
<link type="text/css" href="index.css" rel="stylesheet"/> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
</head> | |
<body> | |
<svg height="500" width="960"></svg> | |
<script src="index.js"></script> | |
</body> | |
</html> |
// Generated by CoffeeScript 1.4.0 | |
(function() { | |
var DIST, SIDE, height, svg, vis, width; | |
SIDE = 7; | |
DIST = 8; | |
svg = d3.select('svg'); | |
width = svg.node().getBoundingClientRect().width; | |
height = svg.node().getBoundingClientRect().height; | |
vis = svg.append('g').attr({ | |
transform: "translate(" + (width / 2) + ", " + (height - 10) + ")" | |
}); | |
d3.json('miserables.json', function(data) { | |
var PAD, cellcolor, cells, icells, interactive_cells, labels_a, labels_b, length, max; | |
length = data.nodes.length; | |
max = d3.max(data.links, function(d) { | |
return d.value; | |
}); | |
cellcolor = function(x) { | |
return d3.hcl(270 - 40 * x / max, 30 - Math.pow(max / 2 - x, 2) / 400, 100 - 100 * x / max); | |
}; | |
data.links.forEach(function(l) { | |
l.source = data.nodes[l.source]; | |
return l.target = data.nodes[l.target]; | |
}); | |
data.nodes.forEach(function(d, i) { | |
return d.i = i; | |
}); | |
cells = vis.selectAll('.cell').data(data.links); | |
cells.enter().append('rect').attr({ | |
"class": 'cell', | |
x: -SIDE / 2, | |
y: -SIDE / 2, | |
width: SIDE, | |
height: SIDE, | |
transform: function(d) { | |
return "rotate(-45) translate(" + ((d.source.i - length / 2) * DIST) + "," + ((d.target.i - length / 2) * DIST) + ")"; | |
}, | |
fill: function(d) { | |
return cellcolor(d.value); | |
} | |
}); | |
PAD = 4; | |
labels_a = vis.selectAll('.label_a').data(data.nodes.slice(1)); | |
labels_a.enter().append('text').each(function(d) { | |
return d.label_a = d3.select(this); | |
}).text(function(d) { | |
return d.name; | |
}).attr({ | |
"class": 'label label_a', | |
dy: '0.35em', | |
transform: function(d) { | |
return "rotate(45) translate(" + (-length / 2 * DIST - PAD - DIST / 2) + "," + ((-d.i + length / 2) * DIST) + ")"; | |
} | |
}); | |
labels_b = vis.selectAll('.label_b').data(data.nodes.slice(0, -1)); | |
labels_b.enter().append('text').each(function(d) { | |
return d.label_b = d3.select(this); | |
}).text(function(d) { | |
return d.name; | |
}).attr({ | |
"class": 'label label_b', | |
dy: '0.35em', | |
transform: function(d) { | |
return "rotate(-45) translate(" + (length / 2 * DIST + PAD - DIST / 2) + "," + ((d.i - length / 2) * DIST) + ")"; | |
} | |
}); | |
icells = []; | |
d3.range(0, length).forEach(function(y) { | |
return d3.range(y + 1, length).forEach(function(x) { | |
return icells.push({ | |
x: x, | |
y: y, | |
source: data.nodes[x], | |
target: data.nodes[y] | |
}); | |
}); | |
}); | |
interactive_cells = vis.selectAll('.interactive_cell').data(icells); | |
return interactive_cells.enter().append('rect').attr({ | |
"class": 'interactive_cell', | |
x: -DIST / 2, | |
y: -DIST / 2, | |
width: DIST, | |
height: DIST, | |
transform: function(d) { | |
return "rotate(-45) translate(" + ((d.x - length / 2) * DIST) + "," + ((d.y - length / 2) * DIST) + ")"; | |
} | |
}).on('mouseenter', function(d) { | |
d.source.label_a.classed('highlighted_x', true); | |
return d.target.label_b.classed('highlighted_y', true); | |
}).on('mouseleave', function(d) { | |
d.source.label_a.classed('highlighted_x', false); | |
return d.target.label_b.classed('highlighted_y', false); | |
}); | |
}); | |
}).call(this); |