Building and Using Tools to See.
UVA Architecture + Data Science. IT Director. Instructor.
class dvTooltip {
constructor(selection) {
if (!selection || !selection.size()) {
throw "Requires a tooltip div element selection";
}
this._selection = selection;
}
get selection() {
return this._selection;
}
set selection(sel) {
if (sel && sel.size()) {
this._selection = sel;
} else {
throw "selection must be a non-empty selected element";
}
}
show(evt, d, options) {
let thisElem = evt.currentTarget;
//let parentSVG = d3.select(thisElem).select(function() {return this.closest("svg")});
//let topNode = parentSVG.node().parentNode;
let mouseLoc = {x: evt.offsetX+1, y: evt.offsetY+1};
if (typeof(options) === "undefined") {options = {}}
if (typeof(options.fields) === "undefined") {options.fields = ""}
if (typeof(options.title) === "undefined") {options.title = ""}
if (typeof(options.subtitle) === "undefined") {options.subtitle = ""}
let ttContents = "";
if (options.title != "") {
ttContents += "<div class='TTtitle'>";
if (typeof(options.title) === "object") {ttContents += d[options.title.dataName]}
else {ttContents += options.title}
ttContents += "</div>";
}
if (options.subtitle != "") {
ttContents += "<div class='TTsubtitle'>";
if (typeof(options.subtitle) === "object") {ttContents += d[options.subtitle.dataName]}
else {ttContents += options.subtitle}
ttContents += "</div>";
}
if (options.fields != "") {
options.fields.forEach(field => {
if (field.displayName != "") {ttContents += field.displayName + ": "}
if (field.prefix != "") {ttContents += field.prefix}
ttContents += d[field.dataName];
if (field.suffix != "") {ttContents += " " + field.suffix}
ttContents += "<br />";
})
} else {
ttContents = d;
}
this.selection
.style("visibility","visible")
.style("left", mouseLoc.x + "px")
.style("top", mouseLoc.y + "px")
.html(ttContents);
}
hide() {
this.selection.style("visibility","hidden").html("");
}
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
