DIITET matrix with filtering

README.md

index.coffee

svg = d3.select 'svg'
width = svg.node().getBoundingClientRect().width
height = svg.node().getBoundingClientRect().height

matrix_space_width = 0.8 * width
matrix_space_height = 0.8 * height

# Group for zoomable content
zoomable_layer = svg.append('g')

# Zoom behavior definition
zoom = d3.behavior.zoom()
  .scaleExtent [0,Infinity]
  .on 'zoom', () ->
    zoomable_layer
      .attr
        transform: "translate(#{zoom.translate()})scale(#{zoom.scale()})"
    
svg.call(zoom)

matrix = zoomable_layer.append 'g'

# DATA
# ----

d3.csv "tema.csv", (data_a) ->
  data_a.sort (a,b) -> d3.ascending(a.area_progettuale_id, b.area_progettuale_id)
#   console.log data_a
#   areas = d3.nest()
#     .key (d) -> d.area_progettuale_id
#     .entries data_a

  data_a.forEach (d) -> d.label = d.tema_title
    
  d3.csv "istituto.csv", (data_b) ->
    data_b.sort (a,b) -> d3.ascending(a.dipartimento_id, b.dipartimento_id)
#     console.log data_b
    
#     departments = d3.nest()
#       .key (d) -> d.dipartimento_id
#       .entries data_b

    data_b.forEach (d) -> d.label = d.sigla
      
    d3.csv "istituto_tema.csv", (data_cells) ->
      data_cells.forEach (d) ->
        d.a_id = d.tema_id
        d.b_id = d.istituto_id
      
      # objectify the matrix
      data_a_index = {}
      data_a.forEach (d) -> data_a_index[d.id] = d

      data_b_index = {}
      data_b.forEach (d) -> data_b_index[d.id] = d

      data_cells.forEach (d) ->
        d.a = data_a_index[d.a_id]
        d.b = data_b_index[d.b_id]

      # selection functions
      selected =
        as: {}
        bs: {}

      toggle = (d, abs) ->
        if d.id of selected[abs]
          delete selected[abs][d.id]
        else
          selected[abs][d.id] = d

        update_selection()

      update_selection = () ->
        data_a.forEach (d) -> d.selected = d.id of selected.as or Object.keys(selected.as).length is 0

        data_b.forEach (d) -> d.selected = d.id of selected.bs or Object.keys(selected.bs).length is 0

        data_cells.forEach (d) -> d.selected = d.a.selected and d.b.selected

      update_selection()

      # FILTER
      # ------

      hide_unselected = false
      hide_empty = false

      # VIS
      # ---
      LABEL_PAD = 0.5
      ANIMATION_DURATION = 800
      
      cell = Math.min(matrix_space_width / data_b.length, matrix_space_height / data_a.length)
      
      matrix_width = cell * data_b.length
      matrix_height = cell * data_a.length
      
      matrix
        .attr
          transform: "translate(#{width/2-matrix_width/2},#{height/2-matrix_height/2})"

      redraw = () ->
        filtered_data_cells = data_cells
        filtered_data_a = data_a
        filtered_data_b = data_b
        
        if hide_unselected
          filtered_data_cells = filtered_data_cells.filter (d) -> d.selected
          filtered_data_a = filtered_data_a.filter (d) -> d.selected
          filtered_data_b = filtered_data_b.filter (d) -> d.selected
          
        # update pointers from headers to cells
        data_a.forEach (d) -> d.cells = []
        data_b.forEach (d) -> d.cells = []

        filtered_data_cells.forEach (d) ->
          d.a.cells.push d
          d.b.cells.push d
          
        if hide_empty
          filtered_data_a = filtered_data_a.filter (d) -> d.cells.length > 0
          filtered_data_b = filtered_data_b.filter (d) -> d.cells.length > 0

        # LAYOUT
        matrix_width = cell * filtered_data_b.length
        matrix_height = cell * filtered_data_a.length

        x = d3.scale.ordinal()
          .domain(filtered_data_b.map (d) -> d.id)
          .rangeBands([0, matrix_width])

        y = d3.scale.ordinal()
          .domain(filtered_data_a.map (d) -> d.id)
          .rangeBands([0, matrix_height])

      #   radius = d3.scale.sqrt()
      #     .domain([0, d3.max data_cells, (d) -> d.weight])
      #     .range([0, cell/2])

        # VIS

        cells = matrix.selectAll(".cell")
          .data filtered_data_cells, (d) -> "#{d.a.id}__#{d.b.id}"

        cells.enter().append("circle")
          .attr
            class: "cell"
            opacity: 0
          .append 'title'
            .text (d) -> "#{d.b.istituto_title}\n#{d.a.tema_title.trim()}"

        cells
          .classed 'selected', (d) -> d.selected

        # ANIMATIONS
        disable_controls()
        
        cells.exit().transition()
          .duration(ANIMATION_DURATION)
          .attr
            opacity: 0
          .remove()

        cells.transition()
          .delay(ANIMATION_DURATION)
          .duration(ANIMATION_DURATION)
          .attr
            cx: (d) -> x(d.b.id)+cell/2
            cy: (d) -> y(d.a.id)+cell/2
            r: cell/2
      #       r: (d) -> radius(d.weight)

        cells.transition()
          .delay(2*ANIMATION_DURATION)
          .duration(ANIMATION_DURATION)
          .attr
            opacity: 1
          .each 'end', () ->
            enable_controls()

        # labels
        x_labels = matrix.selectAll(".x_label")
          .data filtered_data_b, (d) -> d.id

        enter_x_labels = x_labels.enter().append("text")
          .text (d) -> d.label
          .attr
            class: "x_label"
            x: 0
            dy: '0.35em'
            opacity: 0
          .on 'click', (d) ->
            if not hide_unselected
              toggle(d,'bs')
              redraw()
              
        enter_x_labels.append 'title'
          .text (d) -> "#{d.istituto_title.trim()}"

        x_labels
          .classed 'selected', (d) -> d.selected

        # ANIMATIONS
        x_labels.exit().transition()
          .duration(ANIMATION_DURATION)
          .attr
            opacity: 0
          .remove()

        x_labels.transition()
          .delay(ANIMATION_DURATION)
          .duration(ANIMATION_DURATION)
          .attr
            transform: (d) -> "translate(#{x(d.id)+cell/2},#{-LABEL_PAD*cell}) rotate(-90) scale(#{cell})"

        enter_x_labels.transition()
          .delay(2*ANIMATION_DURATION)
          .duration(ANIMATION_DURATION)
          .attr
            opacity: 1


        y_labels = matrix.selectAll(".y_label")
          .data filtered_data_a, (d) -> d.id

        enter_y_labels = y_labels.enter().append("text")
          .text (d) -> d.label.trim()
          .attr
            class: "y_label"
            dy: '0.35em'
            opacity: 0
          .on 'click', (d) ->
            if not hide_unselected
              toggle(d,'as')
              redraw()

        y_labels
          .classed 'selected', (d) -> d.selected

        # ANIMATIONS
        y_labels.exit().transition()
          .duration(ANIMATION_DURATION)
          .attr
            opacity: 0
          .remove()

        y_labels.transition()
          .delay(ANIMATION_DURATION)
          .duration(ANIMATION_DURATION)
          .attr
            transform: (d) -> "translate(#{-LABEL_PAD*cell},#{y(d.id)+cell/2}) scale(#{cell})"

        enter_y_labels.transition()
          .delay(2*ANIMATION_DURATION)
          .duration(ANIMATION_DURATION)
          .attr
            opacity: 1

      # FILTER reprise
      # --------------
      d3.select('.hide_unselected').on 'click', () ->
        hide_unselected = not hide_unselected
        redraw()
        
      d3.select('.hide_empty').on 'click', () ->
        hide_empty = not hide_empty
        redraw()

      redraw()

