t-viSNE: Interactive Assessment and Interpretation of t-SNE Projections https://doi.org/10.1109/TVCG.2020.2986996
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
t-viSNE/modules/d3-legend/d3-legend.js

742 lines
20 KiB

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
var helper = require('./legend');
module.exports = function(){
var scale = d3.scale.linear(),
shape = "rect",
shapeWidth = 15,
shapeHeight = 15,
shapeRadius = 10,
shapePadding = 2,
cells = [5],
labels = [],
classPrefix = "",
useClass = false,
title = "",
labelFormat = d3.format(".01f"),
labelOffset = 10,
labelAlign = "middle",
labelDelimiter = "to",
orient = "vertical",
ascending = false,
path,
legendDispatcher = d3.dispatch("cellover", "cellout", "cellclick");
function legend(svg){
var type = helper.d3_calcType(scale, ascending, cells, labels, labelFormat, labelDelimiter),
legendG = svg.selectAll('g').data([scale]);
legendG.enter().append('g').attr('class', classPrefix + 'legendCells');
var cell = legendG.selectAll("." + classPrefix + "cell").data(type.data),
cellEnter = cell.enter().append("g", ".cell").attr("class", classPrefix + "cell").style("opacity", 1e-6),
shapeEnter = cellEnter.append(shape).attr("class", classPrefix + "swatch"),
shapes = cell.select("g." + classPrefix + "cell " + shape);
//add event handlers
helper.d3_addEvents(cellEnter, legendDispatcher);
cell.exit().transition().style("opacity", 0).remove();
helper.d3_drawShapes(shape, shapes, shapeHeight, shapeWidth, shapeRadius, path);
helper.d3_addText(legendG, cellEnter, type.labels, classPrefix)
// sets placement
var text = cell.select("text"),
shapeSize = shapes[0].map( function(d){ return d.getBBox(); });
//sets scale
//everything is fill except for line which is stroke,
if (!useClass){
if (shape == "line"){
shapes.style("stroke", type.feature);
} else {
shapes.style("fill", type.feature);
}
} else {
shapes.attr("class", function(d){ return classPrefix + "swatch " + type.feature(d); });
}
var cellTrans,
textTrans,
textAlign = (labelAlign == "start") ? 0 : (labelAlign == "middle") ? 0.5 : 1;
//positions cells and text
if (orient === "vertical"){
cellTrans = function(d,i) { return "translate(0, " + (i * (shapeSize[i].height + shapePadding)) + ")"; };
textTrans = function(d,i) { return "translate(" + (shapeSize[i].width + shapeSize[i].x +
labelOffset) + "," + (shapeSize[i].y + shapeSize[i].height/2 + 5) + ")"; };
} else if (orient === "horizontal"){
cellTrans = function(d,i) { return "translate(" + (i * (shapeSize[i].width + shapePadding)) + ",0)"; }
textTrans = function(d,i) { return "translate(" + (shapeSize[i].width*textAlign + shapeSize[i].x) +
"," + (shapeSize[i].height + shapeSize[i].y + labelOffset + 8) + ")"; };
}
helper.d3_placement(orient, cell, cellTrans, text, textTrans, labelAlign);
helper.d3_title(svg, legendG, title, classPrefix);
cell.transition().style("opacity", 1);
}
legend.scale = function(_) {
if (!arguments.length) return scale;
scale = _;
return legend;
};
legend.cells = function(_) {
if (!arguments.length) return cells;
if (_.length > 1 || _ >= 2 ){
cells = _;
}
return legend;
};
legend.shape = function(_, d) {
if (!arguments.length) return shape;
if (_ == "rect" || _ == "circle" || _ == "line" || (_ == "path" && (typeof d === 'string')) ){
shape = _;
path = d;
}
return legend;
};
legend.shapeWidth = function(_) {
if (!arguments.length) return shapeWidth;
shapeWidth = +_;
return legend;
};
legend.shapeHeight = function(_) {
if (!arguments.length) return shapeHeight;
shapeHeight = +_;
return legend;
};
legend.shapeRadius = function(_) {
if (!arguments.length) return shapeRadius;
shapeRadius = +_;
return legend;
};
legend.shapePadding = function(_) {
if (!arguments.length) return shapePadding;
shapePadding = +_;
return legend;
};
legend.labels = function(_) {
if (!arguments.length) return labels;
labels = _;
return legend;
};
legend.labelAlign = function(_) {
if (!arguments.length) return labelAlign;
if (_ == "start" || _ == "end" || _ == "middle") {
labelAlign = _;
}
return legend;
};
legend.labelFormat = function(_) {
if (!arguments.length) return labelFormat;
labelFormat = _;
return legend;
};
legend.labelOffset = function(_) {
if (!arguments.length) return labelOffset;
labelOffset = +_;
return legend;
};
legend.labelDelimiter = function(_) {
if (!arguments.length) return labelDelimiter;
labelDelimiter = _;
return legend;
};
legend.useClass = function(_) {
if (!arguments.length) return useClass;
if (_ === true || _ === false){
useClass = _;
}
return legend;
};
legend.orient = function(_){
if (!arguments.length) return orient;
_ = _.toLowerCase();
if (_ == "horizontal" || _ == "vertical") {
orient = _;
}
return legend;
};
legend.ascending = function(_) {
if (!arguments.length) return ascending;
ascending = !!_;
return legend;
};
legend.classPrefix = function(_) {
if (!arguments.length) return classPrefix;
classPrefix = _;
return legend;
};
legend.title = function(_) {
if (!arguments.length) return title;
title = _;
return legend;
};
d3.rebind(legend, legendDispatcher, "on");
return legend;
};
},{"./legend":2}],2:[function(require,module,exports){
module.exports = {
d3_identity: function (d) {
return d;
},
d3_mergeLabels: function (gen, labels) {
if(labels.length === 0) return gen;
gen = (gen) ? gen : [];
var i = labels.length;
for (; i < gen.length; i++) {
labels.push(gen[i]);
}
return labels;
},
d3_linearLegend: function (scale, cells, labelFormat) {
var data = [];
if (cells.length > 1){
data = cells;
} else {
var domain = scale.domain(),
increment = (domain[domain.length - 1] - domain[0])/(cells - 1),
i = 0;
for (; i < cells; i++){
data.push(domain[0] + i*increment);
}
}
var labels = data.map(labelFormat);
return {data: data,
labels: labels,
feature: function(d){ return scale(d); }};
},
d3_quantLegend: function (scale, labelFormat, labelDelimiter) {
var labels = scale.range().map(function(d){
var invert = scale.invertExtent(d),
a = labelFormat(invert[0]),
b = labelFormat(invert[1]);
// if (( (a) && (a.isNan()) && b){
// console.log("in initial statement")
return labelFormat(invert[0]) + " " + labelDelimiter + " " + labelFormat(invert[1]);
// } else if (a || b) {
// console.log('in else statement')
// return (a) ? a : b;
// }
});
return {data: scale.range(),
labels: labels,
feature: this.d3_identity
};
},
d3_ordinalLegend: function (scale) {
return {data: scale.domain(),
labels: scale.domain(),
feature: function(d){ return scale(d); }};
},
d3_drawShapes: function (shape, shapes, shapeHeight, shapeWidth, shapeRadius, path) {
if (shape === "rect"){
shapes.attr("height", shapeHeight).attr("width", shapeWidth);
} else if (shape === "circle") {
shapes.attr("r", shapeRadius)//.attr("cx", shapeRadius).attr("cy", shapeRadius);
} else if (shape === "line") {
shapes.attr("x1", 0).attr("x2", shapeWidth).attr("y1", 0).attr("y2", 0);
} else if (shape === "path") {
shapes.attr("d", path);
}
},
d3_addText: function (svg, enter, labels, classPrefix){
enter.append("text").attr("class", classPrefix + "label");
svg.selectAll("g." + classPrefix + "cell text." + classPrefix + "label")
.data(labels).text(this.d3_identity);
},
d3_calcType: function (scale, ascending, cells, labels, labelFormat, labelDelimiter){
var type = scale.ticks ?
this.d3_linearLegend(scale, cells, labelFormat) : scale.invertExtent ?
this.d3_quantLegend(scale, labelFormat, labelDelimiter) : this.d3_ordinalLegend(scale);
type.labels = this.d3_mergeLabels(type.labels, labels);
if (ascending) {
type.labels = this.d3_reverse(type.labels);
type.data = this.d3_reverse(type.data);
}
return type;
},
d3_reverse: function(arr) {
var mirror = [];
for (var i = 0, l = arr.length; i < l; i++) {
mirror[i] = arr[l-i-1];
}
return mirror;
},
d3_placement: function (orient, cell, cellTrans, text, textTrans, labelAlign) {
cell.attr("transform", cellTrans);
text.attr("transform", textTrans);
if (orient === "horizontal"){
text.style("text-anchor", labelAlign);
}
},
d3_addEvents: function(cells, dispatcher){
var _ = this;
cells.on("mouseover.legend", function (d) { _.d3_cellOver(dispatcher, d, this); })
.on("mouseout.legend", function (d) { _.d3_cellOut(dispatcher, d, this); })
.on("click.legend", function (d) { _.d3_cellClick(dispatcher, d, this); });
},
d3_cellOver: function(cellDispatcher, d, obj){
cellDispatcher.cellover.call(obj, d);
},
d3_cellOut: function(cellDispatcher, d, obj){
cellDispatcher.cellout.call(obj, d);
},
d3_cellClick: function(cellDispatcher, d, obj){
cellDispatcher.cellclick.call(obj, d);
},
d3_title: function(svg, cellsSvg, title, classPrefix){
if (title !== ""){
var titleText = svg.selectAll('text.' + classPrefix + 'legendTitle');
titleText.data([title])
.enter()
.append('text')
.attr('class', classPrefix + 'legendTitle');
svg.selectAll('text.' + classPrefix + 'legendTitle')
.text(title)
var yOffset = svg.select('.' + classPrefix + 'legendTitle')
.map(function(d) { return d[0].getBBox().height})[0],
xOffset = -cellsSvg.map(function(d) { return d[0].getBBox().x})[0];
cellsSvg.attr('transform', 'translate(' + xOffset + ',' + (yOffset + 10) + ')');
}
}
}
},{}],3:[function(require,module,exports){
var helper = require('./legend');
module.exports = function(){
var scale = d3.scale.linear(),
shape = "rect",
shapeWidth = 15,
shapePadding = 2,
cells = [5],
labels = [],
useStroke = false,
classPrefix = "",
title = "",
labelFormat = d3.format(".01f"),
labelOffset = 10,
labelAlign = "middle",
labelDelimiter = "to",
orient = "vertical",
ascending = false,
path,
legendDispatcher = d3.dispatch("cellover", "cellout", "cellclick");
function legend(svg){
var type = helper.d3_calcType(scale, ascending, cells, labels, labelFormat, labelDelimiter),
legendG = svg.selectAll('g').data([scale]);
legendG.enter().append('g').attr('class', classPrefix + 'legendCells');
var cell = legendG.selectAll("." + classPrefix + "cell").data(type.data),
cellEnter = cell.enter().append("g", ".cell").attr("class", classPrefix + "cell").style("opacity", 1e-6),
shapeEnter = cellEnter.append(shape).attr("class", classPrefix + "swatch"),
shapes = cell.select("g." + classPrefix + "cell " + shape);
//add event handlers
helper.d3_addEvents(cellEnter, legendDispatcher);
cell.exit().transition().style("opacity", 0).remove();
//creates shape
if (shape === "line"){
helper.d3_drawShapes(shape, shapes, 0, shapeWidth);
shapes.attr("stroke-width", type.feature);
} else {
helper.d3_drawShapes(shape, shapes, type.feature, type.feature, type.feature, path);
}
helper.d3_addText(legendG, cellEnter, type.labels, classPrefix)
//sets placement
var text = cell.select("text"),
shapeSize = shapes[0].map(
function(d, i){
var bbox = d.getBBox()
var stroke = scale(type.data[i]);
if (shape === "line" && orient === "horizontal") {
bbox.height = bbox.height + stroke;
} else if (shape === "line" && orient === "vertical"){
bbox.width = bbox.width;
}
return bbox;
});
var maxH = d3.max(shapeSize, function(d){ return d.height + d.y; }),
maxW = d3.max(shapeSize, function(d){ return d.width + d.x; });
var cellTrans,
textTrans,
textAlign = (labelAlign == "start") ? 0 : (labelAlign == "middle") ? 0.5 : 1;
//positions cells and text
if (orient === "vertical"){
cellTrans = function(d,i) {
var height = d3.sum(shapeSize.slice(0, i + 1 ), function(d){ return d.height; });
return "translate(0, " + (height + i*shapePadding) + ")"; };
textTrans = function(d,i) { return "translate(" + (maxW + labelOffset) + "," +
(shapeSize[i].y + shapeSize[i].height/2 + 5) + ")"; };
} else if (orient === "horizontal"){
cellTrans = function(d,i) {
var width = d3.sum(shapeSize.slice(0, i + 1 ), function(d){ return d.width; });
return "translate(" + (width + i*shapePadding) + ",0)"; };
textTrans = function(d,i) { return "translate(" + (shapeSize[i].width*textAlign + shapeSize[i].x) + "," +
(maxH + labelOffset ) + ")"; };
}
helper.d3_placement(orient, cell, cellTrans, text, textTrans, labelAlign);
helper.d3_title(svg, legendG, title, classPrefix);
cell.transition().style("opacity", 1);
}
legend.scale = function(_) {
if (!arguments.length) return scale;
scale = _;
return legend;
};
legend.cells = function(_) {
if (!arguments.length) return cells;
if (_.length > 1 || _ >= 2 ){
cells = _;
}
return legend;
};
legend.shape = function(_, d) {
if (!arguments.length) return shape;
if (_ == "rect" || _ == "circle" || _ == "line" ){
shape = _;
path = d;
}
return legend;
};
legend.shapeWidth = function(_) {
if (!arguments.length) return shapeWidth;
shapeWidth = +_;
return legend;
};
legend.shapePadding = function(_) {
if (!arguments.length) return shapePadding;
shapePadding = +_;
return legend;
};
legend.labels = function(_) {
if (!arguments.length) return labels;
labels = _;
return legend;
};
legend.labelAlign = function(_) {
if (!arguments.length) return labelAlign;
if (_ == "start" || _ == "end" || _ == "middle") {
labelAlign = _;
}
return legend;
};
legend.labelFormat = function(_) {
if (!arguments.length) return labelFormat;
labelFormat = _;
return legend;
};
legend.labelOffset = function(_) {
if (!arguments.length) return labelOffset;
labelOffset = +_;
return legend;
};
legend.labelDelimiter = function(_) {
if (!arguments.length) return labelDelimiter;
labelDelimiter = _;
return legend;
};
legend.orient = function(_){
if (!arguments.length) return orient;
_ = _.toLowerCase();
if (_ == "horizontal" || _ == "vertical") {
orient = _;
}
return legend;
};
legend.ascending = function(_) {
if (!arguments.length) return ascending;
ascending = !!_;
return legend;
};
legend.classPrefix = function(_) {
if (!arguments.length) return classPrefix;
classPrefix = _;
return legend;
};
legend.title = function(_) {
if (!arguments.length) return title;
title = _;
return legend;
};
d3.rebind(legend, legendDispatcher, "on");
return legend;
};
},{"./legend":2}],4:[function(require,module,exports){
var helper = require('./legend');
module.exports = function(){
var scale = d3.scale.linear(),
shape = "path",
shapeWidth = 15,
shapeHeight = 15,
shapeRadius = 10,
shapePadding = 5,
cells = [5],
labels = [],
classPrefix = "",
useClass = false,
title = "",
labelFormat = d3.format(".01f"),
labelAlign = "middle",
labelOffset = 10,
labelDelimiter = "to",
orient = "vertical",
ascending = false,
legendDispatcher = d3.dispatch("cellover", "cellout", "cellclick");
function legend(svg){
var type = helper.d3_calcType(scale, ascending, cells, labels, labelFormat, labelDelimiter),
legendG = svg.selectAll('g').data([scale]);
legendG.enter().append('g').attr('class', classPrefix + 'legendCells');
var cell = legendG.selectAll("." + classPrefix + "cell").data(type.data),
cellEnter = cell.enter().append("g", ".cell").attr("class", classPrefix + "cell").style("opacity", 1e-6),
shapeEnter = cellEnter.append(shape).attr("class", classPrefix + "swatch"),
shapes = cell.select("g." + classPrefix + "cell " + shape);
//add event handlers
helper.d3_addEvents(cellEnter, legendDispatcher);
//remove old shapes
cell.exit().transition().style("opacity", 0).remove();
helper.d3_drawShapes(shape, shapes, shapeHeight, shapeWidth, shapeRadius, type.feature);
helper.d3_addText(legendG, cellEnter, type.labels, classPrefix)
// sets placement
var text = cell.select("text"),
shapeSize = shapes[0].map( function(d){ return d.getBBox(); });
var maxH = d3.max(shapeSize, function(d){ return d.height; }),
maxW = d3.max(shapeSize, function(d){ return d.width; });
var cellTrans,
textTrans,
textAlign = (labelAlign == "start") ? 0 : (labelAlign == "middle") ? 0.5 : 1;
//positions cells and text
if (orient === "vertical"){
cellTrans = function(d,i) { return "translate(0, " + (i * (maxH + shapePadding)) + ")"; };
textTrans = function(d,i) { return "translate(" + (maxW + labelOffset) + "," +
(shapeSize[i].y + shapeSize[i].height/2 + 5) + ")"; };
} else if (orient === "horizontal"){
cellTrans = function(d,i) { return "translate(" + (i * (maxW + shapePadding)) + ",0)"; };
textTrans = function(d,i) { return "translate(" + (shapeSize[i].width*textAlign + shapeSize[i].x) + "," +
(maxH + labelOffset ) + ")"; };
}
helper.d3_placement(orient, cell, cellTrans, text, textTrans, labelAlign);
helper.d3_title(svg, legendG, title, classPrefix);
cell.transition().style("opacity", 1);
}
legend.scale = function(_) {
if (!arguments.length) return scale;
scale = _;
return legend;
};
legend.cells = function(_) {
if (!arguments.length) return cells;
if (_.length > 1 || _ >= 2 ){
cells = _;
}
return legend;
};
legend.shapePadding = function(_) {
if (!arguments.length) return shapePadding;
shapePadding = +_;
return legend;
};
legend.labels = function(_) {
if (!arguments.length) return labels;
labels = _;
return legend;
};
legend.labelAlign = function(_) {
if (!arguments.length) return labelAlign;
if (_ == "start" || _ == "end" || _ == "middle") {
labelAlign = _;
}
return legend;
};
legend.labelFormat = function(_) {
if (!arguments.length) return labelFormat;
labelFormat = _;
return legend;
};
legend.labelOffset = function(_) {
if (!arguments.length) return labelOffset;
labelOffset = +_;
return legend;
};
legend.labelDelimiter = function(_) {
if (!arguments.length) return labelDelimiter;
labelDelimiter = _;
return legend;
};
legend.orient = function(_){
if (!arguments.length) return orient;
_ = _.toLowerCase();
if (_ == "horizontal" || _ == "vertical") {
orient = _;
}
return legend;
};
legend.ascending = function(_) {
if (!arguments.length) return ascending;
ascending = !!_;
return legend;
};
legend.classPrefix = function(_) {
if (!arguments.length) return classPrefix;
classPrefix = _;
return legend;
};
legend.title = function(_) {
if (!arguments.length) return title;
title = _;
return legend;
};
d3.rebind(legend, legendDispatcher, "on");
return legend;
};
},{"./legend":2}],5:[function(require,module,exports){
d3.legend = {
color: require('./color'),
size: require('./size'),
symbol: require('./symbol')
};
},{"./color":1,"./size":3,"./symbol":4}]},{},[5]);