-
(function() {
var SIZE, height, matrix, simcolor, svg, width;
svg = d3.select('svg');
width = svg.node().getBoundingClientRect().width;
height = svg.node().getBoundingClientRect().height;
simcolor = d3.scale.linear().domain([0, 1]).range([d3.hcl(320, 0, 100), d3.hcl(320, 75, 25)]).interpolate(d3.interpolateHcl);
matrix = svg.append('g').attr('transform', 'translate(380,220)');
SIZE = 13;
d3.json('//wafi.iit.cnr.it/webvis/tmp/dbpedia/the_dark_side_of_the_moon_matrix.json', function(data) {
var cells, clusters, enter_rows, hlabels, index, items, matrix_data, rows, sequence, tree, vlabels;
index = {};
items = [];
data.forEach(function(e1) {
items.push(e1.k1);
index[e1.k1] = {};
return e1.similarities.forEach(function(e2) {
return index[e1.k1][e2.k2] = e2.sim;
});
});
console.debug('Computing hierarchical clustering...');
clusters = clusterfck.hcluster(items, function(a, b) {
return 1 - index[a][b];
}, clusterfck.SINGLE_LINKAGE);
tree = tree_utils.binary_to_std(clusters);
sequence = tree_utils.get_leaves(tree).map(function(d) {
return d.value;
});
matrix_data = [];
sequence.forEach(function(k1) {
var e1;
e1 = {
k1: k1,
similarities: []
};
matrix_data.push(e1);
return sequence.forEach(function(k2) {
return e1.similarities.push({
k2: k2,
sim: index[k1][k2]
});
});
});
rows = matrix.selectAll('.row').data(matrix_data);
enter_rows = rows.enter().append('g').attr('class', 'row').attr('transform', function(d, i) {
return "translate(0," + (SIZE * i) + ")";
});
cells = rows.selectAll('.cell').data(function(row) {
return row.similarities;
});
cells.enter().append('rect').attr('class', 'cell').attr('width', SIZE).attr('height', SIZE).attr('transform', function(d, i) {
return "translate(" + (SIZE * i) + ",0)";
}).attr('fill', function(d) {
return simcolor(d.sim);
}).append('title').text(function(d) {
var k1, k2;
k1 = d3.select(this.parentNode.parentNode).datum().k1.replace('http://dbpedia.org/resource/', '');
k2 = d.k2.replace('http://dbpedia.org/resource/', '');
return "" + k1 + "\n [" + (d3.format('%')(d.sim)) + "]\n" + k2;
});
matrix.append('rect').attr('class', 'border').attr('x', -1).attr('y', -1).attr('width', SIZE * matrix_data.length + 2).attr('height', SIZE * matrix_data.length + 2);
hlabels = matrix.selectAll('.hlabel').data(matrix_data);
hlabels.enter().append('a').attr('xlink:href', function(d) {
return d.k1;
}).append('text').attr('class', 'hlabel').text(function(d) {
return d.k1.replace('http://dbpedia.org/resource/', '');
}).attr('transform', function(d, i) {
return "translate(0," + (SIZE * i) + ")";
}).attr('dy', '1em').attr('dx', -6).classed('highlighted', function(d) {
return d.k1 === 'http://dbpedia.org/resource/The_Dark_Side_of_the_Moon';
});
vlabels = matrix.selectAll('.vlabel').data(matrix_data);
return vlabels.enter().append('a').attr('xlink:href', function(d) {
return d.k1;
}).append('text').attr('class', 'vlabel').text(function(d) {
return d.k1.replace('http://dbpedia.org/resource/', '');
}).attr('transform', function(d, i) {
return "translate(" + (SIZE * i) + ",0) rotate(-90)";
}).attr('dy', '1em').attr('dx', 6).classed('highlighted', function(d) {
return d.k1 === 'http://dbpedia.org/resource/The_Dark_Side_of_the_Moon';
});
});
}).call(this);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Duck Similarity (The Dark Side of the Moon)" />
<title>Duck Similarity (The Dark Side of the Moon)</title>
<link type="text/css" href="index.css" rel="stylesheet"/>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//wafi.iit.cnr.it/webvis/tmp/clusterfck.js"></script>
<script src="//wafi.iit.cnr.it/webvis/libs/jigmaps/zip.js"></script>
<script src="//wafi.iit.cnr.it/webvis/libs/jigmaps/tree_utils.js"></script>
</head>
<body>
<svg height="500" width="960"></svg>
<script src="index.js"></script>
</body>
</html>svg = d3.select('svg')
width = svg.node().getBoundingClientRect().width
height = svg.node().getBoundingClientRect().height
simcolor = d3.scale.linear()
.domain([0,1])
.range([d3.hcl(320,0,100),d3.hcl(320,75,25)])
.interpolate(d3.interpolateHcl)
matrix = svg.append('g')
.attr('transform', 'translate(380,220)')
SIZE = 13
d3.json '//wafi.iit.cnr.it/webvis/tmp/dbpedia/the_dark_side_of_the_moon_matrix.json', (data) ->
index = {}
items = []
data.forEach (e1) ->
items.push e1.k1
index[e1.k1] = {}
e1.similarities.forEach (e2) ->
index[e1.k1][e2.k2] = e2.sim
console.debug 'Computing hierarchical clustering...'
clusters = clusterfck.hcluster(
items,
(a,b) -> 1-index[a][b],
clusterfck.SINGLE_LINKAGE
)
tree = tree_utils.binary_to_std(clusters)
sequence = tree_utils.get_leaves(tree).map (d) -> d.value
matrix_data = []
sequence.forEach (k1) ->
e1 = {k1: k1, similarities: []}
matrix_data.push e1
sequence.forEach (k2) ->
e1.similarities.push {k2: k2, sim: index[k1][k2]}
rows = matrix.selectAll('.row')
.data(matrix_data)
enter_rows = rows.enter().append('g')
.attr('class', 'row')
.attr('transform', (d,i) -> "translate(0,#{SIZE*i})")
cells = rows.selectAll('.cell')
.data((row) -> row.similarities)
cells.enter().append('rect')
.attr('class', 'cell')
.attr('width', SIZE)
.attr('height', SIZE)
.attr('transform', (d, i) -> "translate(#{SIZE*i},0)")
.attr('fill', (d) -> simcolor(d.sim))
.append('title')
.text((d) ->
k1 = d3.select(this.parentNode.parentNode).datum().k1.replace('http://dbpedia.org/resource/','')
k2 = d.k2.replace('http://dbpedia.org/resource/','')
return "#{k1}\n [#{d3.format('%')(d.sim)}]\n#{k2}"
)
matrix.append('rect')
.attr('class','border')
.attr('x', -1)
.attr('y', -1)
.attr('width', SIZE*matrix_data.length+2)
.attr('height', SIZE*matrix_data.length+2)
hlabels = matrix.selectAll('.hlabel')
.data(matrix_data)
hlabels.enter().append('a')
.attr('xlink:href', (d) -> d.k1)
.append('text')
.attr('class','hlabel')
.text((d) -> d.k1.replace('http://dbpedia.org/resource/',''))
.attr('transform', (d,i) -> "translate(0,#{SIZE*i})")
.attr('dy', '1em')
.attr('dx', -6)
.classed('highlighted', (d) -> d.k1 is 'http://dbpedia.org/resource/The_Dark_Side_of_the_Moon')
vlabels = matrix.selectAll('.vlabel')
.data(matrix_data)
vlabels.enter().append('a')
.attr('xlink:href', (d) -> d.k1)
.append('text')
.attr('class','vlabel')
.text((d) -> d.k1.replace('http://dbpedia.org/resource/',''))
.attr('transform', (d,i) -> "translate(#{SIZE*i},0) rotate(-90)")
.attr('dy', '1em')
.attr('dx', 6)
.classed('highlighted', (d) -> d.k1 is 'http://dbpedia.org/resource/The_Dark_Side_of_the_Moon')
svg {
background: white;
}
.border {
stroke-width: 1;
stroke: #CCC;
fill: none;
shape-rendering: crispEdges;
}
.cell {
stroke-width: 1;
stroke: white;
shape-rendering: crispEdges;
}
.hlabel, .vlabel {
fill: #333;
font-family: sans-serif;
font-size: 10px;
}
.hlabel {
text-anchor: end;
}
.vlabel {
text-anchor: start;
}
.highlighted {
font-weight: bold;
fill: black;
}
.hlabel:hover, .vlabel:hover {
fill: red;
}