2e:null 2f:["$","title",null,{"children":"A4: Nested Treemap Test 3 (working viz draft) | EM LU | Observable"}] 34:T10bc,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("transform", d => `translate(${d.y0},${d.x0})`) // what's this class .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; if (d.height >= 1) { return d.data.key; } else { return ''; } }; // assigning it to a mutable makes it possible for us to inspect const rect = node // append itemurl here .append("a") .attr("xlink:href", d => d.data.itemurl) .attr("target", "_blank") .append("rect") .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 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") .style("user-select", "none") .attr("pointer-events", "none") .attr("x", 4) .attr("y", 13); // .attr("fill-opacity", d => +labelVisible(d)) text.append("tspan") .text(d => d.data.key) .call(wrap, 70); // 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 = { // what does root.each do? recalculate each rect? x0: (d.x0 - p.x0), // calculate the new view x1: (d.x1 - p.x0), 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)) .attr("width", d => rectWidth(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); // not sure why we change x } function rectWidth(d) { return (d.y1 - d.y0); } function labelVisible(d) { return d.y1 <= width && d.y0 >= 0 && d.x1 - d.x0 > 4; }*/ return svg.node(); } 35:T529,mouseoverHelper = d => { // console.log(d); let sl = 47; // temp janky way to split itemurl; index at which objectID starts 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 // it's 4 am so i donlt knwo how to write conditionals // TODO: fix the errors that's thrown and write better logic mutable mouseoverDepartment = (d.parent.data ? d.parent.data.key : ""); mutable mouseoverClassification = d.data ? d.data.key : ""; // leave these blank? mutable mouseoverTitle = ""; 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; mutable objectID = d.data.itemurl.substring(sl); // UNCOMMENT THIS WHEN CHART LOADS? // mutable objectImgUrl = httpsObjectData.primaryImageSmall; // mutable objectSecondaryImg = httpsObjectData.additionalImages; } }36:T458,md` # Variables for interactivity See [Agnes' Observable notebook on mutables](https://observablehq.com/@observablehq/introduction-to-mutable-state), which are handy for doing mouseovers here! ## How it works - First, we declare our mutables below as empty strings. - .on() is a d3 func that we assign to mouseoverHelper, which handles the mouseover event. We **reassign** the variables here, basing it on the tree data passed through the [data bind](https://bost.ocks.org/mike/join/). - Then, we create a cell above the chart which renders HTML. Observable uses template tags, and allows you to reference JS variables in the HTML. (wow!!!!) [Observable's notebook, Introduction to HTML](https://observablehq.com/@observablehq/introduction-to-html) - Every time the mouseover event is called, the mutable fires update events to cells that reference it. You can see the updates firing when the left hand margin line flashes. - We style the HTML with CSS below. Avoid styling in the same cell, each _mutable_ update causes the styles to be reapplied, which lags the drawing performance and makes it unusable. `37:[] 32:{"id":"02c3bd8fdcdcca67","slug":"a4-nested-treemap-test-3","title":"A4: Nested Treemap Test 3 (working viz draft)","thumbnail":"b1b1d9fdceae938dcd3a50e0b9c0a8eecb42a6768fa54c1a137c85a5ef0bf0a5","access_level":"public","create_time":"$D2019-10-30T06:51:43.200Z","update_time":"$D2019-10-30T21:50:03.823Z","view_time":null,"first_public_time":"$D2019-10-30T07:04:31.019Z","has_unpublished_edits":null,"fork":{"id":"b7d6e1732d52b557","slug":"a4-nested-treemap-test/2","title":"A4: Nested Treemap Test","owner":{"id":"7a5a5a266053fb35","login":"riledigital","name":"Ri"}},"stars":1,"starred":false,"owner":{"type":"team","id":"cca82cf86e613018","login":"tarobao","name":"EM LU","avatar_url":"https://avatars-next.observableusercontent.com/f664b98333148d5cf80410200ebe1d31d7b461fc010e71863e9d5a0510470ef6","tier":"starter_2024"},"version":1487,"publish_version":1487,"role":null,"authored":false,"authors":[{"type":"individual","id":"c29530828907b252","login":"tarobao","name":"EM LU","avatar_url":"https://avatars-next.observableusercontent.com/f664b98333148d5cf80410200ebe1d31d7b461fc010e71863e9d5a0510470ef6","tier":null}],"members":[{"type":"individual","id":"c29530828907b252","login":"tarobao","name":"EM LU","avatar_url":"https://avatars-next.observableusercontent.com/f664b98333148d5cf80410200ebe1d31d7b461fc010e71863e9d5a0510470ef6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"title":"A4: Nested Treemap Test 3 (working viz draft)","cells":[{"id":546,"value":"md`# A4: Nested Treemap Test 3 (working viz draft)\nemma forked at 10/30 2:51 am to insert URLs for later potentially\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1153,"value":"mutable inspectData =''","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1084,"value":"mutable inspectSelector = ''","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"// This is a flashy way to change the layout type specified as a func in d3.treemap()\nviewof tile = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1378,"value":"md`Hover to view information about a given artwork; click to open the Met Collection link in a new tab.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":718,"value":"html`\n

${mouseoverDepartment}, ${mouseoverClassification}

${mouseoverTitle}

${mouseoverArtist} ${formatParens(mouseoverCulture)}

${mouseoverDate}

\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1446,"value":"html`\n

