block by nitaku f9bb87289ab566a36cc4ebd73df8881a

Rectangular adjacency matrix II

Full Screen

Same as the previous example, with labels.

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);

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>

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()

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;
}