2a:null 2b:["$","title",null,{"children":"Conceptual Model Tree Visualization | Kinshuk Kulshreshtha | Observable"}] 30:T4b5,svg``31:T1213,data = { var levels = [ [ {id: 'Broadband PS'}, {id: 'Bandwidth PS'}, {id: 'Voice PS'}, {id: 'Text PS'} ], [ {id: 'Broadband CFS', parents: ['Broadband PS', 'Bandwidth PS']}, {id: 'Mobile CFS', parents: ['Voice PS', 'Text PS']}, ], [ {id: 'DSL RFS', parents: ['Broadband CFS']}, {id: 'DOCSIS RFS', parents: ['Broadband CFS']}, {id: 'Fiber RFS', parents: ['Broadband CFS']}, {id: 'GSM RFS', parents: ['Mobile CFS']}, {id: '4G RFS', parents: ['Mobile CFS']}, ], [ {id: 'DSLAM', parents: ['DSL RFS']}, {id: 'ADSL Port', parents: ['DSL RFS']}, {id: 'Docsis Modem', parents: ['DOCSIS RFS']}, {id: 'Docsis Port', parents: ['DOCSIS RFS']}, {id: 'OLT', parents: ['Fiber RFS']}, {id: 'GPON Port', parents: ['Fiber RFS']}, {id: 'MSISDN', parents: ['GSM RFS', '4G RFS']}, {id: 'IMSI', parents: ['GSM RFS', '4G RFS']}, {id: 'HLR', parents: ['GSM RFS']}, {id: 'HSS', parents: ['4G RFS']}, ] ] // precompute level depth levels.forEach((l,i) => l.forEach(n => n.level = i)) var nodes = levels.reduce( ((a,x) => a.concat(x)), [] ) var nodes_index = {} nodes.forEach(d => nodes_index[d.id] = d) // objectification nodes.forEach(d => { d.parents = (d.parents === undefined ? [] : d.parents).map(p => nodes_index[p]) }) // precompute bundles levels.forEach((l, i) => { var index = {} l.forEach(n => { if(n.parents.length == 0) { return } var id = n.parents.map(d => d.id).sort().join('--') if (id in index) { index[id].parents = index[id].parents.concat(n.parents) } else { index[id] = {id: id, parents: n.parents.slice(), level: i} } n.bundle = index[id] }) l.bundles = Object.keys(index).map(k => index[k]) l.bundles.forEach((b, i) => b.i = i) }) var links = [] nodes.forEach(d => { d.parents.forEach(p => links.push({source: d, bundle: d.bundle, target: p})) }) var bundles = levels.reduce( ((a,x) => a.concat(x.bundles)), [] ) // reverse pointer from parent to bundles bundles.forEach(b => b.parents.forEach(p => { if(p.bundles_index === undefined) { p.bundles_index = {} } if(!(b.id in p.bundles_index)) { p.bundles_index[b.id] = [] } p.bundles_index[b.id].push(b) })) nodes.forEach(n => { if(n.bundles_index !== undefined) { n.bundles = Object.keys(n.bundles_index).map(k => n.bundles_index[k]) } else { n.bundles_index = {} n.bundles = [] } n.bundles.forEach((b, i) => b.i = i) }) links.forEach(l => { if(l.bundle.links === undefined) { l.bundle.links = [] } l.bundle.links.push(l) }) // layout const padding = 8 const node_height = 22 const node_width = 70 const bundle_width = 14 const level_y_padding = 16 const metro_d = 4 const c = 16 const min_family_height = 16 nodes.forEach(n => n.height = (Math.max(1, n.bundles.length)-1)*metro_d) var x_offset = padding var y_offset = padding levels.forEach(l => { x_offset += l.bundles.length*bundle_width y_offset += level_y_padding l.forEach((n, i) => { n.x = n.level*node_width + x_offset n.y = node_height + y_offset + n.height/2 y_offset += node_height + n.height }) }) var i = 0 levels.forEach(l => { l.bundles.forEach(b => { b.x = b.parents[0].x + node_width + (l.bundles.length-1-b.i)*bundle_width b.y = i*node_height }) i += l.length }) links.forEach(l => { l.xt = l.target.x l.yt = l.target.y + l.target.bundles_index[l.bundle.id].i*metro_d - l.target.bundles.length*metro_d/2 + metro_d/2 l.xb = l.bundle.x l.xs = l.source.x l.ys = l.source.y }) // compress vertical space var y_negative_offset = 0 levels.forEach(l => { y_negative_offset += -min_family_height + d3.min(l.bundles, b => d3.min(b.links, link => (link.ys-c)-(link.yt+c))) || 0 l.forEach(n => n.y -= y_negative_offset) }) // very ugly, I know links.forEach(l => { l.yt = l.target.y + l.target.bundles_index[l.bundle.id].i*metro_d - l.target.bundles.length*metro_d/2 + metro_d/2 l.ys = l.source.y l.c1 = l.source.level-l.target.level > 1 ? node_width+c : c l.c2 = c }) var layout = { height: d3.max(nodes, n => n.y) + node_height/2 + 2*padding, node_height, node_width, bundle_width, level_y_padding, metro_d } return {levels, nodes, nodes_index, links, bundles, layout} }32:[] 2e:{"id":"52d7039ac751ede4","slug":"conceptual-model-tree-visualization","title":"Conceptual Model Tree Visualization","thumbnail":"505c9e761da48d7d8cb47e7086bfefaeeb08920d7cf8deb9467e1a7b75ca5738","access_level":"public","create_time":"$D2019-08-02T09:22:48.821Z","update_time":"$D2019-08-02T09:36:03.860Z","view_time":null,"first_public_time":"$D2019-08-02T09:29:05.215Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"b8a9ab40afb40aac","login":"kkulshreshtha","name":"Kinshuk Kulshreshtha","avatar_url":"https://avatars-next.observableusercontent.com/4cbb74d83d1ca5f02fa45241d398f660b9ecae0256acd2a2eba6dbeef973fc1c","tier":"starter_2024"},"version":443,"publish_version":443,"role":null,"authored":false,"authors":[{"type":"individual","id":"0dfcd32466778783","login":"kkulshreshtha","name":"Kinshuk Kulshreshtha","avatar_url":"https://avatars-next.observableusercontent.com/4cbb74d83d1ca5f02fa45241d398f660b9ecae0256acd2a2eba6dbeef973fc1c","tier":null}],"members":[{"type":"individual","id":"0dfcd32466778783","login":"kkulshreshtha","name":"Kinshuk Kulshreshtha","avatar_url":"https://avatars-next.observableusercontent.com/4cbb74d83d1ca5f02fa45241d398f660b9ecae0256acd2a2eba6dbeef973fc1c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Conceptual Model Tree Visualization","cells":[{"id":0,"value":"md`# Conceptual Model Tree Visualization`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"color = d3.scaleOrdinal(d3.schemeDark2)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":242,"value":"d3 = require('d3-scale', 'd3-scale-chromatic', 'd3-array')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1"}} 2f:"$2e:body"