clustergrammer
Version:
This is a clustergram implemented in D3.js. I started from the example http://bost.ocks.org/mike/miserables/ and added the following features
86 lines (75 loc) • 3.15 kB
JavaScript
module.exports = function resize_highlights(params){
// reposition tile highlight
////////////////////////////////
var rel_width_hlight = 6;
// var opacity_hlight = 0.85;
var hlight_width = rel_width_hlight*params.viz.border_width.x;
var hlight_height = rel_width_hlight*params.viz.border_width.y;
// top highlight
d3.select(params.root+' .top_hlight')
.attr('width', params.viz.rect_width)
.attr('height', hlight_height)
.attr('transform', function() {
return 'translate(' + params.viz.x_scale(params.matrix.click_hlight_x) + ',0)';
});
// left highlight
d3.select(params.root+' .left_hlight')
.attr('width', hlight_width)
.attr('height', params.viz.rect_width - hlight_height*0.99 )
.attr('transform', function() {
return 'translate(' + params.viz.x_scale(params.matrix.click_hlight_x) + ','+
hlight_height*0.99+')';
});
// right highlight
d3.select(params.root+' .right_hlight')
.attr('width', hlight_width)
.attr('height', params.viz.rect_height - hlight_height*0.99 )
.attr('transform', function() {
var tmp_translate = params.viz.x_scale(params.matrix.click_hlight_x) + params.viz.rect_width - hlight_width;
return 'translate(' + tmp_translate + ','+
hlight_height*0.99+')';
});
// bottom highlight
d3.select(params.root+' .bottom_hlight')
.attr('width', function(){
return params.viz.rect_width - 1.98*hlight_width;})
.attr('height', hlight_height)
.attr('transform', function() {
var tmp_translate_x = params.viz.x_scale(params.matrix.click_hlight_x) + hlight_width*0.99;
var tmp_translate_y = params.viz.rect_height - hlight_height;
return 'translate(' + tmp_translate_x + ','+
tmp_translate_y+')';
});
// resize row highlight
/////////////////////////
d3.select(params.root+' .row_top_hlight')
.attr('width',params.viz.svg_dim.width)
.attr('height',hlight_height);
d3.select(params.root+' .row_bottom_hlight')
.attr('width',params.viz.svg_dim.width)
.attr('height',hlight_height)
.attr('transform', function(){
var tmp_translate_y = params.viz.rect_height - hlight_height;
return 'translate(0,'+tmp_translate_y+')';
});
// resize col highlight
/////////////////////////
d3.select(params.root+' .col_top_hlight')
.attr('width',params.viz.clust.dim.height)
.attr('height',hlight_width)
.attr('transform',function(){
var tmp_translate_y = 0;
var tmp_translate_x = -(params.viz.clust.dim.height+
params.viz.cat_room.col+params.viz.uni_margin);
return 'translate('+tmp_translate_x+','+tmp_translate_y+')';
});
d3.select(params.root+' .col_bottom_hlight')
.attr('width',params.viz.clust.dim.height)
.attr('height',hlight_width)
.attr('transform', function(){
var tmp_translate_y = params.viz.rect_width - hlight_width;
var tmp_translate_x = -(params.viz.clust.dim.height +
params.viz.cat_room.col+params.viz.uni_margin);
return 'translate('+tmp_translate_x+','+tmp_translate_y+')';
});
};