mutable inspectData =''
mutable inspectSelector = ''
chart = {
const root = treemap(prepped_tree);
let focus = root;
const svg = d3
.create("svg")
.attr("viewBox", [0, 0, width, height])
.style("font", "11px sans-serif");
// const shadow = DOM.uid("shadow");
// svg.append("filter")
// .attr("id", shadow.id)
// .append("feDropShadow")
// .attr("flood-opacity", 0.8)
// .attr("dx", 0)
// .attr("stdDeviation", 1.2);
const nestedTreeData = d3
.nest()
.key(d => d.height)
.entries(root.descendants());
// mutable inspectMe = nestedTreeData;
// These are only rectangles
// We create group and start the selection/data join up here
const node = svg
.selectAll("g")
.data(nestedTreeData) // first we start on the highest level up
.join("g")
.attr("class", "filterGroup")
// .attr("filter", shadow)
.selectAll("g")
.attr("class", d => "groupHeight_" + d.height) // this class targets groups by dept/class/item
.data(d => d.values) // ??
.join("g")
.attr("class", d => "treeHeight_" + d.height)
.attr("transform", d => `translate(${d.x0},${d.y0})`);
// then we append to the variable labels
const labels = svg
.append("g")
.attr('class', 'nodelabel')
.selectAll("g")
.data(nestedTreeData) // first we start on the highest level up
.join("g")
.attr("class", "labelgroup")
.selectAll("g")
.data(d => d.values) //
.join("g")
.attr("class", d => "treeHeight_" + d.height)
.attr("transform", d => `translate(${d.x0},${d.y0})`);
const labelHandler = d => {
// Hides the label for individual objects
// and only shows labels for classifications and departments...
mutable inspectData = d; // console.log(d);
if (d.height >= 1) {
return d.data.key;
} else {
return '';
}
};
// assigning it to a mutable makes it possible for us to inspect
mutable inspectSelector = labels
.append("text")
.join("text")
.attr("class", d => "treeHeightLabel_" + d.height)
.attr("y", 11)
.text(d => {
return labelHandler(d);
});
node.append("title").text(
d =>
`${d
.ancestors()
.reverse()
.map(d => d.data.key)
.join("/")}\n${format(d.data.title)}`
);
const rect = node
.append("rect") // for now, filters leaves out of display because too cluttered
.attr("id", d => (d.nodeUid = DOM.uid("node")).id)
.attr("fill", d => color(d.height))
.attr("width", d => d.x1 - d.x0)
.attr("height", d => d.y1 - d.y0)
// ---- Interactivity starts here
.on("mouseover", function(d) {
// unsure why we have to use "function(d)" for it to work
console.log(this);
console.log(d3.select(this));
d3.select(this).attr("fill", "blue");
mouseoverHelper(d);
})
.on("click", clicked)
.on("mouseout", function(d) {
d3.select(this)
.transition()
.duration(250) // try these
.attr("fill", d => color(d.height));
d3.select("#tooltip").remove();
});
node
.append("clipPath")
.attr("id", d => (d.clipUid = DOM.uid("clip")).id)
.append("use");
// .attr("xlink:href", d => d.nodeUid.href); this is broken, our data is missing .clipUid
const text = node
.append("text")
.attr("clip-path", d => d.clipUid) // temp
.selectAll("tspan")
.data(d => d)
.join("tspan")
.attr("fill-opacity", (d, i, nodes) =>
i === nodes.length - 1 ? 0.7 : null
)
.text(d => helperTitleNoOverplot(d)); /// TO EMMA: this might be wrong
// node.filter(d => d.children).selectAll("tspan")
// .attr("dx", 3)
// .attr("y", 13);
const tspan = node
.filter(d => !d.children)
.selectAll("tspan")
.attr("x", 3)
.attr(
"y",
(d, i, nodes) => `${(i === nodes.length - 1) * 0.3 + 1.1 + i * 0.9}em`
);
function clicked(p) {
focus = focus === p ? (p = p.parent) : p;
root.each(
d =>
(d.target = {
x0: ((d.x0 - p.x0) / (p.x1 - p.x0)) * height, // calculate the new view
x1: ((d.x1 - p.x0) / (p.x1 - p.x0)) * height,
y0: d.y0 - p.y0,
y1: d.y1 - p.y0
})
);
const t = node
.transition()
.duration(750)
.attr("transform", d => `translate(${d.target.y0},${d.target.x0})`);
rect.transition(t).attr("height", d => rectHeight(d.target));
text.transition(t).attr("fill-opacity", d => +labelVisible(d.target));
tspan.transition(t).attr("fill-opacity", d => labelVisible(d.target) * 0.7);
}
function rectHeight(d) {
return d.x1 - d.x0 - Math.min(1, (d.x1 - d.x0) / 6);
}
function labelVisible(d) {
return d.y1 <= width && d.y0 >= 0 && d.x1 - d.x0 > 4;
}
return svg.node();
}
//
// Logic helper function; ensures that
// we don't render titles for classifications with only a few
helperTitleNoOverplot = d => {
const classificationThreshold = 4;
console.log(d.parent.children.length);
// if d's parent doesn't have enough classification categories,
if (d.parent.children.length < classificationThreshold) {
// don't draw the titles...
return '';
} else {
// else, just draw the title normally
return d.data.title;
}
}
mouseoverHelper = d => {
// console.log(d);
mutable inspectCurrent = d;
// This conditional prevents the viewer from rendering an ugly "undefined"
// let's edit this so that you can mouseover any level
if (d.height > 0) { // the mouseover is not on a leaf node
mutable mouseoverTitle = "";
mutable mouseoverClassification = "";
mutable mouseoverArtist = "";
mutable mouseoverCulture = "";
mutable mouseoverDate = "";
} else {
mutable mouseoverDepartment = d.data.department;
mutable mouseoverTitle = d.data.title;
mutable mouseoverClassification = d.data.classification;
mutable mouseoverArtist = d.data.artistname;
mutable mouseoverCulture = d.data.culture;
mutable mouseoverDate = d.data.begindate;
}
}
byDepartmentClassification = d3.nest()
.key(d => d.department)
.key(d => d.classification)
.entries(rowdata)
// Pass thingy into hierarchy
hier = d3.hierarchy(prepped_tree, funcChildren)
treemap = data => d3.treemap()
.tile(d3[tile])
.size([width, height])
.padding(vPadding)
.paddingTop(vPaddingTop)
.round(true)
(d3.hierarchy(data, funcChildren)
// running .sum in this way will count the nodes, similar to .count
// ideally we want to filter...
// .sum(d => (d.children ? d.parent : 1)).value
// changed sum -> count, counting leaves to generate values
// for now this didn't do much, just changing the output graph a little, rectangles fill up properly
.count(d => 1)
)
// When we run treemap, this function wraps up stuff
// and mutates the input, computing values that
// will be passed into root for the chart all the way above...
// The code below is called in chart but you can remove it from this here.
// This line is only included so we can inspect the output above...
treemap(prepped_tree);
// There is probably an easier way to do this in JS
// but this way uses a constructor
obj = function(name, children) {
this.name = name;
this.values = children; }
prepped_tree = new obj("metStuff", byDepartmentClassification);
// This function is used to choose where the children are located
funcChildren = d => d.values
funcChildren(prepped_tree)
2000
height = 900
format = d3.format(",d")
color = d3.scaleSequential([8, 0], d3.interpolateViridis)
d3 = require("d3@5")
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.
