DIITET matrix

README.md

clusterfck.js

var clusterfck = (function() {
    var module = { exports: {}};
    var exports = module.exports;
module.exports = (function() {
    var module = { exports: {}};
    var exports = module.exports;

var HierarchicalClustering = function(distance, merge, threshold) {
  this.distance = distance || clusterfck.EUCLIDEAN_DISTANCE;
  this.merge = merge || clusterfck.AVERAGE_LINKAGE;
  this.threshold = threshold == undefined ? Infinity : threshold;
}

HierarchicalClustering.prototype = {
  cluster : function(items, snapshot, snapshotCallback) {
    var clusters = [];
    var dists = [];  // distances between each pair of clusters
    var mins = []; // closest cluster for each cluster
    var index = []; // keep a hash of all clusters by key
    for(var i = 0; i < items.length; i++) {
      var cluster = { canonical: items[i], key: i, index: i, size: 1};
      clusters[i] = cluster;
      index[i] = cluster;
      dists[i] = [];
      mins[i] = 0;
    }

    for(var i = 0; i < clusters.length; i++) {
      for(var j = 0; j <= i; j++) {
        var dist = (i == j) ? Infinity : 
          this.distance(clusters[i].canonical, clusters[j].canonical);
        dists[i][j] = dist;
        dists[j][i] = dist;

        if(dist < dists[i][mins[i]])
          mins[i] = j;
      }
    }

    var merged = this.mergeClosest(clusters, dists, mins, index);
    var i = 0;
    while(merged) {
      if(snapshotCallback && (i % snapshot) == 0)
        snapshotCallback(clusters);

      merged = this.mergeClosest(clusters, dists, mins, index);
      i++;
    }
    
    clusters.forEach(function(cluster) {
      // clean up metadata used for clustering
      delete cluster.key;
      delete cluster.index;
    });

    return clusters;
  },
  
  mergeClosest: function(clusters, dists, mins, index) {
    // find two closest clusters from cached mins
    var minKey = 0, min = Infinity;
    for(var i = 0; i < clusters.length; i++) {
      var key = clusters[i].key,
          dist = dists[key][mins[key]];
      if(dist < min) {
        minKey = key;
        min = dist;
      }
    }
    if(min >= this.threshold)
      return false;

    var c1 = index[minKey],
        c2 = index[mins[minKey]];
    
    // merge two closest clusters
    var merged = { canonical: this.merge(c1.canonical, c2.canonical),
                   left: c1,
                   right: c2,
                   key: c1.key,
                   size: c1.size + c2.size };

    clusters[c1.index] = merged;
    clusters.splice(c2.index, 1);
    index[c1.key] = merged;


    // update distances with new merged cluster
    for(var i = 0; i < clusters.length; i++) {
      var ci = clusters[i];
      var dist;
      if(c1.key == ci.key)
        dist = Infinity;
      else if(this.merge == clusterfck.SINGLE_LINKAGE) {
        dist = dists[c1.key][ci.key];
        if(dists[c1.key][ci.key] > dists[c2.key][ci.key])
           dist = dists[c2.key][ci.key];
      }
      else if(this.merge == clusterfck.COMPLETE_LINKAGE) {
        dist = dists[c1.key][ci.key];
        if(dists[c1.key][ci.key] < dists[c2.key][ci.key])
           dist = dists[c2.key][ci.key];
      }
      else if(this.merge == clusterfck.AVERAGE_LINKAGE) {
        dist = (dists[c1.key][ci.key] * c1.size
              + dists[c2.key][ci.key] * c2.size) / (c1.size + c2.size);
      }
      else
        dist = this.distance(ci.canonical, c1.canonical);

      dists[c1.key][ci.key] = dists[ci.key][c1.key] = dist;
    }

    
    // update cached mins
    for(var i = 0; i < clusters.length; i++) {
      var key1 = clusters[i].key;        
      if(mins[key1] == c1.key || mins[key1] == c2.key) {
        var min = key1;
        for(var j = 0; j < clusters.length; j++) {
          var key2 = clusters[j].key;
          if(dists[key1][key2] < dists[key1][min])
            min = key2;
        }
        mins[key1] = min;
      }
      clusters[i].index = i;
    }
    
     // clean up metadata used for clustering
    delete c1.key; delete c2.key;
    delete c1.index; delete c2.index;
    
    return true;
  }
}

var SINGLE_LINKAGE = function(c1, c2) { return c1; };
var COMPLETE_LINKAGE = function(c1, c2) { return c1; };
var AVERAGE_LINKAGE = function(c1, c2) { return c1; };

var EUCLIDEAN_DISTANCE = function(v1, v2) {
  var total = 0;
  for(var i = 0; i < v1.length; i++)
    total += Math.pow(v2[i] - v1[i], 2)
  return Math.sqrt(total);
}

var MANHATTAN_DISTANCE = function(v1, v2) {
  var total = 0;
  for(var i = 0; i < v1.length ; i++)
    total += Math.abs(v2[i] - v1[i])
  return total;
}

var MAX_DISTANCE = function(v1, v2) {
  var max = 0;
  for(var i = 0; i < v1.length; i++)
    max = Math.max(max , Math.abs(v2[i] - v1[i]));
  return max;
}

var hcluster = function(items, distance, merge, threshold, snapshot, snapshotCallback) {
  return (new HierarchicalClustering(distance, merge, threshold))
         .cluster(items, snapshot, snapshotCallback);
}

clusterfck = {
  hcluster: hcluster,
  SINGLE_LINKAGE: SINGLE_LINKAGE,
  COMPLETE_LINKAGE: COMPLETE_LINKAGE,
  AVERAGE_LINKAGE: AVERAGE_LINKAGE,
  EUCLIDEAN_DISTANCE: EUCLIDEAN_DISTANCE,
  MANHATTAN_DISTANCE: MANHATTAN_DISTANCE,
  MAX_DISTANCE: MAX_DISTANCE
};

module.exports = clusterfck;
return module.exports;   })();
return module.exports;   })()

index.coffee

LABEL_SPACE_X = 250
LABEL_SPACE_Y = 50

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

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

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

matrix = zoomable_layer.append 'g'
  .attr 'transform', "translate(#{LABEL_SPACE_X},#{LABEL_SPACE_Y})"

compare_obj = (a,b) ->
  if a.amount > b.amount
    return -1
  if a.amount < b.amount
    return 1
  return 0

sort_object_keys = (obj) ->
  keys = []

  for k,v of obj
    keys.push {key: k, amount: v}

  keys.sort compare_obj
  
CELL = 4
  
x = d3.scale.ordinal()
y = d3.scale.ordinal()
# color = d3.scale.category10()
# color = d3.scale.ordinal()
#    .range(['#005','#A55'])
color = () -> '#000'


# File loading
d3.csv "istituto.csv", (institutes) ->
  institutes.sort (a,b) -> d3.ascending(a.dipartimento_id, b.dipartimento_id)
  
  departments = d3.nest()
    .key (d) -> d.dipartimento_id
    .entries institutes
  
  x
    .domain(institutes.map (d) -> d.istituto_id)
    .rangeBands([0, CELL * institutes.length])

  d3.csv "tema.csv", (thematics) ->
    thematics.sort (a,b) -> d3.ascending(a.area_progettuale_id, b.area_progettuale_id)
    
    areas = d3.nest()
      .key (d) -> d.area_progettuale_id
      .entries thematics
    
    y
      .domain(thematics.map (d) -> d.tema_id)
      .rangeBands([0, CELL * thematics.length])
    
        
    # VERTICAL separators
    vseparators_x = [0]
    vseparators_x = vseparators_x.concat departments.map (d) -> x(d.values[d.values.length-1].istituto_id)+CELL # Position of last item of group
    
    vseparators = matrix.selectAll '.vseparator'
      .data vseparators_x

    vseparators.enter().append 'line'
      .attr
        class: 'vseparator'
        x1: (d) -> d
        x2: (d) -> d
        y1: -LABEL_SPACE_Y
        y2: CELL * thematics.length
        
    # HORIZONTAL separators
    hseparators_y = [0]
    hseparators_y = hseparators_y.concat areas.map (d) -> y(d.values[d.values.length-1].tema_id)+CELL # Position of last item of group
    
    hseparators = matrix.selectAll '.hseparator'
      .data hseparators_y

    hseparators.enter().append 'line'
      .attr
        class: 'hseparator'
        y1: (d) -> d
        y2: (d) -> d
        x1: -LABEL_SPACE_X
        x2: CELL * institutes.length

    d3.csv "istituto_tema.csv", (cells_data) ->
      # Objectify data structures
      institutes_index = {}
      institutes.forEach (d) ->
        institutes_index[d.istituto_id] = d
        d.cells = []
      
      thematics_index = {}
      thematics.forEach (d) ->
        thematics_index[d.tema_id] = d
        d.cells = []
      
      cells_data.forEach (d) ->
        d.istituto = institutes_index[d.istituto_id]
        d.tema = thematics_index[d.tema_id]
        d.istituto.cells.push d
        d.tema.cells.push d
        
      
      # Clustering
  #     clusters = clusterfck.hcluster(
  #       items,
  #       ((a, b) ->
  #         total = 0
  #         for i in [0...a.vector.length]
  #           total += Math.pow(b.vector[i] - a.vector[i], 2)
  #         Math.sqrt total),
  #       clusterfck.SINGLE_LINKAGE
  #     )
  #     tree = tree_utils.binary_to_std clusters

  #     tree_utils.recursive_sort(
  #       tree,
  #       (a,b) -> b.key - a.key,
  #       (n) ->
  #         if n.children?
  #           n.key = d3.min(n.children, (c) -> c.key)
  #         else
  #           n.key = n.value.vector.reduce (t, s) -> t + s
  #     )

  #     matrix_data = tree_utils.get_leaves(tree).map (d) -> d.value


      # HORIZONTAL LABELS
      hlabels = matrix.selectAll '.hlabel'
        .data thematics

      hlabels.enter().append 'text'
        .text (d) -> d.tema_title.trim() #FIXME eliminate trim
        .attr
          class: 'hlabel'
          dy: '0.9em'
          dx: -1
          y: (d) -> y(d.tema_id)
          fill: (d) -> color(d.area_progettuale_id)
        .style
          'font-size': CELL-1
        .on 'click', (d) ->
          cells_data.forEach (c) -> delete c.selected
          institutes.forEach (i) -> delete i.selected
          thematics.forEach (t) -> delete t.selected
          
          d.selected = true
          d.cells.forEach (c) ->
            c.selected = true
            c.istituto.selected = true
            
          redraw_highlighting()

      hlabels.exit().remove()
      
      # VERTICAL LABELS
      vlabels = matrix.selectAll '.vlabel'
        .data institutes

      enter_vlabels = vlabels.enter().append 'text'
        .text (d) -> d.sigla
        .attr
          class: 'vlabel'
          dy: '0.9em'
          dx: 1
          transform: (d,i) -> "translate(#{x(d.istituto_id)},0) rotate(-90)"
          fill: (d) -> color(d.dipartimento_id) 
        .style
          'font-size': CELL-1
        .on 'click', (d) ->
          cells_data.forEach (c) -> delete c.selected
          institutes.forEach (i) -> delete i.selected
          thematics.forEach (t) -> delete t.selected
          
          d.selected = true
          d.cells.forEach (c) ->
            c.selected = true
            c.tema.selected = true
            
          redraw_highlighting()
      
      enter_vlabels.append 'title'
        .text (d) -> "#{d.istituto_title.trim()}"
      
      vlabels.exit().remove()
      
      # CELLS
      cells = matrix.selectAll '.cell'
        .data cells_data, (d) -> d.id
      
      enter_cells = cells.enter().append 'circle'
        .attr
          class: 'cell'
          cy: (d) -> y(d.tema_id) + CELL/2
          cx: (d) -> x(d.istituto_id) + CELL/2
          r: CELL/2
        .on 'click', (d) ->
          cells_data.forEach (c) -> delete c.selected
          institutes.forEach (i) -> delete i.selected
          thematics.forEach (t) -> delete t.selected
          
          d.selected = true
          d.istituto.selected = true
          d.tema.selected = true
          
          redraw_highlighting()
          
      enter_cells.append 'title'
        .text (d) -> "#{d.istituto.istituto_title}\n#{d.tema.tema_title.trim()}"
        
      cells.exit().remove()
      
redraw_highlighting = () ->
  matrix.selectAll '.cell'
    .classed 'selected', (d) -> d.selected
    
  matrix.selectAll '.hlabel'
    .classed 'selected', (d) -> d.selected
    
  matrix.selectAll '.vlabel'
    .classed 'selected', (d) -> d.selected

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;
}
.border, .vseparator, .hseparator {
  stroke-width: 1;
  stroke: #DDD;
  fill: none;
  vector-effect: non-scaling-stroke;
}
.hlabel, .vlabel {
  font-family: sans-serif;
}
.hlabel {
  text-anchor: end;
}
.vlabel {
  text-anchor: start;
}
.selected {
  fill: red;
}

.cell {
  opacity: 0.7;
}
.cell:hover {
  opacity: 1;
}

select {
  position: absolute;
  top: 5px;
  left: 5px;
}

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="description" content="DIITET matrix" />
  <title>DIITET matrix</title>
  <link type="text/css" href="index.css" rel="stylesheet"/>
  <script src="http://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></svg>
  <script src="index.js"></script>
</body>
</html>

index.js

// Generated by CoffeeScript 1.10.0
(function() {
  var CELL, LABEL_SPACE_X, LABEL_SPACE_Y, color, compare_obj, height, matrix, redraw_highlighting, sort_object_keys, svg, width, x, y, zoom, zoomable_layer;

  LABEL_SPACE_X = 250;

  LABEL_SPACE_Y = 50;

  svg = d3.select('svg');

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

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

  zoomable_layer = svg.append('g');

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

  svg.call(zoom);

  matrix = zoomable_layer.append('g').attr('transform', "translate(" + LABEL_SPACE_X + "," + LABEL_SPACE_Y + ")");

  compare_obj = function(a, b) {
    if (a.amount > b.amount) {
      return -1;
    }
    if (a.amount < b.amount) {
      return 1;
    }
    return 0;
  };

  sort_object_keys = function(obj) {
    var k, keys, v;
    keys = [];
    for (k in obj) {
      v = obj[k];
      keys.push({
        key: k,
        amount: v
      });
    }
    return keys.sort(compare_obj);
  };

  CELL = 4;

  x = d3.scale.ordinal();

  y = d3.scale.ordinal();

  color = function() {
    return '#000';
  };

  d3.csv("istituto.csv", function(institutes) {
    var departments;
    institutes.sort(function(a, b) {
      return d3.ascending(a.dipartimento_id, b.dipartimento_id);
    });
    departments = d3.nest().key(function(d) {
      return d.dipartimento_id;
    }).entries(institutes);
    x.domain(institutes.map(function(d) {
      return d.istituto_id;
    })).rangeBands([0, CELL * institutes.length]);
    return d3.csv("tema.csv", function(thematics) {
      var areas, hseparators, hseparators_y, vseparators, vseparators_x;
      thematics.sort(function(a, b) {
        return d3.ascending(a.area_progettuale_id, b.area_progettuale_id);
      });
      areas = d3.nest().key(function(d) {
        return d.area_progettuale_id;
      }).entries(thematics);
      y.domain(thematics.map(function(d) {
        return d.tema_id;
      })).rangeBands([0, CELL * thematics.length]);
      vseparators_x = [0];
      vseparators_x = vseparators_x.concat(departments.map(function(d) {
        return x(d.values[d.values.length - 1].istituto_id) + CELL;
      }));
      vseparators = matrix.selectAll('.vseparator').data(vseparators_x);
      vseparators.enter().append('line').attr({
        "class": 'vseparator',
        x1: function(d) {
          return d;
        },
        x2: function(d) {
          return d;
        },
        y1: -LABEL_SPACE_Y,
        y2: CELL * thematics.length
      });
      hseparators_y = [0];
      hseparators_y = hseparators_y.concat(areas.map(function(d) {
        return y(d.values[d.values.length - 1].tema_id) + CELL;
      }));
      hseparators = matrix.selectAll('.hseparator').data(hseparators_y);
      hseparators.enter().append('line').attr({
        "class": 'hseparator',
        y1: function(d) {
          return d;
        },
        y2: function(d) {
          return d;
        },
        x1: -LABEL_SPACE_X,
        x2: CELL * institutes.length
      });
      return d3.csv("istituto_tema.csv", function(cells_data) {
        var cells, enter_cells, enter_vlabels, hlabels, institutes_index, thematics_index, vlabels;
        institutes_index = {};
        institutes.forEach(function(d) {
          institutes_index[d.istituto_id] = d;
          return d.cells = [];
        });
        thematics_index = {};
        thematics.forEach(function(d) {
          thematics_index[d.tema_id] = d;
          return d.cells = [];
        });
        cells_data.forEach(function(d) {
          d.istituto = institutes_index[d.istituto_id];
          d.tema = thematics_index[d.tema_id];
          d.istituto.cells.push(d);
          return d.tema.cells.push(d);
        });
        hlabels = matrix.selectAll('.hlabel').data(thematics);
        hlabels.enter().append('text').text(function(d) {
          return d.tema_title.trim();
        }).attr({
          "class": 'hlabel',
          dy: '0.9em',
          dx: -1,
          y: function(d) {
            return y(d.tema_id);
          },
          fill: function(d) {
            return color(d.area_progettuale_id);
          }
        }).style({
          'font-size': CELL - 1
        }).on('click', function(d) {
          cells_data.forEach(function(c) {
            return delete c.selected;
          });
          institutes.forEach(function(i) {
            return delete i.selected;
          });
          thematics.forEach(function(t) {
            return delete t.selected;
          });
          d.selected = true;
          d.cells.forEach(function(c) {
            c.selected = true;
            return c.istituto.selected = true;
          });
          return redraw_highlighting();
        });
        hlabels.exit().remove();
        vlabels = matrix.selectAll('.vlabel').data(institutes);
        enter_vlabels = vlabels.enter().append('text').text(function(d) {
          return d.sigla;
        }).attr({
          "class": 'vlabel',
          dy: '0.9em',
          dx: 1,
          transform: function(d, i) {
            return "translate(" + (x(d.istituto_id)) + ",0) rotate(-90)";
          },
          fill: function(d) {
            return color(d.dipartimento_id);
          }
        }).style({
          'font-size': CELL - 1
        }).on('click', function(d) {
          cells_data.forEach(function(c) {
            return delete c.selected;
          });
          institutes.forEach(function(i) {
            return delete i.selected;
          });
          thematics.forEach(function(t) {
            return delete t.selected;
          });
          d.selected = true;
          d.cells.forEach(function(c) {
            c.selected = true;
            return c.tema.selected = true;
          });
          return redraw_highlighting();
        });
        enter_vlabels.append('title').text(function(d) {
          return "" + (d.istituto_title.trim());
        });
        vlabels.exit().remove();
        cells = matrix.selectAll('.cell').data(cells_data, function(d) {
          return d.id;
        });
        enter_cells = cells.enter().append('circle').attr({
          "class": 'cell',
          cy: function(d) {
            return y(d.tema_id) + CELL / 2;
          },
          cx: function(d) {
            return x(d.istituto_id) + CELL / 2;
          },
          r: CELL / 2
        }).on('click', function(d) {
          cells_data.forEach(function(c) {
            return delete c.selected;
          });
          institutes.forEach(function(i) {
            return delete i.selected;
          });
          thematics.forEach(function(t) {
            return delete t.selected;
          });
          d.selected = true;
          d.istituto.selected = true;
          d.tema.selected = true;
          return redraw_highlighting();
        });
        enter_cells.append('title').text(function(d) {
          return d.istituto.istituto_title + "\n" + (d.tema.tema_title.trim());
        });
        return cells.exit().remove();
      });
    });
  });

  redraw_highlighting = function() {
    matrix.selectAll('.cell').classed('selected', function(d) {
      return d.selected;
    });
    matrix.selectAll('.hlabel').classed('selected', function(d) {
      return d.selected;
    });
    return matrix.selectAll('.vlabel').classed('selected', function(d) {
      return d.selected;
    });
  };

}).call(this);

istituto.csv

istituto_tema.csv

tema.csv

thumbnail.png