disable_controls = () ->
  d3.select('.hide_unselected')
    .attr
      disabled: true
      
  d3.select('.hide_empty')
    .attr
      disabled: true
      
enable_controls = () ->
  d3.select('.hide_unselected')
    .attr
      disabled: null
      
  d3.select('.hide_empty')
    .attr
      disabled: null

index.coffee.save

svg = d3.select('svg')
width = svg.node().getBoundingClientRect().width
height = svg.node().getBoundingClientRect().height

# append a group for zoomable content
zoomable_layer = svg.append('g')

# define a zoom behavior
zoom = d3.behavior.zoom()
  .scaleExtent([0.3,4])
  .on 'zoom', () ->
    zoomable_layer
      .attr
        transform: "translate(#{zoom.translate()})scale(#{zoom.scale()})"
    
svg.call(zoom)

simcolor = d3.scale.linear()
  .domain([0,1])
  .range([d3.hcl(20,0,100),d3.hcl(20,75,25)])
  .interpolate(d3.interpolateHcl)

matrix = zoomable_layer.append('g')
  .attr('transform', 'translate(125,170)scale(0.4)')

SIZE = 13

d3.json 'poetq.json', (data) ->
  items = []
  predicates_data = []
  instances_data = []
  
  data.forEach (e1) ->
    vector = []
    instances_data.push e1.k1
    
    e1.similarities.forEach (e2) ->
      vector.push e2.sim
      
      if e2.k2 not in predicates_data
        predicates_data.push e2.k2
    
    items.push vector
  
  console.debug 'Computing hierarchical clustering...'
  clusters = clusterfck.hcluster(
    items,
    clusterfck.EUCLIDEAN_DISTANCE,
    clusterfck.SINGLE_LINKAGE
  )
  tree = tree_utils.binary_to_std(clusters)
  matrix_data = tree_utils.get_leaves(tree).map (d) -> d.value
  
  # COLUMNS
  mouseover = () ->
    d3.select(this)
      .style
        opacity: 0.8
  
  mouseout = () ->
    d3.select(this)
      .style
        opacity: 1
  
  columns = matrix.selectAll('.column')
    .data(matrix_data)
  
  enter_columns = columns.enter().append('g')
    .attr('class', 'column')
    .attr('transform', (d,i) -> "translate(#{SIZE*i},0)")
    .on('mouseover',  mouseover)
    .on('mouseout', mouseout)
  
  # CELLS
  cells = columns.selectAll('.cell')
    .data((column) -> column)
    
  cells.enter().append('rect')
    .attr('class', 'cell')
    .attr('width', SIZE)
    .attr('height', SIZE)
    .attr('transform', (d, i) -> "translate(0,#{SIZE*i})")
    .attr('fill', (d) -> if d is 0 then 'gray' else 'black')
    
  matrix.append('rect')
    .attr('class','border')
    .attr('x', -1)
    .attr('y', -1)
    .attr('width', SIZE*matrix_data.length+2)
    .attr('height', SIZE*predicates_data.length+2)
  
  # HORIZONTAL LABELS
  hlabels = matrix.selectAll('.hlabel')
    .data(predicates_data)
    
  hlabels.enter().append('a')
      .attr('xlink:href', (d) -> d.k1)
    .append('text')
      .attr('class','hlabel')
      .text((d) -> d)
      .attr('transform', (d,i) -> "translate(0,#{SIZE*i})")
      .attr('dy', '1em')
      .attr('dx', -6)
  
  # VERTICAL LABELS
  vlabels = matrix.selectAll('.vlabel')
    .data(instances_data)
    
  vlabels.enter().append('a')
      .attr('xlink:href', (d) -> d.k1)
    .append('text')
      .attr('class','vlabel')
      .text((d) -> d.replace('http://dbpedia.org/resource/',''))
      .attr('transform', (d,i) -> "translate(#{SIZE*i},0) rotate(-90)")
      .attr('dy', '1em')
      .attr('dx', 6)
    

