Skip to content

Instantly share code, notes, and snippets.

@nitaku

nitaku/README.md

Last active November 9, 2016 13:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save nitaku/f9bb87289ab566a36cc4ebd73df8881a to your computer and use it in GitHub Desktop.
Save nitaku/f9bb87289ab566a36cc4ebd73df8881a to your computer and use it in GitHub Desktop.
Download ZIP
Rectangular adjacency matrix II
Raw
index.coffee
# DATA
links = [
{a: 'Italy', b: 'Italian'},
{a: 'Germany', b: 'German'},
{a: 'France', b: 'French'},
{a: 'Spain', b: 'Spanish'},
{a: 'Switzerland', b: 'Italian'},
{a: 'Switzerland', b: 'German'},
{a: 'Switzerland', b: 'French'}
]
a_ids = (d3.set (links.map (d) -> d.a)).values()
b_ids = (d3.set (links.map (d) -> d.b)).values()
# LAYOUT
# try to fit this rectangle with the matrix
matrix_w = 400
matrix_h = 400
a_n = a_ids.length
b_n = b_ids.length
cellsize = Math.min matrix_w/b_n, matrix_h/a_n # beware! a is y and b is x!
a_ids.sort()
b_ids.sort()
x = d3.scaleBand()
.domain b_ids # beware! a is y and b is x!
.range [-cellsize*b_n/2, cellsize*b_n/2] # centered in (0,0)
y = d3.scaleBand()
.domain a_ids
.range [-cellsize*a_n/2, cellsize*a_n/2]
# VIS
svg = d3.select 'svg'
width = svg.node().getBoundingClientRect().width
height = svg.node().getBoundingClientRect().height
# center the vis on (0,0)
vis = svg.append 'g'
.attrs
transform: "translate(#{width/2},#{height/2})"
# draw a background
background = vis.append 'rect'
.attrs
class: 'background'
x: x.range()[0]
y: y.range()[0]
width: x.range()[1]-x.range()[0]
height: y.range()[1]-y.range()[0]
# draw cells
cells = vis.selectAll '.cell'
.data links, (d) -> "#{d.a}--#{d.b}"
en_cells = cells.enter().append 'rect'
.attrs
class: 'cell'
all_cells = en_cells.merge cells
all_cells
.attrs
x: (d) -> x(d.b) + 0.5
y: (d) -> y(d.a) + 0.5
width: x.bandwidth()-1
height: y.bandwidth()-1
cells.exit().remove()
# draw row labels
a_labels = vis.selectAll '.a_label'
.data a_ids
en_a_labels = a_labels.enter().append 'text'
.attrs
class: 'a_label'
all_a_labels = en_a_labels.merge a_labels
all_a_labels
.text (d) -> d
.attrs
dy: '0.35em'
x: x.range()[0] - 8
y: (d) -> y(d) + y.bandwidth()/2
a_labels.exit().remove()
# draw column labels
b_labels = vis.selectAll '.b_label'
.data b_ids
en_b_labels = b_labels.enter().append 'text'
.attrs
class: 'b_label'
all_b_labels = en_b_labels.merge b_labels
all_b_labels
.text (d) -> d
.attrs
x: (d) -> x(d) + x.bandwidth()/2
y: y.range()[0] - 8
b_labels.exit().remove()
Raw
index.css
body, html {
padding: 0;
margin: 0;
height: 100%;
}
svg {
width: 100%;
height: 100%;
background: white;
}
.background {
fill: #EEE;
}
.cell {
fill: teal;
shape-rendering: crispEdges;
}
.a_label, .b_label {
font-family: sans-serif;
font-size: 14px;
}
.a_label {
text-anchor: end;
}
.b_label {
text-anchor: middle;
}
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Rectangular adjacency matrix II</title>
<link type="text/css" href="index.css" rel="stylesheet"/>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v0.4.min.js"></script>
</head>
<body>
<svg></svg>
<script src="index.js"></script>
</body>
</html>
Raw
index.js
// Generated by CoffeeScript 1.10.0
(function() {
var a_ids, a_labels, a_n, all_a_labels, all_b_labels, all_cells, b_ids, b_labels, b_n, background, cells, cellsize, en_a_labels, en_b_labels, en_cells, height, links, matrix_h, matrix_w, svg, vis, width, x, y;
links = [
{
a: 'Italy',
b: 'Italian'
}, {
a: 'Germany',
b: 'German'
}, {
a: 'France',
b: 'French'
}, {
a: 'Spain',
b: 'Spanish'
}, {
a: 'Switzerland',
b: 'Italian'
}, {
a: 'Switzerland',
b: 'German'
}, {
a: 'Switzerland',
b: 'French'
}
];
a_ids = (d3.set(links.map(function(d) {
return d.a;
}))).values();
b_ids = (d3.set(links.map(function(d) {
return d.b;
}))).values();
matrix_w = 400;
matrix_h = 400;
a_n = a_ids.length;
b_n = b_ids.length;
cellsize = Math.min(matrix_w / b_n, matrix_h / a_n);
a_ids.sort();
b_ids.sort();
x = d3.scaleBand().domain(b_ids).range([-cellsize * b_n / 2, cellsize * b_n / 2]);
y = d3.scaleBand().domain(a_ids).range([-cellsize * a_n / 2, cellsize * a_n / 2]);
svg = d3.select('svg');
width = svg.node().getBoundingClientRect().width;
height = svg.node().getBoundingClientRect().height;
vis = svg.append('g').attrs({
transform: "translate(" + (width / 2) + "," + (height / 2) + ")"
});
background = vis.append('rect').attrs({
"class": 'background',
x: x.range()[0],
y: y.range()[0],
width: x.range()[1] - x.range()[0],
height: y.range()[1] - y.range()[0]
});
cells = vis.selectAll('.cell').data(links, function(d) {
return d.a + "--" + d.b;
});
en_cells = cells.enter().append('rect').attrs({
"class": 'cell'
});
all_cells = en_cells.merge(cells);
all_cells.attrs({
x: function(d) {
return x(d.b) + 0.5;
},
y: function(d) {
return y(d.a) + 0.5;
},
width: x.bandwidth() - 1,
height: y.bandwidth() - 1
});
cells.exit().remove();
a_labels = vis.selectAll('.a_label').data(a_ids);
en_a_labels = a_labels.enter().append('text').attrs({
"class": 'a_label'
});
all_a_labels = en_a_labels.merge(a_labels);
all_a_labels.text(function(d) {
return d;
}).attrs({
dy: '0.35em',
x: x.range()[0] - 8,
y: function(d) {
return y(d) + y.bandwidth() / 2;
}
});
a_labels.exit().remove();
b_labels = vis.selectAll('.b_label').data(b_ids);
en_b_labels = b_labels.enter().append('text').attrs({
"class": 'b_label'
});
all_b_labels = en_b_labels.merge(b_labels);
all_b_labels.text(function(d) {
return d;
}).attrs({
x: function(d) {
return x(d) + x.bandwidth() / 2;
},
y: y.range()[0] - 8
});
b_labels.exit().remove();
}).call(this);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment