25:null 26:["$","title",null,{"children":"A4: Nested Treemap Test | Ri | Observable"}] 2b:T1285,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(); }2c: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. `2d:[] 29:{"id":"b7d6e1732d52b557","slug":"a4-nested-treemap-test/2","title":"A4: Nested Treemap Test","thumbnail":"c4373e53f4fdc0901f1841d479e6939f943142a31e8443884291b8d10db604fa","access_level":"public","create_time":"$D2019-10-29T23:36:24.125Z","update_time":"$D2019-10-30T04:26:41.623Z","view_time":null,"first_public_time":"$D2019-10-29T23:54:30.160Z","has_unpublished_edits":null,"fork":{"id":"31e7355003c7122f","slug":"a4-nested-treemap-test/2","title":"A4: Nested Treemap Test 2 (Emma's failed zoom test)","owner":{"id":"cca82cf86e613018","login":"tarobao","name":"EM LU"}},"stars":0,"starred":false,"owner":{"type":"team","id":"7a5a5a266053fb35","login":"riledigital","name":"Ri","avatar_url":"https://avatars-next.observableusercontent.com/87b813ad2cf4fc91f9ba3492ee7a7821963c890a8b1c8fa84df022812727095d","tier":"starter_2024"},"version":1345,"publish_version":1345,"role":null,"authored":false,"authors":[{"type":"individual","id":"d301c97fd368361d","login":"riledigital","name":"Ri","avatar_url":"https://avatars-next.observableusercontent.com/87b813ad2cf4fc91f9ba3492ee7a7821963c890a8b1c8fa84df022812727095d","tier":null}],"members":[{"type":"individual","id":"d301c97fd368361d","login":"riledigital","name":"Ri","avatar_url":"https://avatars-next.observableusercontent.com/87b813ad2cf4fc91f9ba3492ee7a7821963c890a8b1c8fa84df022812727095d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"A4: Nested Treemap Test","cells":[{"id":546,"value":"md`# A4: Nested Treemap Test\nri forked at 10/30 12:26 am to insert URLs for later potentially\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":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":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":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":10,"value":"$2b","pinned":true,"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":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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":"$2c","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":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":"$W2d","stdlib":"1","titling":"auto"}} 2a:"$29:body"