3e:null 3f:["$","title",null,{"children":"Bonus Assignment: Dynamic Treemap | Xianbin Gu (Bing) | Observable"}] 45:T5f0,function getTree( data, attrs) { // console.log("data:", data); const getLevels = (attr) => { const attrArray = data.map(d => d[attr]); // console.log("attrArray:", attrArray); const levels = attrArray.filter( (d, idx) => attrArray.indexOf(d) === idx).sort(); return levels.map( d => {return {"name": d, "attr": attr}}); }; const levels = attrs.map( d => getLevels(d)); // console.log("levels:", levels); const getJsonTree = function( data, levels ) { let itemArr = []; if(levels.length === 0) { //itemArr.push(data); return null; } const currentLevel = levels[0]; for (let i = 0; i < currentLevel.length; i++) { let node = currentLevel[i]; let newData = data.filter(d => d[currentLevel[0].attr] === currentLevel[i].name) if (newData.length > 0){ let newNode = {}; newNode.points = newData; newNode.name = node.name; newNode.attr = node.attr; newNode.value = newData.length; //number of patients // newNode.value = newData.length/data.length; // portion of patients let children = getJsonTree(newData, levels.slice(1)); if (children) { newNode.children = children; } itemArr.push(newNode); } } return itemArr; }; return getJsonTree(data, levels); }46:Tfab,treeMap = { const svg_width = 800; const svg_height = 600; const margin = {top: 20, right: 40, bottom: 20, left: 40}; const innerWidth = svg_width - margin.left - margin.right; const innerHeight = svg_height - margin.top - margin.bottom; const attributes = [firstAttr.value, secondAttr.value, thirdAttr.value] .filter(d => d !== "null"); const filteredData = rawData.filter(d => d[selectedDiseaseValue] === 1 || d[selectedDiseaseValue] === "1") const treeData = ({ name: "root", children: getTree(filteredData, attributes) }) const root = d3.hierarchy(treeData) .sum(d => (d.children ? 0 : (d.value || 0))) //only count the values of leaf nodes when computing the area of rectangles .sort((a, b) => (b.value || 0) - (a.value || 0)); const layout = d3.treemap() .size([innerWidth, innerHeight]) // 这里是 treemap 的绝对坐标范围 .padding(2) .round(true); layout(root); const color = d3.scaleOrdinal(d3.schemeDark2); const getAttributePath = (node) => { const path = []; let current = node; while (current.parent && current.parent.data.name !== "root") { if (current.data.attr && current.data.name) { path.unshift(`${current.data.attr}: ${current.data.name}`); } current = current.parent; } return path; }; const svg = d3.create("svg") .attr("viewBox", `0 0 ${svg_width} ${svg_height}`) .attr("preserveAspectRatio", "xMidYMid meet") .attr("width", svg_width) .attr("height", svg_height); const g = svg.append("g") .attr("transform", `translate(${margin.left}, ${margin.top})`); const leaves = root.leaves(); const firstLayer = root.children; const cell = g.selectAll("g.cell") .data(leaves) .join("g") .attr("class", "cell"); const rect = cell.append("rect") .attr("x", d => d.x0) .attr("y", d => d.y0) .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0) .attr("fill", d => { const attributes = getAttributePath(d); const colorKey = attributes.length > 0 ? attributes[0] : d.data.name; return color(colorKey); }) .on("click", function (event, d){ d3.select(this).attr("fill", 'red'); }) .on("mouseout", function (event, d){ d3.select(this).attr("fill", d => { const attributes = getAttributePath(d); const colorKey = attributes.length > 0 ? attributes[0] : d.data.name; return color(colorKey) }); }); cell.append("text") .attr("x", d => d.x0 + 5) .attr("y", d => d.y0 + 15) .attr("font-size", 10) .attr("fill", "#fff") .each(function(d) { const attributes = getAttributePath(d); const text = d3.select(this); attributes.forEach((attr, idx) => { text.append("tspan") .attr("x", d.x0 + 5) .attr("dy", idx === 0 ? 0 : "1.2em") .text(attr); }); }); cell.append("text") .attr("x", d => d.x0 + 5) .attr("y", d => d.y0 + 30) .attr("font-size", 10) .attr("fill", "#fff") .attr("dy", "1.2em") .text(d => `Value: ${d.data.value}`); const firstLayerCell = g.selectAll("g.firstLayer") .data(firstLayer) .join("g") .attr("class", "firstLayer") const firstLayerRect = firstLayerCell.append("rect") .attr("x", d => d.x0) .attr("y", d => d.y0) .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0) .attr("stroke", "black") .attr("stroke-width", 1) .attr("fill", "none"); firstLayerCell.append("text") .attr("x", d => (d.x0 + d.x1)/2) .attr("y", d => (d.y0 + d.y1)/2) .attr("font-size", 50) .attr("font-weight", "bold") .attr("text-anchor", "middle") .attr("dominant-baseline", "middle") .attr("opacity", 0.3) .attr("fill", "black") .attr("transform", d=>(d.x1-d.x0)>(d.y1-d.y0)?undefined:`rotate(90, ${(d.x1+d.x0)/2}, ${(d.y1+d.y0)/2})`) .text(d => `${d.data.attr}: ${d.data.name}`); return svg.node(); } 47:[] 43:{"id":"8897fd55793a05bd","slug":null,"title":"Bonus Assignment: Dynamic Treemap","thumbnail":"9acc030e4c44ea19051dc5a8d5b151d4423b8549abb1b5dde305497470f492b3","access_level":"public","create_time":"$D2025-11-08T03:32:00.855Z","update_time":"$D2025-11-11T15:37:46.681Z","view_time":null,"first_public_time":"$D2025-11-11T13:54:53.087Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"dc47cb92b6f2e60d","login":"hogwild","name":"Xianbin Gu (Bing)","avatar_url":"https://avatars-next.observableusercontent.com/851a2f4a0ec7bf86db0cd9e0c66b8f1b497d89e7b0215658cbe7ef74ae0da47e","tier":"starter_2024","bio":"A Ph.D. in information science. My research interests are machine learning and its applications in image processing and data analysis. ","following":false},"version":236,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"c89db03381bed69a","login":"hogwild","name":"Xianbin Gu (Bing)","avatar_url":"https://avatars-next.observableusercontent.com/851a2f4a0ec7bf86db0cd9e0c66b8f1b497d89e7b0215658cbe7ef74ae0da47e","tier":null,"bio":"A Ph.D. in information science. My research interests are machine learning and its applications in image processing and data analysis. ","following":false}],"members":[{"type":"individual","id":"c89db03381bed69a","login":"hogwild","name":"Xianbin Gu (Bing)","avatar_url":"https://avatars-next.observableusercontent.com/851a2f4a0ec7bf86db0cd9e0c66b8f1b497d89e7b0215658cbe7ef74ae0da47e","tier":null,"role":"editor"},{"type":"team","id":"dc47cb92b6f2e60d","login":"hogwild","name":"Xianbin Gu (Bing)","avatar_url":"https://avatars-next.observableusercontent.com/851a2f4a0ec7bf86db0cd9e0c66b8f1b497d89e7b0215658cbe7ef74ae0da47e","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Bonus Assignment: Dynamic Treemap","cells":[{"id":0,"value":"# Bonus Assignment: Dynamic Treemap","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"csvUrl = \"https://gist.githubusercontent.com/hogwild/a716b6186d730c1d86962e9acaa1e59f/raw/aca017d18e2330668ef2765c5c049f89becda4ac/healthcare_stroke_data.csv\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"rawData = d3.csv(csvUrl, d3.autoType);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"options = [\n {value: \"null\", label: \"None\"},\n {value: \"gender\", label: \"Gender\"},\n {value: \"stroke\", label: \"Stroke\"},\n {value: \"heart_disease\", label: \"Heart Disease\"},\n {value: \"hypertension\", label: \"Hypertension\"},\n {value: \"ever_married\", label: \"Ever Married\"}\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"diseaseOptions = [\n {value: \"stroke\", label: \"Stroke\"},\n {value: \"heart_disease\", label: \"Heart Disease\"}\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"viewof selectedDisease = Inputs.select(\n diseaseOptions,\n {label: \"Disease\", format: d => d.label, value: diseaseOptions[0]}\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"selectedDiseaseValue = selectedDisease.value // \"stroke\" 或 \"heart_disease\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"viewof firstAttr = Inputs.select(\n options,\n {label: \"First attribute\", format: d => d.label, value: options[4]} // ever_married\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"viewof secondAttr = Inputs.select(\n options,\n {label: \"Second attribute\", format: d => d.label, value: options[3]} // heart_disease\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"viewof thirdAttr = Inputs.select(\n options,\n {label: \"Third attribute\", format: d => d.label, value: options[2]} // stroke 或其他\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":220,"value":"htmlCell = html`

\n Settings\n

\n ${viewof selectedDisease}\n ${viewof firstAttr}\n ${viewof secondAttr}\n ${viewof thirdAttr}\n

${treeMap}

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 44:"$43:body"