2e:null 2f:["$","title",null,{"children":"Formula Relationships as Trees | Declan Naughton | Observable"}] 34:T60f,### ✨ ***Try pasting URLs:*** - [HowMuchIs13BillionEuros](https://howmuchis13billioneuros.com/)
`https://rawcdn.githack.com/declann/HowMuchIs13BillionEuros.com/4651a1d7562d3ac1d7da0235311f9e10713d3073/src/cul/how-much.cul.js` - [Savings Calculator](https://calculang.dev/examples-viewer?id=savings)
`https://calculang.dev/models/savings/savings.cul.js` - [Raycasting 🔫](https://next-calculang-gallery.netlify.app/raycasting) | [video](https://www.youtube.com/watch?v=hKVXRACCnqU)
`https://glcdn.githack.com/declann/next-calculang-gallery/-/raw/main/docs/cul/raycasting.cul.js` - [Dungeon Generator](https://calculang-editables.netlify.app/dungeon/dungeon) | [hoot](https://fosstodon.org/@calculang/111961605363861853)
`https://rawcdn.githack.com/declann/calculang-develop-with-framework/98d4adacf02e23a99a731aabf2f9a6264902327e/docs/dungeon/dungeon.cul.js` - [Pension Calculator](https://calculang.dev/examples-viewer?id=pension-calculator)
`https://calculang.dev/models/taxes-pensions/impact.cul.js` - [Actuarial Terms Blog](https://calcwithdec.dev/posts/actuarial-terms-i/)
`https://glcdn.githack.com/declann/calcwithdec.dev/-/raw/main/posts/actuarial-terms-i/cul/portfolio.cul.js` - or pull the **`.cul.js`** link from any example on [calculang.dev](https://calculang.dev):
![Screenshot from 2025-02-24 12-00-09.png](${await FileAttachment("Screenshot from 2025-02-24 12-00-09.png").url()}) - ...or another URL for a calculang model (I use [raw.githack.com](https://raw.githack.com/) to ensure good headers)35:Te1a,tree_visualizations = [ { path: "@d3/treemap@164", 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" }, { path: "@john-guerra/spacetree", thumbnail: "6d2e1f16d415ac13f13740b6155fdcfb8d3836e5b2332277de1e26742ffbcb0c", title: "Zoomable sunburst", author: "D3" } ]36:[{"id":"2ee6c320911e37ebeb366c78e29ae982c017a70e70b95f9ab16f9ba0dd16cd5c2eac91ccd840c3223dfd15ac05e3fd2898fbe6c95f8173aaedc35e23dbcb11a6","href":"https://static.observableusercontent.com/files/2ee6c320911e37ebeb366c78e29ae982c017a70e70b95f9ab16f9ba0dd16cd5c2eac91ccd840c3223dfd15ac05e3fd2898fbe6c95f8173aaedc35e23dbcb11a6","name":"Screenshot from 2025-02-24 12-00-09.png","type":"image/png","lastModified":1740398417256.157,"size":15042}] 32:{"id":"b91aa5cc0c5796a9","slug":"formula-relationships-trees-0","title":"Formula Relationships as Trees","thumbnail":"11676dffad7edd8790332847c91b23a9d5dbcb616dd10fea36a5ea26a728c703","access_level":"public","create_time":"$D2025-02-24T11:31:14.437Z","update_time":"$D2025-02-24T12:30:33.970Z","view_time":null,"first_public_time":"$D2025-02-24T12:20:46.870Z","has_unpublished_edits":null,"fork":{"id":"0ccc8dd71adfc0fc","slug":"try-d3-tree-visualizations","title":"Try D3 Tree Visualizations","owner":{"id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez"}},"stars":2,"starred":false,"owner":{"type":"team","id":"fa28dcfb9c2f53ce","login":"declann","name":"Declan Naughton","avatar_url":"https://avatars-next.observableusercontent.com/b36edfd0f90184ac4c0a8d8726969fe861a1d1fe9417e998413c8a47e6163983","tier":"starter_2024"},"version":463,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fca367047a53a31f","login":"declann","name":"Declan Naughton","avatar_url":"https://avatars-next.observableusercontent.com/b36edfd0f90184ac4c0a8d8726969fe861a1d1fe9417e998413c8a47e6163983","tier":null}],"members":[{"type":"individual","id":"fca367047a53a31f","login":"declann","name":"Declan Naughton","avatar_url":"https://avatars-next.observableusercontent.com/b36edfd0f90184ac4c0a8d8726969fe861a1d1fe9417e998413c8a47e6163983","tier":null,"role":"editor"},{"type":"team","id":"fa28dcfb9c2f53ce","login":"declann","name":"Declan Naughton","avatar_url":"https://avatars-next.observableusercontent.com/b36edfd0f90184ac4c0a8d8726969fe861a1d1fe9417e998413c8a47e6163983","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"ba17c9710e3d4563","slug":"calculang","title":"calculang","owner":{"id":"fa28dcfb9c2f53ce","login":"declann","name":"Declan Naughton"}},"type":"notebook","body":{"title":"Formula Relationships as Trees","cells":[{"id":0,"value":"# Formula Relationships as Trees\n\nNotebook based on template by [John Guerra](https://observablehq.com/@john-guerra/try-d3-tree-visualizations) (using awesome visualization templates from [Mike](https://observablehq.com/user/@mbostock)).\n\n*These examples don't take advantage of link relationships* ⏳ [calculationships](https://observablehq.com/@declann/calculationships-wip) does, but is a bit messier.\n\nTrying a variety of layouts is a nice way to explore, and to make ideas. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":352,"value":"viewof url = Inputs.text({\n label: \"Enter URL of calculang model (.cul.js)\",\n //value: \"https://calculang.dev/models/savings/savings.cul.js\"\n value:\n \"https://rawcdn.githack.com/declann/HowMuchIs13BillionEuros.com/4651a1d7562d3ac1d7da0235311f9e10713d3073/src/cul/how-much.cul.js\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":194,"value":"table = Table(data, { height: 100 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"viewof filterData = Checkbox([\"Filter Data?\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":305,"value":"step2 = md`## 2. Group by attributes`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":405,"value":"DN note: It's neat to reverse the order by dragging (calls within a formula, versus calls to a formula)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":60,"value":"viewof groupBy = {\n const attrs = Object.keys(data[0]);\n return multiAutoSelect({\n options: attrs,\n placeholder: \"Group by\",\n value: [\"to\", \"fromDefinition\"] //attrs.includes(\"Major Genre\") ? [\"Major Genre\", \"MPAA Rating\"] : []\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":308,"value":"step3 = md`## 3 Choose your visualization`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":146,"value":"viewof visualization = Select(\n tree_visualizations.map((d) => d.path),\n {\n label: \"Visualization\",\n value: \"@d3/zoomable-sunburst\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":421,"value":"

\n\n# Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":301,"value":"viewof myHeight = Range([1, 500], { value: 600, step: 10 })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":157,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"dataAsTree = table2Tree(data, groupBy)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"import { importCell } from \"@mbostock/dataflow\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","output":"$undefined","database":"$undefined"},{"id":33,"value":"import { navio } from \"@john-guerra/navio\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","output":"$undefined","database":"$undefined"},{"id":238,"value":"nv = require(\"navio@0.0.66\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"import { links0 as data } with { url } from \"@declann/calculationships-wip\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"