\n \n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1411,"value":"httpsObjectData = {\n const apiPath = 'https://collectionapi.metmuseum.org/public/collection/v1/objects/' + objectID;\n return await d3.json(apiPath);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1350,"value":"// ryan's wrap function\nfunction wrap(text, width) {\n text.each(function() {\n var text = d3.select(this),\n words = text.text()\n .split(/\\s+/)\n .reverse(),\n word,\n line = [],\n lineNumber = 0, //<-- 0!\n lineHeight = 1.2, // ems\n x = text.attr(\"x\"), //<-- include the x!\n y = text.attr(\"y\"),\n dy = text.attr(\"dy\") ? text.attr(\"dy\") : 0; //<-- null check\n var tspan = text.text(null)\n .append(\"tspan\")\n .attr(\"x\", x)\n .attr(\"y\", y)\n .attr(\"dy\", dy + \"em\");\n while (word = words.pop()) {\n line.push(word);\n tspan.text(line.join(\" \"));\n if (tspan.node()\n .getComputedTextLength() > width) {\n line.pop();\n tspan.text(line.join(\" \"));\n line = [word];\n tspan = text.append(\"tspan\")\n .attr(\"x\", x)\n .attr(\"y\", y)\n .attr(\"dy\", ++lineNumber * lineHeight + dy + \"em\")\n .text(word);\n }\n }\n });\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1327,"value":"//\n// Logic helper function; ensures that\n// we don't render titles for classifications with only a few\n\nhelperTitleNoOverplot = d => {\n const classificationThreshold = 4;\n console.log(d.parent.children.length);\n // if d's parent doesn't have enough classification categories,\n if (d.parent.children.length < classificationThreshold) {\n // don't draw the titles...\n return '';\n } else {\n // else, just draw the title normally\n return d.data.title;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"mutable inspectCurrent =''","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":949,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1285,"value":"x = d3.scaleLinear().domain([0, width]).range([0, width])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1287,"value":"y = d3.scaleLinear().domain([0, height]).range([50, height])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"md`\n# Loading the data\n\nFirst, we load the data from GitHub Gist. Be sure to use raw.githubusercontent.com to enable CORS access...\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"// links = d3.csvParse(')\nrowdata = d3.csv(\n \"https://gist.githubusercontent.com/rl2999/444bd7dec27ba79716a48f267ada5847/raw/8172032b87af222d1696da680a470a5f261fe076/met_highlights_dept_class_url.csv\"\n)\n\n// OLD DATA\n// rowdata = d3.csv(\"https://gist.githubusercontent.com/rl2999/e15594889ee650f0a7ffe238d3c03f0e/raw/1edf08ce77b0a600c16f109a75fef3916926a572/met_highlights_dept_class.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":144,"value":"md`\n## The treemap() layout function\n\nD3 has a special layout functionality that automatically computes x y coordinates for us, given that we want a particular type of layout. In our case, we want a treemap, so we use D3 treemap. \n\nBecause our dataset is comprised of a flat CSV where each row is an object, we must transform this into a tree-like structure for treemap() to compute the values for us. \n\n## Data transformation\n\nThere are multiple steps here:\n- Pass our rowdata into d3.nest() to make a grouped hierarchal data structure\n- Pass the data into d3.hierarchy\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":113,"value":"byDepartmentClassification = d3.nest()\n.key(d => d.department)\n.key(d => d.classification)\n.entries(rowdata)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"// Pass thingy into hierarchy\nhier = d3.hierarchy(prepped_tree, funcChildren)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"treemap = data => d3.treemap()\n .tile(d3[tile])\n .size([width, height])\n .padding(vPadding)\n .paddingTop(vPaddingTop)\n .round(true)\n (d3.hierarchy(data, funcChildren)\n // running .sum in this way will count the nodes, similar to .count\n // ideally we want to filter...\n // .sum(d => (d.children ? d.parent : 1)).value\n // changed sum -> count, counting leaves to generate values\n // for now this didn't do much, just changing the output graph a little, rectangles fill up properly\n .count(d => 1)\n )\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"md`\n### Creating the tree structure\n\nWhen we use nest, it computes almost everything correctly... except it doesn't wrap it into a structure like\n{\n name: \"met\",\n children: children\n}\n\nTherefore, we must create the object ourselves, and *then* pass it into d3.hierarchy.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":132,"value":"// When we run treemap, this function wraps up stuff \n// and mutates the input, computing values that \n// will be passed into root for the chart all the way above... \n// The code below is called in chart but you can remove it from this here.\n// This line is only included so we can inspect the output above...\ntreemap(prepped_tree);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"// There is probably an easier way to do this in JS\n// but this way uses a constructor\nobj = function(name, children) {\n this.name = name;\n this.values = children; }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"prepped_tree = new obj(\"metStuff\", byDepartmentClassification);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"// This function is used to choose where the children are located\nfuncChildren = d => d.values","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"funcChildren(prepped_tree)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"2000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"height = 900","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"format = d3.format(\",d\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"color = d3.scaleSequential([8, 0], d3.interpolateViridis)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":750,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":865,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":723,"value":"// Mutables\nmutable mouseoverDepartment = \"\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":725,"value":"\nmutable mouseoverClassification = \"\";\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":722,"value":"mutable mouseoverTitle = \"\";\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"mutable mouseoverArtist = \"\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":824,"value":"mutable mouseoverCulture = \"\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":850,"value":"mutable mouseoverDate = \"\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1417,"value":"mutable objectID = \"\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1427,"value":"mutable objectImgUrl = \"\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1475,"value":"mutable objectSecondaryImg = [];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":997,"value":"// renderCulture\n// Helper function that returns a formatted output \n// for variable in parenthesis\nformatParens = (input) => {\n if (input == '') { \n return '';\n } else \n { \n // render out output string with parentheses\n return '(' + input + ')'; \n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":892,"value":"vPadding = 1.4","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":889,"value":"vPaddingTop = 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 33:"$32:body"