Published
Edited
Oct 29, 2019
2 forks
1 star
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
chart = {
const root = treemap(prepped_tree);

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;

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)
.data(d => d.values) //
.join("g")
.attr("class", d => "treeHeight_" + d.height)
.attr("transform", d => `translate(${d.x0},${d.y0})`);

// These are only rectangles
// We create group and start the selection/data join up here
// 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 => labelHandler(d));

node.append("title").text(
d =>
`${d
.ancestors()
.reverse()
.map(d => d.data.key)
.join("/")}\n${format(d.data.title)}`
);

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", d => {
mouseoverHelper(d);
console.log('this kid just moused OVER');
})
.on("mouseout", function(d) {
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

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 => d.data.title);

node
.filter(d => d.children)
.selectAll("tspan")
.attr("dx", 3)
.attr("y", 13);

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`
);

return svg.node();
}
Insert cell
mutable inspectData =''
Insert cell
mutable inspectSelector = ''
Insert cell
textHandler = d => {
if (d.height === 0) { // if the data is a leaf
// print the key and value
// const artData = []
// Object.entries(d.data).forEach(([key, value]) => {
// const capitalizedInfoType = key.charAt(0).toUpperCase() + key.slice(1)
// artD ata.push(`${capitalizedInfoType}: ${value}`)
// })
var artData = d
return artData
// return Object.values(d.data)
} else { // not a leaf, just print the key
// suuuuper gross conditional because for some reason our tree has both "name" and "key"
return d;
// return (d.data.name ? d.data.name.split(/(?=[A-Z][^A-Z])/g).concat(format(d.value)) : d.data.key.split(/(?=[A-Z][^A-Z])/g).concat(format(d.value)))
}
}
Insert cell
mouseoverHelper = d => {
mutable inspectCurrent = d;
// This conditional prevents the viewer from rendering an ugly "undefined"
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;
}

// append the class for doing a mouseover animation
// d3.select("").remove();
}
Insert cell
function artworkList(d) {
let displayList = []
let listSize = 5
// TODO: ideally i'd write this better/with more parameters but it will have to do
for (let i = 0; i < listSize; i++) {
// TODO: need to catch undefined data
displayList.push(`${d[i].title} by ${d[i].artistname}`)
}
return displayList
}

Insert cell
Insert cell
Insert cell
Insert cell
// just for testing
root = treemap(prepped_tree).children
Insert cell
// // make function to temporarily remove data
// function popData (obj){
// let size = obj["values"].length;
// while(size > 1){ // size of output
// obj["values"].pop();
// size = size - 1;
// }
// return obj;
// }
Insert cell
// popData(prepped_tree)
Insert cell
Insert cell
Insert cell
Insert cell
byDepartmentClassification = d3.nest()
.key(d => d.department)
.key(d => d.classification)
.entries(rowdata)
Insert cell
// Pass thingy into hierarchy
hier = d3.hierarchy(prepped_tree, funcChildren)
Insert cell
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)
)

Insert cell
Insert cell
// 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);
Insert cell
// 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; }
Insert cell
prepped_tree = new obj("metStuff", byDepartmentClassification);
Insert cell
// This function is used to choose where the children are located
funcChildren = d => d.values
Insert cell
funcChildren(prepped_tree)
Insert cell
2000
Insert cell
height = 900
Insert cell
format = d3.format(",d")
Insert cell
color = d3.scaleSequential([8, 0], d3.interpolateViridis)
Insert cell
d3 = require("d3@5")
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more