25:["$","title",null,{"children":"Visualizing hierarchical data | Soma Maroju | Observable"}] 49:Td5c,tree_visualizations = [ { path: "@d3/treemap", thumbnail: "278516556172557a945111e81e0996b1e461364bc1402c57e412a33597d2f014", title: "Treemap", author: "D3" }, { path: "@d3/cascaded-treemap", thumbnail: "b9bed4be41769129826de1c775ee5676bd3769c509348389014baaabc30f0530", title: "Cascaded treemap", author: "D3" }, { path: "@d3/nested-treemap", thumbnail: "16fd5847631cddf68b99cf2b1f0dd3d421d2948ef98c2a0c4124846e5725f207", title: "Nested treemap", author: "D3" }, { path: "@d3/circle-packing", thumbnail: "03d2124f60277b56802456cca845106cc66eef77771000ce575a196da6d2fa89", title: "Circle packing", author: "D3" }, { path: "@d3/circle-packing-monochrome", thumbnail: "0e48e60d7963b38acb83f73875b6b00b1520504c92de8b4aa1419b1727fcedb2", title: "Circle packing (monochrome)", author: "D3" }, { path: "@d3/indented-tree", thumbnail: "baa8dac553884e09caa3f0611a077594ebdfcfd9416647f1d5c8457d898a52a6", title: "Indented tree", author: "D3" }, { path: "@d3/tidy-tree", thumbnail: "68a8e7a585cd8cc77279deaa57ad08dfe0b34bdb1ce290de341e299b44144172", title: "Tidy tree", author: "D3" }, { path: "@d3/radial-tidy-tree", thumbnail: "1a0c15e714b00915cbd845b57731fd6286a97e4e95a7ec2ce289682f39a0ce96", title: "Radial tidy tree", author: "D3" }, { path: "@d3/cluster-dendrogram", thumbnail: "87ade408aa70f0875bf4b158dd986350d931884d5b6717cd7fc9b5d2680904c8", title: "Cluster dendrogram", author: "D3" }, { path: "@d3/radial-dendrogram", thumbnail: "2dc4b6a2731a7216b2e5e555ba6d21b045aae900c022724e20c14833294380ed", title: "Radial dendrogram", author: "D3" }, { path: "@d3/sunburst", thumbnail: "5d33e22bc8da09a4495d5bfe0ff207610f2249dc33cbb98505058a4960e8d668", title: "Sunburst", author: "D3" }, { path: "@d3/icicle", thumbnail: "6800ea153fbc5efdde82ed342b0ce8abfc6a7ebbb70b60944a084c790b6fea42", title: "Icicle", author: "D3" }, { path: "@d3/force-directed-tree", thumbnail: "0ba641e54c2be034d5ebee3ff1e202a8efb11aab0f55cb4ef1348d7fcfb90a13", title: "Force-directed tree", author: "D3" }, { path: "@d3/hierarchical-bar-chart", thumbnail: "5969de1a0e9d27715878aceb03d94bb181379a20c80a9dd0e22494e85b1032ff", title: "Hierarchical bar chart", author: "D3" }, { path: "@d3/zoomable-treemap", thumbnail: "7a9c4803cc094ed0788600ad38fecbd0b57e1c5d6c39ce6af4346f9330fa3b1b", title: "Zoomable treemap", author: "D3" }, { path: "@d3/zoomable-circle-packing", thumbnail: "b7cc8cf4a59de5ccd08c47284bd20de50d3cc20fe29d9f76caaef1a2b661abae", title: "Zoomable circle packing", author: "D3" }, { path: "@d3/collapsible-tree", thumbnail: "d7fb434ff8508726495d62191283cd9584d599fb42756eb6dcb924563cb11b50", title: "Collapsible tree", author: "D3" }, { path: "@d3/zoomable-icicle", thumbnail: "f73b8e79e15aac9acdf74ec25ee7606989356d7fbfc8c8513f7c8675851b6501", title: "Zoomable icicle", author: "D3" }, { path: "@d3/zoomable-sunburst", thumbnail: "6d2e1f16d415ac13f13740b6155fdcfb8d3836e5b2332277de1e26742ffbcb0c", title: "Zoomable sunburst", author: "D3" } ]4a:[] 29:{"id":"fe8c393b41c7d11c","slug":null,"title":"Visualizing hierarchical data","thumbnail":"8e8c35a731503ac34bbd6cbfdc29c401bc04c636a66755280c54677a80c71669","access_level":"public","create_time":"$D2023-01-15T04:13:10.233Z","update_time":"$D2023-01-15T04:13:10.233Z","view_time":null,"first_public_time":"$D2023-01-15T04:13:10.233Z","has_unpublished_edits":null,"fork":{"id":"9d916b15ad8e85ad","slug":"visualizing-hierarchical-data","title":"Visualizing hierarchical data","owner":{"id":"e6e1e2a0da500bb6","login":"ee2dev","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"eac78d14fa642354","login":"soma","name":"Soma Maroju","avatar_url":null,"tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":503,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9faaf2168ef63076","login":"soma","name":"Soma Maroju","avatar_url":null,"tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"9faaf2168ef63076","login":"soma","name":"Soma Maroju","avatar_url":null,"tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Visualizing hierarchical data","cells":[{"id":0,"value":"step1 = md`# Visualizing hierarchical data\n\nForked and slightly adjusted from the great notebook: \nhttps://observablehq.com/@john-guerra/try-d3-tree-visualizations\n\n### Data format\n\n- JSON hierarchy:\n - _children_ array contains children\n - _name_ contains the name of the node\n - _value_ contains value for the node\n\n- CSV file (which is converted into a JSON)\n - attributes can be selected in an order to form a hierarchy (names are attribute values)\n - _value_ contains value for the node\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"heading(\" 👉 Choose data set\", 1, 4)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"viewof initialData = dataInput({ initialValue: defaultData })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":351,"value":"initialData","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":457,"value":"heading(\" 🤓 Process your data (if applicable)\", 2, 4)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"options = ({\n /*\n hierarchyColumn: \"DirectoryName\", // column containing the hierarchy split by a delimiter\n hierarchyColumnDelimiter: \"\\\\\",\n name: \"Name\",\n value: \"Length\" // set the value column\n */\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"data = initialData.map((d) => {\n let obj = { ...d };\n\n if (options.value) {\n obj.value = options.value;\n }\n if (options.hierarchyColumn && options.hierarchyColumnDelimiter) {\n obj = { ...obj, ...getLevels(d) };\n }\n return obj;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":361,"value":"function getLevels(col) {\n let ar = col[options.hierarchyColumn].split(options.hierarchyColumnDelimiter);\n let obj = {};\n for (let i = 0; i < 20; i++) {\n if (ar.length > i) {\n obj[\"level_\" + i] = ar[i];\n } else if (ar.length === i) {\n obj[\"level_\" + i] = col[options.name];\n } else {\n obj[\"level_\" + i] = \"\";\n }\n }\n return obj;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":354,"value":"function treeDepth(data) {\n let depth = -1;\n for (let row of data) {\n let _depth = row[options.hierarchyColumn].split(\n options.hierarchyColumnDelimiter\n ).length;\n depth = _depth > depth ? _depth : depth;\n }\n return depth;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"levels = options.hierarchyColumn && options.hierarchyColumnDelimiter\n ? treeDepth(initialData)\n : 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"dataAsTree = table2Tree(data, groupBy, options.value)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"heading(\" 🧐 Check if the data looks right?\", 3, 4)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"viewof myTableView = Inputs.radio([\"table\", \"summary\", \"exploration\"], {\n label: \"Data view:\",\n value: \"table\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"dataView = {\n if (myTableView === \"table\") {\n return Inputs.table(data);\n } else if (myTableView === \"summary\") {\n return SummaryTable(data);\n } else if (myTableView === \"exploration\") {\n return navio(data);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"viewof filterData = Checkbox([\"Filter Data?\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"viewof filteredData = {\n const blankElement = html`

`;\n blankElement.value = data;\n return filterData.length ? navio(data) : blankElement;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"heading(\" 🧐 Group by attributes to form hierarchy\", 4, 4)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":492,"value":"viewof groupBy = Inputs.select(Object.keys(data[0]), {\n label: \"Group by\",\n multiple: true,\n value: Object.keys(data[0]).includes(\"Major Genre\")\n ? [\"Major Genre\", \"MPAA Rating\"]\n : []\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"heading(\" Choose your visualization \", 1, 1, \"blue\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"viewof visualization = Select(tree_visualizations.map(d => d.path), {\n label: \"Visualization\",\n value: \"@d3/cascaded-treemap\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"chart = importCell(\"chart\", visualization, {\n data: dataAsTree,\n height: myHeight\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":301,"value":"viewof myHeight = Range([1, 500], { value: 600, step: 10 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":205,"value":"defaultData = (await require(\"vega-datasets\"))[\"movies.json\"]()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"import { importCell } from \"@mbostock/dataflow\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":56,"value":"import { multiAutoSelect } from \"@john-guerra/multi-auto-select\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"import { table2Tree } from \"@john-guerra/table-2-tree\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"import { navio } from \"@john-guerra/navio\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"import { SummaryTable } from \"@observablehq/summary-table\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"import { Range, Select, Table, Checkbox } from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"import { dataInput } from \"@john-guerra/file-input-with-default-value\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"import { heading } from \"@ee2dev/formatting-in-observable\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":238,"value":"nv = require(\"navio@0.0.66\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null