3e:null 3f:["$","title",null,{"children":"Tree Map | Yan Wu | Observable"}] 45:T426,decile_income=[ { "Quantile": "Decile1", "Label": "Less than $16,468", "Lower": 0, "Upper": 16468 }, { "Quantile": "Decile2", "Label": "$16,469 to $26,502", "Lower": 16469, "Upper": 26502 }, { "Quantile": "Decile3", "Label": "$26,503 to $38,173", "Lower": 26503, "Upper": 38173 }, { "Quantile": "Decile4", "Label": "$38,174 to $50,556", "Lower": 38174, "Upper": 50556 }, { "Quantile": "Decile5", "Label": "$50,557 to $65,000", "Lower": 50557, "Upper": 65000 }, { "Quantile": "Decile6", "Label": "$65,001 to $82,300", "Lower": 65001, "Upper": 82300 }, { "Quantile": "Decile7", "Label": "$82,301 to $105,000", "Lower": 82301, "Upper": 105000 }, { "Quantile": "Decile8", "Label": "$105,001 to $137,000", "Lower": 105001, "Upper": 137000 }, { "Quantile": "Decile9", "Label": "$137,001 to $202,491", "Lower": 137001, "Upper": 202491 }, { "Quantile": "Decile10", "Label": "More than $202,492", "Lower": 202492, "Upper": null } ]46:Tf6c, function Treemap(data, { path, id = Array.isArray(data) ? d => d.id : null, parentId = Array.isArray(data) ? d => d.parentId : null, children, value, sort = (a, b) => d3.descending(a.value, b.value), label, group, title, link, linkTarget = "_blank", tile = d3.treemapBinary, width = 640, height = 400, margin = 0, marginTop = margin, marginRight = margin, marginBottom = margin, marginLeft = margin, padding = 1, paddingInner = padding, paddingOuter = padding, paddingTop = paddingOuter, paddingRight = paddingOuter, paddingBottom = paddingOuter, paddingLeft = paddingOuter, round = true, colors = d3.schemeTableau10, zDomain, fill = "#ccc", fillOpacity = group == null ? null : 0.6, stroke, strokeWidth, strokeOpacity, strokeLinejoin, } = {}) { const root = path != null ? d3.stratify().path(path)(data) : id != null || parentId != null ? d3.stratify().id(id).parentId(parentId)(data) : d3.hierarchy(data, children); // Compute the values of internal nodes by aggregating from the leaves. value == null ? root.count() : root.sum(d => Math.max(0, value(d))); // Prior to sorting, if a group channel is specified, construct an ordinal color scale. const leaves = root.leaves(); const G = group == null ? null : leaves.map(d => group(d.data, d)); if (zDomain === undefined) zDomain = G; zDomain = new d3.InternSet(zDomain); const color = group == null ? null : d3.scaleOrdinal(zDomain, colors); // Compute labels and titles. const L = label == null ? null : leaves.map(d => label(d.data, d)); const T = title === undefined ? L : title == null ? null : leaves.map(d => title(d.data, d)); // Sort the leaves (typically by descending value for a pleasing layout). if (sort != null) root.sort(sort); // Compute the treemap layout. d3.treemap() .tile(tile) .size([width - marginLeft - marginRight, height - marginTop - marginBottom]) .paddingInner(paddingInner) .paddingTop(paddingTop) .paddingRight(paddingRight) .paddingBottom(paddingBottom) .paddingLeft(paddingLeft) .round(round) (root); const svg = d3.create("svg") .attr("viewBox", [-marginLeft, -marginTop, width, height]) .attr("width", width) .attr("height", height) .attr("style", "max-width: 100%; height: auto; height: intrinsic;") .attr("font-family", "sans-serif") .attr("font-size", 10); const node = svg.selectAll("a") .data(leaves) .join("a") .attr("xlink:href", link == null ? null : (d, i) => link(d.data, d)) .attr("target", link == null ? null : linkTarget) .attr("transform", d => `translate(${d.x0},${d.y0})`); node.append("rect") .attr("fill", color ? (d, i) => color(G[i]) : fill) .attr("fill-opacity", fillOpacity) .attr("stroke", stroke) .attr("stroke-width", strokeWidth) .attr("stroke-opacity", strokeOpacity) .attr("stroke-linejoin", strokeLinejoin) .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0); if (T) { node.append("title").text((d, i) => T[i]); } if (L) { // A unique identifier for clip paths (to avoid conflicts). const uid = `O-${Math.random().toString(16).slice(2)}`; node.append("clipPath") .attr("id", (d, i) => `${uid}-clip-${i}`) .append("rect") .attr("width", d => d.x1 - d.x0) .attr("height", d => d.y1 - d.y0); node.append("text") .attr("clip-path", (d, i) => `url(${new URL(`#${uid}-clip-${i}`, location)})`) .selectAll("tspan") .data((d, i) => `${L[i]}`.split(/\n/g)) .join("tspan") .attr("x", 3) .attr("y", (d, i, D) => `${(i === D.length - 1) * 0.3 + 1.1 + i * 0.9}em`) .attr("fill-opacity", (d, i, D) => i === D.length - 1 ? 0.7 : null) .text(d => d); } return Object.assign(svg.node(), {scales: {color}}); }47:[{"id":"fa0b6c0ae45f3302c05fa0ce445c91fbb6ba4280e74ae5a9f163a57690ed60d0242b666b3d5fd32fd3da38516683e1f08ac4730dc6e117b2cda2a1f1056b428a","href":"https://static.observableusercontent.com/files/fa0b6c0ae45f3302c05fa0ce445c91fbb6ba4280e74ae5a9f163a57690ed60d0242b666b3d5fd32fd3da38516683e1f08ac4730dc6e117b2cda2a1f1056b428a","name":"kenya-population-1.json","type":"application/json","lastModified":1671219305563.947,"size":52999},{"id":"df15d556dd588e1f6deddc2eb97787d45e23b249a7ac0ba892fc9021661935cb9f480c7e5ff7f501b0b13eea4f52f9884536f0d04a17b2d33043fd4a28378bd7","href":"https://static.observableusercontent.com/files/df15d556dd588e1f6deddc2eb97787d45e23b249a7ac0ba892fc9021661935cb9f480c7e5ff7f501b0b13eea4f52f9884536f0d04a17b2d33043fd4a28378bd7","name":"cost_change_income_decile.csv","type":"text/csv","lastModified":1671219415469.577,"size":44003}] 43:{"id":"7e57211232875d56","slug":null,"title":"Tree Map","thumbnail":"499ef3d2c08058f1291091820da5769158c08072d6dfcccb6f79f0f3ea28d986","access_level":"public","create_time":"$D2022-12-16T19:35:05.563Z","update_time":"$D2023-01-05T23:14:43.580Z","view_time":null,"first_public_time":"$D2022-12-16T19:35:05.563Z","has_unpublished_edits":null,"fork":{"id":"e68d2fc169380242","slug":"tree-map","title":"Tree Map","owner":{"id":"f485774dba3a3f14","login":"frankluo426","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"b395fcc1dd8ae22e","login":"hermionewy","name":"Yan Wu","avatar_url":"https://avatars-next.observableusercontent.com/6811bb1dfdf5314bac440d335f565765e80d51660c04e3e37f79b7e50792eba7","tier":"starter_2024","bio":"Designer, Coder, Journalist, Storyteller","following":false},"version":86,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f7c45ac5dd13b71b","login":"hermionewy","name":"Yan Wu","avatar_url":"https://avatars-next.observableusercontent.com/6811bb1dfdf5314bac440d335f565765e80d51660c04e3e37f79b7e50792eba7","tier":null,"bio":"Designer, Coder, Journalist, Storyteller","following":false}],"members":[{"type":"individual","id":"f7c45ac5dd13b71b","login":"hermionewy","name":"Yan Wu","avatar_url":"https://avatars-next.observableusercontent.com/6811bb1dfdf5314bac440d335f565765e80d51660c04e3e37f79b7e50792eba7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Tree Map","cells":[{"id":0,"value":"# Tree Map\nTree map is a structure similar to Cluster map. Both of them tend to show how many different categories of things there are in a category. But the difference is that Treemap tends to show how many different kinds of things there are, and how many sizes they are. This data structure allows us to clearly see the categories of a set of data and how they are classified. I think this can be widely applied to the classification of organisms, which has a strong hierarchical relationship and also needs to express the proportion of an organism.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":68,"value":"viewof keyword = select({options:allKeys , title:\"Selected keyword\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"sumPrice = d3.sum(dataParsed, d=> d[keyword])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"chart = Treemap(dataParsed, {\n path: d => `all/${d.section}/${d.Description}`, // e.g., \"flare/animate/Easing\"\n value: d => d? d[keyword]: 0, // size of each node (file); null for internal nodes (folders)\n group: d => d.section, // e.g., \"animate\" in \"flare.animate.Easing\"; for color\n label: (d, n) => `${d.Description}\\n ${'$'+d[keyword]}`,\n title: (d, n) => `${d.Description}\\n${d[keyword]}`, // text to show on hover\n tile: d3.treemapSquarify,\n width: 1000,\n height: 1000\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"data = FileAttachment(\"cost_change_income_decile.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"allKeys=Object.keys(data[1]).splice(2,12)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"dataParsed = data.filter(t=>{\n if(t['UCC']==='0') return false;\n let parsed = true;\n allKeys.map(k=>{\n if(t[k]==='NA'){\n parsed = false;\n return parsed\n }\n })\n t['section'] = getSection(t.UCC.slice(-6, -4))\n return parsed\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"function getSection(num){\n if(+num<=17 ){\n return 'Food'\n } else if (+num<=20){\n return 'Alcoholic beverages'\n } else if (+num<=24){\n return 'Housing'\n } else if (+num<=26){\n return 'Energy'\n } else if (+num<=35){\n return 'Home improvement'\n }else if (+num<=44){\n return 'Apparel and services'\n }else if (+num<=53){\n return 'Transportation'\n }else if (+num<=58){\n return 'Healthcare'\n }else if (+num<=62){\n return 'Entertainment'\n }else if (+num<=65){\n return 'Personal care'\n }else if (+num<=67 || num===69){\n return 'Education'\n }else if (+num<=68){\n return 'Other services'\n }else{\n return 'Others'\n }\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"viewData = processData(dataset);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"processData = (data)=>{\n let result = [];\n let nameStack = [data.name];\n data.children.forEach(d=>{\n nameStack.push(d.name);\n d.children.forEach(c=>{\n nameStack.push(c.name);\n // result.push(\n // {\n // \"name\" : nameStack.join(\".\") + \".Male\",\n // \"size\" : c.Male\n // }\n // );\n // result.push(\n // {\n // \"name\" : nameStack.join(\".\") + \".Female\",\n // \"size\" : c.Female\n // }\n // );\n // result.push(\n // {\n // \"name\" : nameStack.join(\".\") + \".Intersex\",\n // \"size\" : c.Intersex\n // }\n // );\n result.push(\n {\n \"name\" : nameStack.join(\".\"),\n \"size\" : c.Male + c.Female + c.Intersex\n }\n );\n nameStack.pop();\n });\n nameStack.pop();\n });\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"dataset = FileAttachment(\"kenya-population-1.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"$46","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"import {select, color} from \"@jashkenas/inputs\"","pinned":true,"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"