2b:null 2c:["$","title",null,{"children":"Hierarchial visualization | Yaroslav Sergienko | Observable"}] 31:T478,hierarchy = { adjVersion; const data1 = R.clone(makeDataById(data)[rootNodeId]); const data1ById = makeDataById(data1); R.toPairs(adjustments).forEach(([nodeId, adj]) => { if (!(nodeId in data1ById)) return; if (adj.collapsed) { data1ById[nodeId].children = []; } }); let cnt = 0; let changed = true; while (changed) { changed = false; R.values(data1ById).forEach((node) => { if (!node.children || node.children.length == 0) return; const newChildren = []; node.children.forEach(child => { if (child.name === '' && (!child.children || child.children.length === 0)) return; newChildren.push(child); }); if (newChildren.length !== node.children.length) { changed = true; node.children = newChildren; } }); console.log(cnt); if (cnt++ > 10) { break; } } const root = d3.hierarchy(data1); if (sorting === 'byCount') { root.count().sort(R.descend(R.prop('value'))); } else if (sorting === 'byHeightAndCount') { root.count().sort((a, b) => b.height - a.height || b.value - a.value); } return root }32:T40b,fileTypes = ({ files: { type: 'lines', example: ['dir1', 'dir1/file1.txt', 'file2.txt'], description: `List of file paths
Can be generated in unix by using:
git ls-tree --full-tree -r --name-only HEAD
find . -name \*.txt -print`, importer: lines => { const tree = {}; const res = {path: '', name: 'root', children: [], childrenByName: {}}; lines.forEach(line => { line = line.trim(); if (!line) return; const path = line.split('/#')[0].split('/'); let obj = res; path.forEach((file, no) => { if (!(file in obj.childrenByName)) { const item = { path: path.slice(0, no + 1).join('/'), name: file, children: [], childrenByName: {}, }; obj.children.push(item); obj.childrenByName[file] = item; } obj = obj.childrenByName[file]; }) }); return res; } } })33:Tace,verticalChart = { hierarchy.dx = lineHeight; hierarchy.dy = width / (hierarchy.height + 2); const root = (leafsOnSingleLevel ? d3.cluster() : d3.tree()) .separation((a, b) => a.parent == b.parent ? 1 : groupSpacing) .nodeSize([hierarchy.dx, hierarchy.dy])(hierarchy); let x0 = Infinity; let x1 = -x0; root.each(d => { if (d.x > x1) x1 = d.x; if (d.x < x0) x0 = d.x; }); const svg = d3.select(DOM.svg(width, x1 - x0 + root.dx)) .style("user-select", "none") .style("width", "100%") .style("height", "auto"); const g = svg.append("g") .attr("style", `font: ${font}`) //.attr("transform", `translate(${root.dy / 1},${root.dx / 2 - x0})`); const ctx = document.createElement('canvas').getContext('2d'); ctx.font = font; const link = g.append("g") .attr("fill", "none") .attr("stroke-width", strokeWidth) .selectAll("path") .data(root.links()) .enter() .append("path") .attr("stroke", ({source: {data: { color }}}) => color) .style('display', item => item.source.data.id === rootNodeId && !showRootEdges ? 'none' : undefined) .attr("d", ({source: {x: sx, y: sy, data: { name }}, target: {x: tx, y: ty}}) => d3.linkHorizontal() .x(d => d.y) .y(d => d.x)({ source: {x: sx, y: sy + ctx.measureText(getLabel(name)).width + 3}, target: {x: tx, y: noClusterIntersection ? sy + hierarchy.dy : ty }}) + (noClusterIntersection ? ` L ${ty} ${tx}`: '')) const node = g.append("g") .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .selectAll("g") .data(root.descendants().reverse()) .enter().append("g") .style('display', d => d.data.id === rootNodeId && !showRoot ? 'none' : undefined) .attr("transform", d => `translate(${d.y},${d.x})`); //node.append("circle") // .attr("fill", d => d.children ? "red" : "green") // .attr("r", 1); const nodeText = node.append("text") .style("cursor", "pointer") .on('click', d => { if (selectedNodeId === d.data.id) { toggleCollapse(selectedNodeId); mutable adjVersion++; } else { mutable selectedNodeId = d.data.id; } }) .attr("fill", d => d.data.id === selectedNodeId && highlight ? "red" : "black") .attr("dy", "0.31em") .attr("x", d => d.children ? 2 : 2) .attr("text-anchor", d => d.children ? "start" : "start") .text(d => getLabel(d.data.name)) if (textOutline) { nodeText.clone(true).lower() .attr("stroke", d => d.data.id in adjustments && adjustments[d.data.id].collapsed && highlight ? "yellow" : "white"); } return [svg, g]; }34:Tbf9,radialChart = { adjVersion; const radius = width / 2; const dy = radius / hierarchy.height; const root = (leafsOnSingleLevel ? d3.cluster() : d3.tree()) .size([2 * Math.PI, radius]) .separation((a, b) => (a.parent == b.parent ? 1 : groupSpacing) / (leafsOnSingleLevel ? 1 : a.depth))(hierarchy); const svg = d3.select(DOM.svg(width, width)) .style("user-select", "none") .style("width", "100%") .style("height", "auto") .style("padding", "10px") //.style("box-sizing", "border-box") .style("font", font); const ctx = document.createElement('canvas').getContext('2d'); ctx.font = font; const g = svg.append("g"); const link = g.append("g") .attr("fill", "none") .attr("stroke-width", strokeWidth) .selectAll("path") .data(root.links()) .enter().append("path") .style('visibility', item => item.source.data.id === rootNodeId && !showRootEdges ? 'hidden' : 'visible') .attr("stroke", ({target: {data: { color }}}) => color) .attr("d", ({source: {x: sx, y: sy, data: { name }}, target: {x: tx, y: ty}}) => d3.linkRadial() .angle(d => d.x) .radius(d => d.y)({ source: {x: sx, y: sy + ctx.measureText(getLabel(name)).width + 10}, target: {x: tx, y: noClusterIntersection ? sy + dy : ty }}) + (noClusterIntersection ? ` L ${d3.pointRadial(tx, ty)[0]} ${d3.pointRadial(tx, ty)[1]}`: '')) const node = g.append("g") .attr("stroke-linejoin", "round") .attr("stroke-width", 3) .selectAll("g") .data(root.descendants().reverse()) .enter().append("g") .attr("transform", d => ` rotate(${d.x * 180 / Math.PI - 90}) translate(${d.y},0) `); //node.append("circle") // .attr("fill", d => d.children ? "#555" : "#999") // .attr("r", 2.5); const nodeText = node.append("text") .style("cursor", "pointer") .on('click', d => { if (selectedNodeId === d.data.id) { toggleCollapse(selectedNodeId); mutable adjVersion++; } else { mutable selectedNodeId = d.data.id; } }) .style('visibility', d => d.data.id === rootNodeId && !showRoot ? 'hidden' : 'visible') .attr("fill", d => d.data.id === selectedNodeId && highlight ? "red" : "black") .attr("dy", "0.31em") .attr("x", d => d.x < Math.PI ? 5 : -5) .attr("text-anchor", d => d.x < Math.PI ? "start" : "end") .attr("transform", d => d.x >= Math.PI ? "rotate(180)" : null) .text(d => getLabel(d.data.name)) if (textOutline) { nodeText.clone(true).lower() .attr("stroke", d => d.data.id in adjustments && adjustments[d.data.id].collapsed && highlight ? "yellow" : "white"); } document.body.appendChild(svg.node()); const box = g.node().getBBox(); svg.remove() .attr("width", box.width) .attr("height", box.height) .attr("viewBox", `${box.x} ${box.y} ${box.width} ${box.height}`); return [svg, g]; }35:[] 2f:{"id":"a53eb579e4dc18de","slug":"hierarchial-visualization","title":"Hierarchial visualization","thumbnail":"48432eaf9b7d47797a018383354cd03da6d499878e9b05b2e6a5bdf73043f8e3","access_level":"public","create_time":"$D2018-10-04T09:16:28.517Z","update_time":"$D2020-11-13T10:16:00.162Z","view_time":null,"first_public_time":"$D2018-10-04T10:11:14.590Z","fork":false,"stars":2,"starred":false,"owner":{"type":"team","id":"ae7dadfe8dcf0cbe","login":"pallada-92","name":"Yaroslav Sergienko","avatar_url":"https://avatars-next.observableusercontent.com/3da8dfae158d0eac994729272d88a21b700faaa2f34a98d6518064aaa722a9c9","tier":"starter_2024"},"version":1000,"publish_version":1000,"role":null,"authored":false,"authors":[{"type":"individual","id":"f19682cf1ab7bdae","login":"pallada-92","name":"Yaroslav Sergienko","avatar_url":"https://avatars-next.observableusercontent.com/3da8dfae158d0eac994729272d88a21b700faaa2f34a98d6518064aaa722a9c9","tier":null}],"members":[{"type":"individual","id":"f19682cf1ab7bdae","login":"pallada-92","name":"Yaroslav Sergienko","avatar_url":"https://avatars-next.observableusercontent.com/3da8dfae158d0eac994729272d88a21b700faaa2f34a98d6518064aaa722a9c9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Hierarchial visualization","cells":[{"id":0,"value":"md`# Hierarchial visualization`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"md`## Import data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":785,"value":"viewof demoData = secureDownload('787be219eb850b87a70a1f9d0ff1b1ef5a0e4c41b518b91d7c806fe0ed96994932ccc916d65aae7b69962e177a345bd8359bc53231df5c74198baf08204037dabedededa2c92e1dfada6cfdf75ed58d6781dd7f7e2ff039b3356c997e9f3b3ab6ad45e346106cfde2450fd4775ed116f895c1d118a4822b485f04a50b3cc3d78c27b358b8e9766d4d9', null) // secureDownload('787be219eb850b87a70a1f9d0ff1b1ef5a0e4c41b518b91d7c806fe0ed96994932ccc916d65aae7b69962e177a345bde0a9dc900630f5a7a1e9185044e106adcb8de0daf329711e2afa901b0a8f158d6781dd725e4ffdbc92d53c76eb9f3e6ac9eda60033502cc095480ce4ca8bfdd6fb590ea3c8e1729af861f7c50b3cc3d78c27b358bb9de71cad79ed8cc66c5d22b3069a98076588dd85377a8f953e9f6f9ba11b9538bbdfd5dacac5afbcd', null)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":21,"value":"viewof file = DOM.input(\"file\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":59,"value":"viewof fileType = selection([\"files\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":62,"value":"{\n let res = `

Format \"`${fileType}`\"

`;\n const entry = fileTypes[fileType];\n res += `

${entry.description}

`;\n res += `

Example:

`;\n res += '

';\n  if (entry.type === 'lines') {\n    res += entry.example.join('\\n');\n    res += '\\n...';\n  }\n  res += '

';\n return html([res]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":968,"value":"viewof demoColors = secureDownload('787be219eb850b87a70a1f9d0ff1b1ef5a0e4c41b518b91d7c806fe0ed96994932ccc916d65aae7b69962e177a345bd8359bc53231df5c74198baf08204037dabedededa2c92e1dfada6cfdf75ed58d6781dd7f7e2ff039b3356c997e9f3b3ab6ad45e346106cfde2450fd4775ed116f895c1d118a4822b485f04a50b3cc3d78c27b358b8e976dd4d299', null)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":956,"value":"viewof colorsFile = DOM.input(\"file\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":184,"value":"md`## Options`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":923,"value":"nameReplacements = ({\n 'root': 'НИУ ВШЭ',\n '0': '0',\n 'cluster': '',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":204,"value":"viewof sorting = selection([\n ['initial', 'No sorting'],\n ['byCount', 'By children count'], \n ['byHeightAndCount', 'By height and count']\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":189,"value":"viewof strokeColor = defaultInput('color', '#CCCCCC')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":857,"value":"viewof strokeWidth = defaultRange(1.5, 0, 10)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":232,"value":"viewof fontFamily = selection([\n [\"400 %% 'Arial'|\", \"Arial\"],\n [\"400 %% 'Calibri'|\", \"Calibri\"],\n [\"400 %% 'Roboto'|https://fonts.googleapis.com/css?family=Roboto&subset=cyrillic\", \"Roboto\"],\n [\"400 %% 'Ubuntu Mono'|https://fonts.googleapis.com/css?family=Ubuntu+Mono:400&subset=cyrillic\", \"Ubuntu Mono\"],\n [\"400 %% 'Charmonman'|https://fonts.googleapis.com/css?family=Charmonman\", \"Charmonman\"],\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":274,"value":"viewof fontSize = defaultRange(20, 1, 30, 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":287,"value":"viewof lineHeight = defaultRange(25, 1, 30, 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":863,"value":"viewof textOutline = defaultInput('checkbox', false)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":903,"value":"viewof showRoot = defaultInput('checkbox', true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":905,"value":"viewof showRootEdges = defaultInput('checkbox', true)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":290,"value":"viewof groupSpacing = defaultRange(2, 1, 10, 0.1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":276,"value":"font = fontCSS(fontFamily, fontSize)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":364,"value":"viewof width = defaultRange(1000, 100, 5000, 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":766,"value":"viewof clipLongNames = DOM.range(5, 400, 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":507,"value":"viewof layoutMode = selection([\n ['differentHeight', 'Different height'],\n ['clusters', 'Equal height'],\n ['clustersNoIntersection', 'Equal height with no edges intersection'],\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":332,"value":"viewof diagramType = selection(['vertical', 'radial'])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":562,"value":"viewof highlight = defaultInput('checkbox', false)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":346,"value":"chart = clipBg(...({vertical: verticalChart, radial: radialChart})[diagramType], 'white', 30)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":810,"value":"{\n const res = html`Set root to node by name `;\n res.children[0].onchange = () => {\n R.values(dataById).map(item => {\n if (res.children[0].value === item.name) {\n mutable rootNodeId = item.id;\n }\n });\n }\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":646,"value":"html`Selected node id = ${selectedNodeId}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":636,"value":"button('Set selected node as root', () => mutable rootNodeId = selectedNodeId, adjVersion && false || adjustments[selectedNodeId] && adjustments[selectedNodeId].collapsed || !dataById[selectedNodeId].children || dataById[selectedNodeId].children.length === 0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":644,"value":"button('Reset root', () => mutable rootNodeId = 0)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":707,"value":"viewof clipValue = defaultRange(100, 1, 10, 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":709,"value":"button(`Clip ${clipValue} layers`, () => {\n hierarchy.each(node => {\n if (node.depth > clipValue) return;\n const id = node.data.id;\n if (node.depth < clipValue) {\n if (id in adjustments) {\n adjustments[id].collapsed = false;\n }\n return;\n }\n if (!node.children || node.children.length === 0) return;\n if (!(id in adjustments)) {\n adjustments[id] = { collapsed: false }\n }\n adjustments[id].collapsed = true;\n })\n mutable adjVersion++;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":718,"value":"button('Reset adjustments', () => {\n R.keys(adjustments).forEach(key => delete adjustments[key]);\n mutable adjVersion++;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":662,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":781,"value":"exportImage(chart, [], `hierarchy_${dataById[rootNodeId].name}_${diagramType}`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":99,"value":"md`\n-----------\n\n-----------\n\n-----------\n# Internals\n-----------\n\n-----------\n\n-----------`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":972,"value":"demoColors","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":942,"value":"mutable colorsAdjData = ({})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":958,"value":"colorsRawData = colorsFile ? Files.text(colorsFile).then(text => JSON.parse(text)) : null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":975,"value":"colorsImporter = obj => R.map(R.head, JSON.parse(obj[0]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":947,"value":"colorsRawData && (mutable colorsAdjData = colorsImporter(colorsRawData))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":980,"value":"demoColors && (mutable colorsAdjData = colorsImporter(demoColors))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":850,"value":"colorsData = {\n const res = {\"0\":\"#D01702\",\"1\":\"#54BD01\",\"2\":\"#0088AE\",\"3\":\"#FC1B17\",\"4\":\"#E10291\",\"5\":\"#00E1E1\",\"6\":\"#00A5E1\",\"7\":\"#E19239\",\"8\":\"#FF69B4\",\"9\":\"#008080\",\"10\":\"#E100A5\",\"11\":\"#A500E1\",\"12\":\"#A020F0\",\"13\":\"#C0C0C0\",\"14\":\"#008000\",\"15\":\"#87CEEB\",\"16\":\"#BBFD30\",\"17\":\"#BB425B\",\"18\":\"#BB9A34\",\"19\":\"#BBDF60\",\"20\":\"#BB10DD\",\"21\":\"#BB5509\",\"22\":\"#BBADE2\",\"23\":\"#BBF20D\",\"24\":\"#BB248B\",\"25\":\"#BB68B6\",\"26\":\"#BBC18F\",\"27\":\"#BB06BB\",\"28\":\"#BB3739\",\"29\":\"#BB7C64\"};\n R.toPairs(res).map(([key, color]) => {\n res[key] = {edgeColor: color};\n });\n R.toPairs(colorsAdjData).map(([key, item]) => {\n res[key] = item;\n });\n return res;\n} // JSON.stringify(R.fromPairs(`...`.split('\\n').map((color, no) => [no, color])))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":828,"value":"rawDemoData = demoData && demoData.split('\\n')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":831,"value":"rawData = file ? Files.text(file).then(text => ['files'].indexOf(fileType) === -1 ? JSON.parse(text) : text.split('\\n')) : null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":837,"value":"rawData && (mutable data = addIds(fileTypes[fileType].importer(rawData), colorsData))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":834,"value":"rawDemoData && (mutable data = addIds(fileTypes.files.importer(rawDemoData), colorsData))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":737,"value":"function addIds(data, colorsData) {\n let curId = 0;\n function traverse(node, defaultColor) {\n if (node.path in colorsData) defaultColor = colorsData[node.path].edgeColor;\n node.color = defaultColor;\n node.id = curId++;\n if (node.children) {\n node.children.forEach(node => traverse(node, defaultColor));\n }\n }\n traverse(data, strokeColor);\n return data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":795,"value":"defaultData = require(\"@observablehq/flare\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":733,"value":"mutable data = addIds(defaultData, colorsData)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":655,"value":"adjustments = ({})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":649,"value":"mutable rootNodeId = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":652,"value":"mutable selectedNodeId = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":658,"value":"mutable adjVersion = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":667,"value":"function makeDataById(data) {\n const res = {};\n function processNode(node) {\n res[node.id] = node;\n if (node.children) {\n node.children.forEach(node => processNode(node));\n }\n }\n processNode(data);\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":688,"value":"dataById = makeDataById(addIds(data, colorsData))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":665,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":418,"value":"import {rasterize} from \"@mbostock/saving-svg\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":421,"value":"serialize = {\n const xmlns = \"http://www.w3.org/2000/xmlns/\";\n const xlinkns = \"http://www.w3.org/1999/xlink\";\n const svgns = \"http://www.w3.org/2000/svg\";\n return function serialize(svg) {\n svg = svg.cloneNode(true);\n svg.setAttributeNS(xmlns, \"xmlns\", svgns);\n svg.setAttributeNS(xmlns, \"xmlns:xlink\", xlinkns);\n const defs = document.createElement('defs');\n defs.innerHTML = ``;\n svg.insertBefore(defs, svg.firstChild);\n const serializer = new window.XMLSerializer;\n const string = serializer.serializeToString(svg);\n return new Blob([string], {type: \"image/svg+xml\"});\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":404,"value":"fontURL = fontFamily.slice(fontFamily.indexOf('|') + 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":138,"value":"html` Font import from ${fontURL}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":267,"value":"\"italic 700 %% Ubuntu Mono\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":251,"value":"function fontCSS(family, size) {\n return family.split('|', 1)[0].replace('%%', size + 'px');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":106,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":207,"value":"function selection(values) {\n var select = document.createElement(\"select\");\n Array.prototype.forEach.call(values, function(value) {\n if (typeof value === 'string') value = [value, value];\n var option = document.createElement(\"option\");\n option.value = value[0];\n option.textContent = value[1];\n select.appendChild(option);\n });\n return select;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":436,"value":"function defaultInput(type, initial) {\n const elem = DOM.input(type);\n if (type === 'checkbox') {\n elem.checked = initial;\n } else {\n elem.value = initial;\n }\n return elem;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":459,"value":"function defaultRange(initial, ...args) {\n const elem = DOM.range(...args);\n elem.value = initial;\n return elem;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":627,"value":"function button(title, onClick, disabled=false) {\n const res = DOM.input('button');\n res.value = title;\n res.onclick = onClick;\n res.disabled = disabled;\n return res;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":514,"value":"leafsOnSingleLevel = layoutMode === 'clusters' || layoutMode === 'clustersNoIntersection'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":518,"value":"noClusterIntersection = layoutMode === 'clustersNoIntersection'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":610,"value":"function toggleCollapse(nodeId) {\n if (nodeId === rootNodeId || dataById[nodeId].children.length === 0) return;\n if (!(nodeId in adjustments)) {\n adjustments[nodeId] = {\n collapsed: false,\n };\n }\n adjustments[nodeId].collapsed = !adjustments[nodeId].collapsed;\n mutable adjVersion++;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":770,"value":"getLabel = text => {\n if (text in nameReplacements) {\n text = nameReplacements[text];\n }\n return text.length > clipLongNames ? text.slice(0, clipLongNames) + '...' : text\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":338,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":341,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":199,"value":"R = require(\"ramda@0.25\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":774,"value":"import { clipBg, exportImage, secureDownload } from \"@pallada-92/visualization-utilities\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"

Format \"${fileType}\"

Example:

Format \"`${fileType}`\"