2f:Tfb3,chart = { const svg = d3.create('svg') .attr('viewBox', [-width/10, -width/10, width, 1.2 * height]) // .attr('viewBox', [-width/10, -width/10, width, 1.2 * height]) .style('margin', '5px') .style('background', '#FCFCFC') .style('border-radius', '15px') .style('box-shadow', '0px 0px 5px 0px rgba(0, 0, 0, 0.075)'); const edgeElements = svg.append('g') .attr('id', 'edges'); const nodeElements = svg.append('g') .attr('id', 'nodes'); return Object.assign(svg.node(), { update(g, nodes, edges) { edgeElements .selectAll('path') .data(edges) .join( enter => enter.append('path') .attr('d', d => d.d) .style('stroke', d => d.stroke) .style('stroke-width', d => d.stroke_width) .style('fill', 'none') .style('opacity', 0) .call( enter => enter.transition() .duration(delay * 0.5) .delay(delay*0.25) .style('opacity', 1) ), update => update.call( update => update.transition() .duration(delay * 0.75) .delay(delay * 0.25) .attr('d', d => d.d) .style('opacity', 1) ), remove => remove.call( remove => remove.transition() .duration(delay * 0.25) .style('opacity', 0) .remove() ) ); nodeElements .selectAll('path') .data(nodes) .join( enter => enter.append('path') .attr('d', d => d.d) .style('stroke', d => d.stroke) .style('stroke-width', d => d.stroke_width) .attr("stroke-linecap", "round") .style('fill', 'none') .style('opacity', 0) .call( enter => enter.transition() .duration(delay * 0.5) .delay(delay * 0.25) .style('opacity', 1) ), update => update.call( update => update.transition() .duration(delay * 0.75) .attrTween('d', function(d) { return d3.interpolatePath( this.getAttribute('d'), d.d ); }) .style('opacity', 1) ), remove => remove.call( remove => remove.transition() .duration(delay * 0.25) .style('opacity', 0) .remove() ) ); nodeElements .selectAll('text') .data(nodes) .join( enter => enter.append('text') .filter(d => (d.x != null) && (d.y != null)) .text(d => d.data_id) .attr('transform', d => `translate(${d.x}, ${d.y})`) .attr('text-anchor', 'left') .style('font-family', 'Helvetica, Arial, sans-serif') .style('font-size', '11px') .style('paint-order', 'stroke') .style('stroke', '#FCFCFC') .style('stroke-width', 2.5) .style('stroke-linecap', 'round') .style('stroke-linejoin', 'round') .call( enter => enter.transition() .duration(delay * 0.5) .delay(delay * 0.25) .style('opacity', 1) ), update => update.call( update => update.transition() .duration(delay * 0.75) .text(d => d.data_id) .attr('transform', d => `translate(${d.x}, ${d.y})`) .style('opacity', 1) ), remove => remove.call( remove => remove.transition() .duration(delay * 0.25) .style('opacity', 0) .remove() ) ); return 'I arrange the graph...'; } }); }30:Tfb4,chart0 = { const svg = d3.create('svg') .attr('viewBox', [-width/10, -width/10, width, 1.2 * height]) // .attr('viewBox', [-width/10, -width/10, width, 1.2 * height]) .style('margin', '5px') .style('background', '#FCFCFC') .style('border-radius', '15px') .style('box-shadow', '0px 0px 5px 0px rgba(0, 0, 0, 0.075)'); const edgeElements = svg.append('g') .attr('id', 'edges'); const nodeElements = svg.append('g') .attr('id', 'nodes'); return Object.assign(svg.node(), { update(g, nodes, edges) { edgeElements .selectAll('path') .data(edges) .join( enter => enter.append('path') .attr('d', d => d.d) .style('stroke', d => d.stroke) .style('stroke-width', d => d.stroke_width) .style('fill', 'none') .style('opacity', 0) .call( enter => enter.transition() .duration(delay * 0.5) .delay(delay*0.25) .style('opacity', 1) ), update => update.call( update => update.transition() .duration(delay * 0.75) .delay(delay * 0.25) .attr('d', d => d.d) .style('opacity', 1) ), remove => remove.call( remove => remove.transition() .duration(delay * 0.25) .style('opacity', 0) .remove() ) ); nodeElements .selectAll('path') .data(nodes) .join( enter => enter.append('path') .attr('d', d => d.d) .style('stroke', d => d.stroke) .style('stroke-width', d => d.stroke_width) .attr("stroke-linecap", "round") .style('fill', 'none') .style('opacity', 0) .call( enter => enter.transition() .duration(delay * 0.5) .delay(delay * 0.25) .style('opacity', 1) ), update => update.call( update => update.transition() .duration(delay * 0.75) .attrTween('d', function(d) { return d3.interpolatePath( this.getAttribute('d'), d.d ); }) .style('opacity', 1) ), remove => remove.call( remove => remove.transition() .duration(delay * 0.25) .style('opacity', 0) .remove() ) ); nodeElements .selectAll('text') .data(nodes) .join( enter => enter.append('text') .filter(d => (d.x != null) && (d.y != null)) .text(d => d.data_id) .attr('transform', d => `translate(${d.x}, ${d.y})`) .attr('text-anchor', 'left') .style('font-family', 'Helvetica, Arial, sans-serif') .style('font-size', '11px') .style('paint-order', 'stroke') .style('stroke', '#FCFCFC') .style('stroke-width', 2.5) .style('stroke-linecap', 'round') .style('stroke-linejoin', 'round') .call( enter => enter.transition() .duration(delay * 0.5) .delay(delay * 0.25) .style('opacity', 1) ), update => update.call( update => update.transition() .duration(delay * 0.75) .text(d => d.data_id) .attr('transform', d => `translate(${d.x}, ${d.y})`) .style('opacity', 1) ), remove => remove.call( remove => remove.transition() .duration(delay * 0.25) .style('opacity', 0) .remove() ) ); return 'I arrange the graph...'; } }); }31:T10a5,constructTangleLayout = (levels, options={}) => { // 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('-X-'); if (id in index) { index[id].parents = index[id].parents.concat(n.parents); } else { index[id] = { id: id, parents: n.parents.slice(), level: i, span: i - d3.min(n.parents, p => p.level) }; } 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.sort((a,b) => d3.descending(d3.max(a, d => d.span), d3.max(b, d => d.span))) 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 = 50; // const bundle_width = 14; // const level_y_padding = 16; // const metro_d = 4; // const min_family_height = 22; options.c ||= 16; const c = options.c; options.bigc ||= node_width+c; 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 = d3.max(b.parents, d => d.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.yb = l.bundle.y; 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 - 3*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 ? Math.min(options.bigc, l.xb-l.xt, l.yb-l.yt)-c : c; l.c2 = c; }); var layout = { width: d3.max(nodes, n => n.x) + node_width + 2 * padding, 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:T699,renderChart = (data, options={}) => { options.color ||= (d, i) => color(i) const tangleLayout = constructTangleLayout(_.cloneDeep(data), options); return svg``; }33:T43d,{var div = DOM.element('div') var footnote1 = footnote("intro", 1, `A. Bezerianos, P. Dragicevic, J. Fekete, J. Bae and B. Watson, "GeneaQuilts: A System for Exploring Large Genealogies," in IEEE Transactions on Visualization and Computer Graphics, vol. 16, no. 6, pp. 1073-1081, Nov.-Dec. 2010, doi: 10.1109/TVCG.2010.159.`) var footnote2 = footnote("intro", 2, `Javier García Fernández, "D3 Transitions": https://www.d3indepth.com/transitions/`) var footnote3 = footnote("intro", 3, `mcmcclur, "Embed Width":https://talk.observablehq.com/t/embed-width/3197/6`) var footnote4 = footnote("intro", 4, `Bartosz Prusinowski, "Step-by-step directed graph drawing (dagre layout)":https://observablehq.com/@bartok32/step-by-step-directed-graph-drawing-dagre-layout`) var footnote5 = footnote("intro", 5, `Matteo Abrate, "Tangled tree visualization (simple)":https://observablehq.com/@nitaku/tangled-tree-visualization`) div.appendChild(footnote1) div.appendChild(footnote2) div.appendChild(footnote3) div.appendChild(footnote4) div.appendChild(footnote5) return div; }34:[] 2d:{"title":"Bio Science - Curriculum Path - v2","cells":[{"id":0,"value":"md`# Bio Science - Curriculum Path - v2`","pinned":false,"hidden":false,"mode":"ojs"},{"id":698,"value":"viewof select = Inputs.select(category, {label: \"Category:\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1350,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":527,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":"md`## Variable`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1190,"value":"graph = d3.create('svg').append('g')","pinned":false,"hidden":false,"mode":"ojs"},{"id":1368,"value":"graph0 = d3.create('svg').append('g')","pinned":true,"hidden":false,"mode":"ojs"},{"id":963,"value":"lines = Array.from(renderChart(dummyE[select]).querySelector(\"#edges\").children).map(child =>\n({\n d: child.getAttribute(\"d\"),\n stroke : child.getAttribute(\"stroke\"),\n stroke_width: child.getAttribute(\"stroke-width\"),\n data_id : child.getAttribute(\"data-id\")\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1353,"value":"lines0 = Array.from(renderChart(dummyE0[select]).querySelector(\"#edges\").children).map(child =>\n({\n d: child.getAttribute(\"d\"),\n stroke : child.getAttribute(\"stroke\"),\n stroke_width: child.getAttribute(\"stroke-width\"),\n data_id : child.getAttribute(\"data-id\")\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":929,"value":"labels = Array.from(renderChart(dummyE[select]).querySelector(\"#nodes\").children).map(child =>({\n d: child.getAttribute(\"d\"),\n x: child.getAttribute(\"x\"),\n y: child.getAttribute(\"y\"),\n style: child.getAttribute(\"style\"),\n stroke : child.getAttribute(\"stroke\"),\n stroke_width: child.getAttribute(\"stroke-width\"),\n data_id : child.getAttribute(\"data-id\")}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1355,"value":"labels0 = Array.from(renderChart(dummyE0[select]).querySelector(\"#nodes\").children).map(child =>({\n d: child.getAttribute(\"d\"),\n x: child.getAttribute(\"x\"),\n y: child.getAttribute(\"y\"),\n style: child.getAttribute(\"style\"),\n stroke : child.getAttribute(\"stroke\"),\n stroke_width: child.getAttribute(\"stroke-width\"),\n data_id : child.getAttribute(\"data-id\")}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":1063,"value":"sideeffect = chart.update(graph, labels, lines)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1361,"value":"sideeffect0 = chart0.update(graph0, labels0, lines0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1235,"value":"// padding = 8;\npadding = width / 100;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1237,"value":"// node_height = 22;\nnode_height = width / 40;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1239,"value":"// node_width = 50;\nnode_width = width / 20;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1242,"value":"// bundle_width = 14;\nbundle_width = width / 50;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1244,"value":"// level_y_padding = 16;\nlevel_y_padding = width / 50;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1246,"value":"// metro_d = 4;\nmetro_d = width / 200;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1248,"value":"// min_family_height = 22;\nmin_family_height = width / 40;","pinned":false,"hidden":false,"mode":"ojs"},{"id":1293,"value":"height = Math.max(renderChart(dummyE[select]).height.baseVal.value, renderChart(dummyE0[select]).height.baseVal.value)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1339,"value":"width0 = renderChart(dummyE[select]).width.baseVal.value","pinned":true,"hidden":false,"mode":"ojs"},{"id":1357,"value":"width00 = renderChart(dummyE0[select]).width.baseVal.value","pinned":true,"hidden":false,"mode":"ojs"},{"id":1200,"value":"md`## Function`","pinned":false,"hidden":false,"mode":"ojs"},{"id":523,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":239,"value":"color = d3.scaleOrdinal(d3.schemeDark2)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1206,"value":"md`## Constant`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1220,"value":"width","pinned":false,"hidden":false,"mode":"ojs"},{"id":435,"value":"background_color = 'white'","pinned":false,"hidden":false,"mode":"ojs"},{"id":1060,"value":"delay = 650","pinned":false,"hidden":false,"mode":"ojs"},{"id":532,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"d3 = require('d3-scale', 'd3-scale-chromatic', 'd3-array', 'd3-selection', \"d3@v7\", \"d3-interpolate-path@v2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":521,"value":"_ = require(\"lodash\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":546,"value":"import {footnote} from \"@jashkenas/markdown-style-footnotes\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"import {dummyE0, dummyE, category} from \"@cs7290/geocoding-bioscience-map-of-maine-filter\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":535,"value":"md`## References`","pinned":false,"hidden":false,"mode":"ojs"},{"id":539,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}