UNPKG

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

160 lines (138 loc) 5.37 kB
var get_cat_title = require('../categories/get_cat_title'); var ini_cat_reorder = require('../reorder/ini_cat_reorder'); var make_row_cat_super_labels = require('../labels/make_row_cat_super_labels'); var make_dendro_crop_buttons = require('../dendrogram/make_dendro_crop_buttons'); module.exports = function Spillover(cgm) { var params = cgm.params; var viz = params.viz; // hide spillover from slanted column labels on right side d3.select(viz.root+' .col_container') .append('path') .style('stroke-width', '0') .attr('d', 'M 0,0 L 1000,-1000, L 1000,0 Z') .attr('fill', viz.background_color) //!! prog_colors .attr('class', 'right_slant_triangle') .attr('transform', 'translate(' + viz.clust.dim.width + ',' + viz.norm_labels.width.col + ')'); // hide spillover from slanted column labels on left side d3.select(viz.root+' .col_container') .append('path') .style('stroke-width', '0') .attr('d', 'M 0,0 L 500,-500, L 0,-500 Z') .attr('fill', viz.background_color) .attr('class', 'left_slant_triangle') // shift left by 1 px to prevent cutting off labels .attr('transform', 'translate(-1,' + viz.norm_labels.width.col + ')'); var rect_height = viz.clust.margin.top + viz.uni_margin/5; // white rect to cover excess labels d3.select(viz.viz_svg) .append('rect') .attr('fill', viz.background_color) //!! prog_colors .attr('width', viz.clust.margin.left) .attr('height', rect_height) .attr('class', 'top_left_white'); var inst_height = viz.cat_room.col + 1.5*viz.uni_margin; // white rect to cover excess labels d3.select(viz.viz_svg) .append('rect') .attr('fill', viz.background_color) .attr('width', 2*viz.clust.dim.width) .attr('height', inst_height) .attr('class', 'top_right_white') .attr('transform', function(){ var tmp_left = viz.clust.margin.left + viz.clust.dim.width; var tmp_top = viz.norm_labels.width.col + viz.norm_labels.margin.top - viz.uni_margin; return 'translate('+tmp_left+', '+ tmp_top +')'; }); x_offset = viz.clust.margin.left + viz.clust.dim.width + viz.uni_margin; y_offset = viz.norm_labels.margin.top + viz.norm_labels.width.col + 2.5*viz.uni_margin; var cat_text_size = 1.15*viz.cat_room.symbol_width; var cat_super_opacity = 0.65; var extra_y_room = 1.25; // col category super labels if (viz.show_categories.col){ d3.select(viz.viz_svg) .selectAll() .data(viz.all_cats.col) .enter() .append('text') .classed('col_cat_super', true) .style('font-size', cat_text_size+'px') .style('opacity', cat_super_opacity) .style('cursor','default') .attr('transform', function(d){ var inst_cat = parseInt( d.split('-')[1], 10); var inst_y = y_offset + extra_y_room * viz.cat_room.symbol_width * inst_cat; return 'translate('+x_offset+','+inst_y+')'; }) .text(function(d){ return get_cat_title(viz, d, 'col'); }); } // row category super labels make_row_cat_super_labels(cgm); // white border bottom - prevent clustergram from hitting border if (viz.show_dendrogram){ // quick fix to make room for crop buttons y_offset = viz.clust.margin.top + viz.clust.dim.height + viz.dendro_room.col - 2*viz.uni_margin; } else { y_offset = viz.clust.margin.top + viz.clust.dim.height; } var b_spill_container = d3.select(viz.viz_svg) .append('g') .classed('bottom_spillover_container', true) .attr('transform', function() { // shift up enough to show the entire border width return 'translate(0,' + y_offset + ')'; }); b_spill_container .append('rect') .attr('class','bottom_spillover') .attr('fill', viz.background_color) //!! prog_colors .attr('width', viz.svg_dim.width) .attr('height', 2 * viz.svg_dim.height); x_offset = viz.clust.margin.left; y_offset = 0; b_spill_container .append('g') .classed('col_dendro_icons_container', true) .attr('transform', 'translate(' + x_offset + ',' + y_offset + ')') .append('g') .classed('col_dendro_icons_group', true); if (params.viz.show_dendrogram){ make_dendro_crop_buttons(cgm, 'col'); } var x_offset = viz.clust.margin.left + viz.clust.dim.width; var y_offset = viz.clust.margin.top + viz.clust.dim.height; var tmp_width = viz.cat_room.col + viz.clust.dim.width; var tmp_height = viz.cat_room.row + 10*viz.uni_margin; d3.select(viz.viz_svg) .append('rect') .attr('fill', viz.background_color) .attr('width',tmp_width) .attr('height',tmp_height) .attr('transform', function(){ return 'translate('+x_offset+','+y_offset+')'; }) .classed('white_bars',true) .classed('dendro_corner_spillover',true); // hide spillover left top of col dendrogram x_offset = 0; y_offset = viz.clust.margin.top + viz.clust.dim.height; tmp_width = viz.clust.margin.left; tmp_height = viz.clust.dim.height*10; d3.select(viz.viz_svg) .append('rect') .attr('fill', viz.background_color) .attr('width',tmp_width) .attr('height',tmp_height) .attr('transform', function(){ return 'translate('+x_offset+','+y_offset+')'; }) .classed('white_bars',true) .classed('dendro_col_spillover',true); ini_cat_reorder(cgm); };