index.css

html, body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
}
svg {
  width: 100%;
  height: 100%;
  background: white;
}
.x_label, .y_label {
  font-family: sans-serif;
  font-size: 1px;
  cursor: pointer;
}
.x_label {
  text-anchor: start;
}
.y_label {
  text-anchor: end;
}
.cell, .x_label, .y_label {
  fill: #BBB;
}
.selected {
  fill: black;
}

.filter_box {
  position: absolute;
  top: 10px;
  left: 10px;
  font-family: sans-serif;
}

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>DIITET matrix with filtering</title>
  <link type="text/css" href="index.css" rel="stylesheet"/>
  <script src="http://d3js.org/d3.v3.min.js"></script>
</head>
<body>
  <svg></svg>
  <div class="filter_box">
    <label><input class="hide_unselected" type="checkbox">Hide unselected</label><br/>
    <label><input class="hide_empty" type="checkbox"/>Hide empty</label>
  </div>
  <script src="index.js"></script>
</body>
</html>

index.js

// Generated by CoffeeScript 1.10.0
(function() {
  var disable_controls, enable_controls, height, matrix, matrix_space_height, matrix_space_width, svg, width, zoom, zoomable_layer;

  svg = d3.select('svg');

  width = svg.node().getBoundingClientRect().width;

  height = svg.node().getBoundingClientRect().height;

  matrix_space_width = 0.8 * width;

  matrix_space_height = 0.8 * height;

  zoomable_layer = svg.append('g');

  zoom = d3.behavior.zoom().scaleExtent([0, Infinity]).on('zoom', function() {
    return zoomable_layer.attr({
      transform: "translate(" + (zoom.translate()) + ")scale(" + (zoom.scale()) + ")"
    });
  });

  svg.call(zoom);

  matrix = zoomable_layer.append('g');

  d3.csv("tema.csv", function(data_a) {
    data_a.sort(function(a, b) {
      return d3.ascending(a.area_progettuale_id, b.area_progettuale_id);
    });
    data_a.forEach(function(d) {
      return d.label = d.tema_title;
    });
    return d3.csv("istituto.csv", function(data_b) {
      data_b.sort(function(a, b) {
        return d3.ascending(a.dipartimento_id, b.dipartimento_id);
      });
      data_b.forEach(function(d) {
        return d.label = d.sigla;
      });
      return d3.csv("istituto_tema.csv", function(data_cells) {
        var ANIMATION_DURATION, LABEL_PAD, cell, data_a_index, data_b_index, hide_empty, hide_unselected, matrix_height, matrix_width, redraw, selected, toggle, update_selection;
        data_cells.forEach(function(d) {
          d.a_id = d.tema_id;
          return d.b_id = d.istituto_id;
        });
        data_a_index = {};
        data_a.forEach(function(d) {
          return data_a_index[d.id] = d;
        });
        data_b_index = {};
        data_b.forEach(function(d) {
          return data_b_index[d.id] = d;
        });
        data_cells.forEach(function(d) {
          d.a = data_a_index[d.a_id];
          return d.b = data_b_index[d.b_id];
        });
        selected = {
          as: {},
          bs: {}
        };
        toggle = function(d, abs) {
          if (d.id in selected[abs]) {
            delete selected[abs][d.id];
          } else {
            selected[abs][d.id] = d;
          }
          return update_selection();
        };
        update_selection = function() {
          data_a.forEach(function(d) {
            return d.selected = d.id in selected.as || Object.keys(selected.as).length === 0;
          });
          data_b.forEach(function(d) {
            return d.selected = d.id in selected.bs || Object.keys(selected.bs).length === 0;
          });
          return data_cells.forEach(function(d) {
            return d.selected = d.a.selected && d.b.selected;
          });
        };
        update_selection();
        hide_unselected = false;
        hide_empty = false;
        LABEL_PAD = 0.5;
        ANIMATION_DURATION = 800;
        cell = Math.min(matrix_space_width / data_b.length, matrix_space_height / data_a.length);
        matrix_width = cell * data_b.length;
        matrix_height = cell * data_a.length;
        matrix.attr({
          transform: "translate(" + (width / 2 - matrix_width / 2) + "," + (height / 2 - matrix_height / 2) + ")"
        });
        redraw = function() {
          var cells, enter_x_labels, enter_y_labels, filtered_data_a, filtered_data_b, filtered_data_cells, x, x_labels, y, y_labels;
          filtered_data_cells = data_cells;
          filtered_data_a = data_a;
          filtered_data_b = data_b;
          if (hide_unselected) {
            filtered_data_cells = filtered_data_cells.filter(function(d) {
              return d.selected;
            });
            filtered_data_a = filtered_data_a.filter(function(d) {
              return d.selected;
            });
            filtered_data_b = filtered_data_b.filter(function(d) {
              return d.selected;
            });
          }
          data_a.forEach(function(d) {
            return d.cells = [];
          });
          data_b.forEach(function(d) {
            return d.cells = [];
          });
          filtered_data_cells.forEach(function(d) {
            d.a.cells.push(d);
            return d.b.cells.push(d);
          });
          if (hide_empty) {
            filtered_data_a = filtered_data_a.filter(function(d) {
              return d.cells.length > 0;
            });
            filtered_data_b = filtered_data_b.filter(function(d) {
              return d.cells.length > 0;
            });
          }
          matrix_width = cell * filtered_data_b.length;
          matrix_height = cell * filtered_data_a.length;
          x = d3.scale.ordinal().domain(filtered_data_b.map(function(d) {
            return d.id;
          })).rangeBands([0, matrix_width]);
          y = d3.scale.ordinal().domain(filtered_data_a.map(function(d) {
            return d.id;
          })).rangeBands([0, matrix_height]);
          cells = matrix.selectAll(".cell").data(filtered_data_cells, function(d) {
            return d.a.id + "__" + d.b.id;
          });
          cells.enter().append("circle").attr({
            "class": "cell",
            opacity: 0
          }).append('title').text(function(d) {
            return d.b.istituto_title + "\n" + (d.a.tema_title.trim());
          });
          cells.classed('selected', function(d) {
            return d.selected;
          });
          disable_controls();
          cells.exit().transition().duration(ANIMATION_DURATION).attr({
            opacity: 0
          }).remove();
          cells.transition().delay(ANIMATION_DURATION).duration(ANIMATION_DURATION).attr({
            cx: function(d) {
              return x(d.b.id) + cell / 2;
            },
            cy: function(d) {
              return y(d.a.id) + cell / 2;
            },
            r: cell / 2
          });
          cells.transition().delay(2 * ANIMATION_DURATION).duration(ANIMATION_DURATION).attr({
            opacity: 1
          }).each('end', function() {
            return enable_controls();
          });
          x_labels = matrix.selectAll(".x_label").data(filtered_data_b, function(d) {
            return d.id;
          });
          enter_x_labels = x_labels.enter().append("text").text(function(d) {
            return d.label;
          }).attr({
            "class": "x_label",
            x: 0,
            dy: '0.35em',
            opacity: 0
          }).on('click', function(d) {
            if (!hide_unselected) {
              toggle(d, 'bs');
              return redraw();
            }
          });
          enter_x_labels.append('title').text(function(d) {
            return "" + (d.istituto_title.trim());
          });
          x_labels.classed('selected', function(d) {
            return d.selected;
          });
          x_labels.exit().transition().duration(ANIMATION_DURATION).attr({
            opacity: 0
          }).remove();
          x_labels.transition().delay(ANIMATION_DURATION).duration(ANIMATION_DURATION).attr({
            transform: function(d) {
              return "translate(" + (x(d.id) + cell / 2) + "," + (-LABEL_PAD * cell) + ") rotate(-90) scale(" + cell + ")";
            }
          });
          enter_x_labels.transition().delay(2 * ANIMATION_DURATION).duration(ANIMATION_DURATION).attr({
            opacity: 1
          });
          y_labels = matrix.selectAll(".y_label").data(filtered_data_a, function(d) {
            return d.id;
          });
          enter_y_labels = y_labels.enter().append("text").text(function(d) {
            return d.label.trim();
          }).attr({
            "class": "y_label",
            dy: '0.35em',
            opacity: 0
          }).on('click', function(d) {
            if (!hide_unselected) {
              toggle(d, 'as');
              return redraw();
            }
          });
          y_labels.classed('selected', function(d) {
            return d.selected;
          });
          y_labels.exit().transition().duration(ANIMATION_DURATION).attr({
            opacity: 0
          }).remove();
          y_labels.transition().delay(ANIMATION_DURATION).duration(ANIMATION_DURATION).attr({
            transform: function(d) {
              return "translate(" + (-LABEL_PAD * cell) + "," + (y(d.id) + cell / 2) + ") scale(" + cell + ")";
            }
          });
          return enter_y_labels.transition().delay(2 * ANIMATION_DURATION).duration(ANIMATION_DURATION).attr({
            opacity: 1
          });
        };
        d3.select('.hide_unselected').on('click', function() {
          hide_unselected = !hide_unselected;
          return redraw();
        });
        d3.select('.hide_empty').on('click', function() {
          hide_empty = !hide_empty;
          return redraw();
        });
        return redraw();
      });
    });
  });

  disable_controls = function() {
    d3.select('.hide_unselected').attr({
      disabled: true
    });
    return d3.select('.hide_empty').attr({
      disabled: true
    });
  };

  enable_controls = function() {
    d3.select('.hide_unselected').attr({
      disabled: null
    });
    return d3.select('.hide_empty').attr({
      disabled: null
    });
  };

}).call(this);

istituto.csv

istituto_tema.csv

tema.csv

thumbnail.png