35:null 36:["$","title",null,{"children":"A4: Nested Treemap Test | EM LU | Observable"}] 3c:T115b,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 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) // what's this class .data(d => { // console.log(d.values); return d.values;}) // nestedTreeData splits the data by height. d.values returns nTD separated arrays .join("g") .attr("class", d => "treeHeight_" + d.height) .attr("stroke", "#fff") .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 => 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") .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 => d.data.title); // 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: (p.x0 - p.x0), // calculate the new view x1: (d.x1 - d.x0), y0: (p.y0 - p.y0), y1: (d.y1 - d.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(); }3d: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. `3e:[] 3a:{"id":"31e7355003c7122f","slug":"a4-nested-treemap-test/2","title":"A4: Nested Treemap Test","thumbnail":"fc1ae4957090b32e4ee1ebc1442d24b0f658e6fd74c5425975805ad0f4b2cc6d","access_level":"public","create_time":"$D2019-10-27T18:35:57.814Z","update_time":"$D2019-10-30T07:18:26.014Z","view_time":null,"first_public_time":"$D2019-10-28T02:26:15.000Z","has_unpublished_edits":null,"fork":{"id":"9cd052a265030466","slug":"a4-nested-treemap-test","title":"A4: Nested Treemap Test","owner":{"id":"7a5a5a266053fb35","login":"riledigital","name":"Ri"}},"stars":0,"starred":false,"owner":{"type":"team","id":"cca82cf86e613018","login":"tarobao","name":"EM LU","avatar_url":"https://avatars-next.observableusercontent.com/f664b98333148d5cf80410200ebe1d31d7b461fc010e71863e9d5a0510470ef6","tier":"starter_2024","bio":">:^/"},"version":1444,"publish_version":1444,"role":null,"authored":false,"authors":[{"type":"individual","id":"c29530828907b252","login":"tarobao","name":"EM LU","avatar_url":"https://avatars-next.observableusercontent.com/f664b98333148d5cf80410200ebe1d31d7b461fc010e71863e9d5a0510470ef6","tier":null,"bio":">:^/"}],"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":5,"collection":null,"type":"notebook","body":{"titling":"auto","title":"A4: Nested Treemap Test","cells":[{"id":546,"value":"md`# A4: Nested Treemap Test\nForked 10/27. Todo: (1) implement zoom (2) fix titles....` ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":790,"value":"mutable inspectCurrent =''","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":889,"value":"vPaddingTop = 20","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":892,"value":"vPadding = 1.4","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1153,"value":"mutable inspectData =''","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"$3c","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1084,"value":"mutable inspectSelector = ''","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":949,"value":"mouseoverHelper = d => {\n // console.log(d);\n mutable inspectCurrent = d;\n // This conditional prevents the viewer from rendering an ugly \"undefined\"\n // let's edit this so that you can mouseover any level\n if (d.height > 0) { // the mouseover is not on a leaf node\n mutable mouseoverTitle = \"\";\n mutable mouseoverClassification = \"\";\n mutable mouseoverArtist = \"\";\n mutable mouseoverCulture = \"\";\n mutable mouseoverDate = \"\";\n } else {\n mutable mouseoverDepartment = d.data.department;\n mutable mouseoverTitle = d.data.title;\n mutable mouseoverClassification = d.data.classification;\n mutable mouseoverArtist = d.data.artistname;\n mutable mouseoverCulture = d.data.culture;\n mutable mouseoverDate = d.data.begindate;\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"// links = d3.csvParse(')\nrowdata = d3.csv(\"https://gist.githubusercontent.com/rl2999/e15594889ee650f0a7ffe238d3c03f0e/raw/1edf08ce77b0a600c16f109a75fef3916926a572/met_highlights_dept_class.csv\")\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"prepped_tree = new obj(\"metStuff\", byDepartmentClassification);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"funcChildren(prepped_tree)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"2000","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":63,"value":"height = 900","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"format = d3.format(\",d\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":750,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":865,"value":"html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":723,"value":"// Mutables\nmutable mouseoverDepartment = \"\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":725,"value":"\nmutable mouseoverClassification = \"\";\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":722,"value":"mutable mouseoverTitle = \"\";\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"mutable mouseoverArtist = \"\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":824,"value":"mutable mouseoverCulture = \"\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":850,"value":"mutable mouseoverDate = \"\";","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3e","stdlib":"1"}} 3b:"$3a:body"