3e:null 3f:["$","title",null,{"children":"Building a Treemap | Xianbin Gu (Bing) | Observable"}] 45:T9d7,treeMap = { const svg_width = 900; const svg_height = 600; const margin = { top: 20, right: 40, bottom: 20, left: 40, gap: 40 }; 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 = tree.leaves(); const cell = g.selectAll("g.cell") .data(leaves) // .enter() // .append("g") .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 => color(d.parent.data.name)) .attr("opacity", 0.8) .on("click", function (event, d){ d3.select(this).attr("fill", 'red'); }) .on("mouseout", function (event, d){ d3.select(this).attr("fill", d => color(d.parent.data.name)); }); 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 text = d3.select(this); const lines = d.ancestors() .reverse() .slice(1) .map(d => d.data.name) .concat([`Survived: ${d3.format(".0%")(d.value)}`]); // append each line as a lines.forEach((line, i) => { text.append("tspan") .attr("x", d.x0 + 5) .attr("dy", i === 0 ? 0 : 12) // vertical offset between lines .text(line); }); }); const firstLayer = tree.children; 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.name}`); return svg.node(); }46:Te71,treeMapTooltip = { const svg_width = 900; const svg_height = 600; const margin = { top: 20, right: 40, bottom: 20, left: 40, gap: 40 }; 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})`); // create a tooltip const tooltip = d3.select("body") .append("div") .attr("class", "treemap-tooltip") .style("position", "absolute") .style("visibility", "hidden") .style("background-color", "rgba(0, 0, 0, 0.8)") .style("color", "#fff") .style("padding", "10px") .style("border-radius", "5px") .style("font-size", "12px") .style("pointer-events", "none") .style("z-index", "1000") .style("max-width", "300px"); const leaves = tree.leaves(); const firstLayer = tree.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 => color(d.parent.data.name)) .attr("opacity", 0.8) .on("click", function(event, d) { // change color d3.select(this).attr("fill", 'red'); // content in the tooltip const lines = d.ancestors() .reverse() .slice(1) .map(d => d.data.name) .concat([`Survived: ${d3.format(".0%")(d.value)}`]); const tooltipContent = lines.join("
"); // show the tooltip tooltip .style("visibility", "visible") .html(tooltipContent) .style("left", (event.pageX + 10) + "px") .style("top", (event.pageY - 10) + "px"); event.stopPropagation(); // prevent propagation }) .on("mouseout", function(event, d) { d3.select(this).attr("fill", d => color(d.parent.data.name)); tooltip.style("visibility", "hidden"); }); 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 text = d3.select(this); const lines = d.ancestors() .reverse() .slice(1) .map(d => d.data.name) .concat([`Survived: ${d3.format(".0%")(d.value)}`]); lines.forEach((line, i) => { text.append("tspan") .attr("x", d.x0 + 5) .attr("dy", i === 0 ? 0 : 12) .text(line); }); }); 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.name}`); // hide the tooltip when click outside the svg // d3.select("body").on("click", function() { // tooltip.style("visibility", "hidden"); // }); return svg.node(); }47:[] 43:{"id":"8b3676e90f338bec","slug":null,"title":"Building a Treemap","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2025-11-11T14:21:45.362Z","update_time":"$D2025-11-12T07:30:09.167Z","view_time":null,"first_public_time":"$D2025-11-12T04:02:44.959Z","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":214,"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":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Building a Treemap","cells":[{"id":0,"value":"# Building a Treemap\n## The key functions\n- **d3.hierarchy()**: It is a function that converts a **hierarchical dataset** (a nested object) into a special object that can be used to generate hierarchical layouts \n- **d3.treemap()**: It is a function to compute a hierarchical layout; it should be fed by an object that is the output of d3.hierarchy().\n- Example: [The Treemap for Titanic Survivor Dataset](https://hogwild.github.io/treemap_titanic_survivor/)\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"## Data processing\n- making a hierarchical dataset","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"rawData = d3.csv(\"https://gist.githubusercontent.com/hogwild/2ac0f0b665b4295e0574c85c12bec092/raw/8cee439ac896703d2c95cb805f44bf07d74e933b/titanic.csv\");","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"//convert the data into proper types\nrawData.forEach(d => {\n d.Age = +d.Age;\n d.Fare = +d.Fare;\n d.SibSp = +d.SibSp;\n d.Parch = +d.Parch;\n d.Survived = +d.Survived;\n d.Pclass = \"Class: \" + d.Pclass;\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"#### We should convert the raw data into a nested object, like a tree.\n- d3.groups() is helpful.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":39,"value":"//1. bin the age attribute\nfunction getAgeGroup( d ){\n if (d.Age < 10) {\n return \"Age:[0, 10]\"\n }\n if (10 <= d.Age && d.Age < 20) {\n return \"Age:[10, 20]\"\n }\n if (20 <= d.Age && d.Age < 30) {\n return \"Age:[20, 30]\"\n }\n if (30 <= d.Age && d.Age < 40) {\n return \"Age:[30, 40]\"\n }\n if (40 <= d.Age && d.Age < 50) {\n return \"Age:[40, 50]\"\n }\n if (50 <= d.Age && d.Age < 60) {\n return \"Age:[50, 60]\"\n }\n if (60 <= d.Age && d.Age < 70) {\n return \"Age:[60, 70]\"\n }\n if (70 <= d.Age && d.Age <= 80) {\n return \"Age:[70, 80]\"\n }\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"// 2. data processing: removing incomplete data items and adding age group\ndata = {\n const data = rawData.filter( d => d.Age > 0); //remove those records whose age columns are empty.\n data.forEach(d => d.AgeGroup = getAgeGroup(d));\n return data\n}\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"#### Convert the data into a hierarchy\n- We can group the data item according to some attributes so to create a hierarchy, for example, \"Sex\" --> \"Pclass\" --> \"AgeGroup\"","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":55,"value":"attributes = [ \"Sex\", \"Pclass\", \"AgeGroup\"];","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"//3. Building a tree on the dataset according to the attributes\nfunction buildTree(data, attributes) {\n //data: a list of objects, loaded from backend\n //attributes: the attributes that define the hierarchy \n let itemArr = [];\n if (attributes.length === 0){\n return null;\n }\n let groups = d3.groups( data, d => d[attributes[0]]);\n console.log(\"groups:\", groups);\n let levels = groups.map( d => d[0]);\n // console.log(levels);\n for (let i = 0; i < levels.length; i++) {\n let surviveRate = groups[i][1].filter( d => d.Survived == 1).length/groups[i][1].length;\n itemArr.push({name: levels[i], children: buildTree(groups[i][1], attributes.slice(1)),\n value: surviveRate, group: groups[i][1]});\n } \n return itemArr;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"hierarchy_dataset = buildTree(data, attributes);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"//3.1 convert to d3.hierarchy()\nroot = {\n // adding a root to the hierarchy_dataset\n let root = {name: \"Passangers\", children: hierarchy_dataset, value: data.filter( d => d.Survived == 1).length/data.length}\n //create hierarchy\n root = d3.hierarchy(root)\n //the \"sum\" tells d3 what values are used for calculating the size of the nodes (i.e., rectangles)\n //Note: the \"d.children ? 0 : d.value;\" means, it only uses the values of leaves when computing the size of nodes.\n .sum(d => {\n // console.log(d.children ? 0 : d.value);\n return d.children ? 0 : d.value;\n })\n // Optional: Sort the rectangles by their values so that larger rectangles are arranged first, followed by the smaller ones, which makes the treemap more regular.\n .sort((a, b) => (b.value || 0) - (a.value || 0));\n return root\n};","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"## Simple Treemap\n- create the treemap layout\n- define the colormap\n- build the leaf rectangles\n- add interactions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":83,"value":"layout = {\n const width = 900;\n const height = 600;\n const margin = { top: 20, right: 40, bottom: 20, left: 40, gap: 40 };\n const innerWidth = width - margin.left - margin.right;\n const innerHeight = height - margin.top - margin.bottom;\n const tree_layout = d3.treemap().tile(d3.treemapSquarify).size([innerWidth, innerHeight]).padding(2)\n .round(true);\n return tree_layout\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"tree = layout(root)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"#### design the color map\n- For the leaf rectangles, we prefer to fill them with the hue according to **their parent** so that the rectangles that have the same parent will be in the same hue. It helps people notice the hierarchy.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":95,"value":"color = {\n const parents = tree.leaves().map( d => d.parent.data.name);\n const parentsCategories = parents.filter( (d, idx) => parents.indexOf(d) === idx );\n const color = d3.scaleOrdinal(d3.schemeDark2).domain(parentsCategories);\n return color;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"#### add tooltips","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":152,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"### Wrap the cell into HTML","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":168,"value":"htmlCell = html`

A visualization on the Titanic Dataset

${treeMapTooltip}

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"## Attribute Reordering\n### Design logic:\n- Create dropdown windows for selection; you can use the observable built-in function: **Inputs.select()**\n- Using the selected attributes to create the hierarchical structure of the dataset\n- See the **bonus assignment** for code details ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 44:"$43:body"