25:["$","title",null,{"children":"Illustrating SNOMED CT concept definition evolution using d3-graphviz | Jamie LaPaglia | Observable"}] 49:T336b,{ console.log('magjac 100: tween'); playPathTweening; yield html`

`; var dotIndex = 0; var graphviz = d3.select("#graph2").graphviz(false) .transition(function () { return d3.transition() .ease(d3.easeLinear) .delay(500) .duration(dotIndex * dotIndex * 800); }); function attributer(datum, index, nodes) { var selection = d3.select(this); if (datum.tag == "svg") { //var width = 500; var height = 400 * width / 964; var scale = 1.5 * width / 964; var viewBox = `0 0 ${width * 3 / 4 / scale} ${height * 3 / 4 / scale}`; selection .attr("width", width) .attr("height", height) .attr("viewBox", `${viewBox}`); datum.attributes.width = width; datum.attributes.height = height; datum.attributes.viewBox = `${viewBox}`; } } function render() { var dotLines = dots[dotIndex % dots.length]; var dot = dotLines.join(''); graphviz .tweenPaths(tweenPaths) .zoom(false) .tweenShapes(false) .attributer(attributer) .renderDot(dot) .on('end', function () { dotIndex += 1; if (dotIndex != dots.length) { render(); } }); } var dots = [ [ 'strict digraph G { rankdir=LR; ranksep=.3; node [shape=box, fontsize=9, fontname=Helvetica, style=filled, fillcolor=white]', '"20020131"->"230690007" [style=invis]', '"230690007"->"DN"', '"DN"->"BN0"', '"BN0"->"62914000" [arrowhead=onormal]', '"BN0"->"363698007_2"', '"363698007_2"->"59820001_2"', '"BN0"->"363698007_3"', '"363698007_3"->"28661005_3"', '"BN0" [shape=circle, fontsize=0, width=0, style=filled, fillcolor=black]', '"DN" [shape=circle, fontsize=27, margin=0, width=0, label="⊆", labelloc=c, style=filled, fillcolor=white]', '"363698007_2" [label="363698007\nFinding site\n", shape=box, peripheries=2, style="rounded,filled", fillcolor="#FFFFCC"]', '"363698007_3" [label="363698007\nFinding site\n", shape=box, peripheries=2, style="rounded,filled", fillcolor="#FFFFCC"]', '"230690007" [label="230690007\nStroke\n", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '"20020131" [label="20020131", shape=box, peripheries=2, style=filled, fillcolor=pink]', '"62914000" [label="62914000\nCerebrovascular disease\n", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"59820001_2" [label="59820001\nBlood vessel structure\n", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '"28661005_3" [label="28661005\nCerebrovascular system structure\n", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '}' ], [ 'strict digraph G { rankdir=LR; ranksep=.3; node [shape=box, fontsize=9, fontname=Helvetica, style=filled, fillcolor=white]', '"20020731"->"230690007" [style=invis]', '"230690007"->"DN"', '"DN"->"BN0"', '"BN0"->"62914000" [arrowhead=onormal]', '"BN0"->"363698007_2"', '"363698007_2"->"28661005_2"', '"BN0" [shape=circle, fontsize=0, width=0, style=filled, fillcolor=black]', '"DN" [shape=circle, fontsize=27, margin=0, width=0, label="⊆", labelloc=c, style=filled, fillcolor=white]', '"363698007_2" [label="363698007\nFinding site\n", shape=box, peripheries=2, style="rounded,filled", fillcolor="#FFFFCC"]', '"230690007" [label="230690007\nStroke\n", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '"20020731" [label="20020731", shape=box, peripheries=2, style=filled, fillcolor=pink]', '"62914000" [label="62914000\nCerebrovascular disease\n", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"28661005_2" [label="28661005\nCerebrovascular system structure\n", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '}' ], [ 'strict digraph G { rankdir=LR; ranksep=.3; node [shape=box, fontsize=9, fontname=Helvetica, style=filled, fillcolor=white]', '"20060131"->"230690007" [style=invis]', '"230690007"->"DN"', '"DN"->"BN0"', '"BN0"->"62914000" [arrowhead=onormal]', '"BN0"->"363698007_2"', '"363698007_2"->"12738006_2"', '"BN0"->"363698007_3"', '"363698007_3"->"28661005_3"', '"BN0" [shape=circle, fontsize=0, width=0, style=filled, fillcolor=black]', '"DN" [shape=circle, fontsize=27, margin=0, width=0, label="⊆", labelloc=c, style=filled, fillcolor=white]', '"363698007_2" [label="363698007\nFinding site\n", shape=box, peripheries=2, style="rounded,filled", fillcolor="#FFFFCC"]', '"363698007_3" [label="363698007\nFinding site\n", shape=box, peripheries=2, style="rounded,filled", fillcolor="#FFFFCC"]', '"230690007" [label="230690007\nStroke\n", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '"20060131" [label="20060131", shape=box, peripheries=2, style=filled, fillcolor=pink]', '"62914000" [label="62914000\nCerebrovascular disease\n", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"12738006_2" [label="12738006\nBrain structure\n", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '"28661005_3" [label="28661005\nCerebrovascular system structure\n", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '}' ], [ 'strict digraph G { rankdir=LR; ranksep=.3; node [shape=box, fontsize=9, fontname=Helvetica, style=filled, fillcolor=white]', '"20100131"->"230690007" [style=invis]', '"230690007"->"DN"', '"DN"->"BN0"', '"BN0"->"62914000" [arrowhead=onormal]', '"BN0"->"363698007_2"', '"363698007_2"->"28661005_2"', '"BN0" [shape=circle, fontsize=0, width=0, style=filled, fillcolor=black]', '"DN" [shape=circle, fontsize=27, margin=0, width=0, label="⊆", labelloc=c, style=filled, fillcolor=white]', '"363698007_2" [label="363698007\nFinding site\n", shape=box, peripheries=2, style="rounded,filled", fillcolor="#FFFFCC"]', '"230690007" [label="230690007\nStroke\n", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '"20100131" [label="20100131", shape=box, peripheries=2, style=filled, fillcolor=pink]', '"62914000" [label="62914000\nCerebrovascular disease\n", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"28661005_2" [label="28661005\nCerebrovascular system structure\n", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '}' ], [ 'strict digraph G { rankdir=LR; ranksep=.3; node [shape=box, fontsize=9, fontname=Helvetica, style=filled, fillcolor=white]', '"20180731"->"230690007" [style=invis]', '"230690007"->"DN"', '"DN"->"BN0"', '"BN0"->"62914000" [arrowhead=onormal]', '"BN0"->"127294003" [arrowhead=onormal]', '"BN0"->"363698007_5"', '"363698007_5"->"28661005_5"', '"BN0"->"GN1"', '"GN1"->"BN1"', '"BN1"->"363698007_3_1"', '"363698007_3_1"->"12738006_3_1"', '"BN1"->"116676008_4_1"', '"116676008_4_1"->"37782003_4_1"', '"BN0" [shape=circle, fontsize=0, width=0, style=filled, fillcolor=black]', '"BN1" [shape=circle, fontsize=0, width=0, style=filled, fillcolor=black]', '"GN1" [shape=circle, fontsize=1, width=0.5, label="" style=filled, fillcolor=white]', '"DN" [shape=circle, fontsize=27, margin=0, width=0, label="≡", labelloc=c, style=filled, fillcolor=white]', '"363698007_5" [label="363698007\nFinding site\n", shape=box, peripheries=2, style="rounded,filled", fillcolor="#FFFFCC"]', '"363698007_3_1" [label="363698007\nFinding site\n", shape=box, peripheries=2, style="rounded,filled", fillcolor="#FFFFCC"]', '"116676008_4_1" [label="116676008\nAssociated morphology\n", shape=box, peripheries=2, style="rounded,filled", fillcolor="#FFFFCC"]', '"230690007" [label="230690007\nStroke\n", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"20180731" [label="20180731", shape=box, peripheries=2, style=filled, fillcolor=pink]', '"62914000" [label="62914000\nCerebrovascular disease\n", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"127294003" [label="127294003\nTraumatic or nontraumatic brain injury\n", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"28661005_5" [label="28661005\nCerebrovascular system structure\n", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '"12738006_3_1" [label="12738006\nBrain structure\n", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '"37782003_4_1" [label="37782003\nDamage\n", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '}' ], [ 'strict digraph G { rankdir=LR; ranksep=.3; node [shape=box, fontsize=9, fontname=Helvetica, style=filled, fillcolor=white]', '"20190731"->"230690007" [style=invis]', '"230690007"->"DN"', '"DN"->"BN0"', '"BN0"->"62914000" [arrowhead=onormal]', '"BN0"->"127294003" [arrowhead=onormal]', '"BN0"->"GN1"', '"GN1"->"BN1"', '"BN1"->"363698007_3_1"', '"363698007_3_1"->"12738006_3_1"', '"BN1"->"116676008_4_1"', '"116676008_4_1"->"37782003_4_1"', '"BN0"->"GN2"', '"GN2"->"BN2"', '"BN2"->"363698007_5_2"', '"363698007_5_2"->"28661005_5_2"', '"BN0" [shape=circle, fontsize=0, width=0, style=filled, fillcolor=black]', '"BN1" [shape=circle, fontsize=0, width=0, style=filled, fillcolor=black]', '"BN2" [shape=circle, fontsize=0, width=0, style=filled, fillcolor=black]', '"GN1" [shape=circle, fontsize=1, width=0.5, label="" style=filled, fillcolor=white]', '"GN2" [shape=circle, fontsize=1, width=0.5, label="" style=filled, fillcolor=white]', '"DN" [shape=circle, fontsize=27, margin=0, width=0, label="≡", labelloc=c, style=filled, fillcolor=white]', '"363698007_3_1" [label="363698007\nFinding site\n", shape=box, peripheries=2, style="rounded,filled", fillcolor="#FFFFCC"]', '"116676008_4_1" [label="116676008\nAssociated morphology\n", shape=box, peripheries=2, style="rounded,filled", fillcolor="#FFFFCC"]', '"363698007_5_2" [label="363698007\nFinding site\n", shape=box, peripheries=2, style="rounded,filled", fillcolor="#FFFFCC"]', '"230690007" [label="230690007\nStroke\n", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"20190731" [label="20190731", shape=box, peripheries=2, style=filled, fillcolor=pink]', '"62914000" [label="62914000\nCerebrovascular disease\n", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"127294003" [label="127294003\nTraumatic or nontraumatic brain injury\n", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"12738006_3_1" [label="12738006\nBrain structure\n", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '"37782003_4_1" [label="37782003\nDamage\n", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '"28661005_5_2" [label="28661005\nCerebrovascular system structure\n", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '}' ], [ 'strict digraph G { rankdir=LR; ranksep=.3; node [shape=box, fontsize=9, fontname=Helvetica, style=filled, fillcolor=white]', '"20210731"->"230690007" [style=invis]', '"230690007"->"DN"', '"DN"->"BN0"', '"BN0"->"282728007" [arrowhead=onormal]', '"BN0"->"62914000" [arrowhead=onormal]', '"BN0"->"301766008" [arrowhead=onormal]', '"BN0"->"127294003" [arrowhead=onormal]', '"BN0"->"GN1"', '"GN1"->"BN1"', '"BN1"->"363698007_5_1"', '"363698007_5_1"->"12738006_5_1"', '"BN1"->"116676008_6_1"', '"116676008_6_1"->"37782003_6_1"', '"BN0"->"GN2"', '"GN2"->"BN2"', '"BN2"->"363698007_7_2"', '"363698007_7_2"->"28661005_7_2"', '"BN0" [shape=circle, fontsize=0, width=0, style=filled, fillcolor=black]', '"BN1" [shape=circle, fontsize=0, width=0, style=filled, fillcolor=black]', '"BN2" [shape=circle, fontsize=0, width=0, style=filled, fillcolor=black]', '"GN1" [shape=circle, fontsize=1, width=0.5, label="" style=filled, fillcolor=white]', '"GN2" [shape=circle, fontsize=1, width=0.5, label="" style=filled, fillcolor=white]', '"DN" [shape=circle, fontsize=27, margin=0, width=0, label="≡", labelloc=c, style=filled, fillcolor=white]', '"363698007_5_1" [label="363698007\nFinding site\n", shape=box, peripheries=2, style="rounded,filled", fillcolor="#FFFFCC"]', '"116676008_6_1" [label="116676008\nAssociated morphology\n", shape=box, peripheries=2, style="rounded,filled", fillcolor="#FFFFCC"]', '"363698007_7_2" [label="363698007\nFinding site\n", shape=box, peripheries=2, style="rounded,filled", fillcolor="#FFFFCC"]', '"230690007" [label="230690007\nStroke\n", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"20210731" [label="20210731", shape=box, peripheries=2, style=filled, fillcolor=pink]', '"282728007" [label="282728007\nCardiovascular injury\n", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"62914000" [label="62914000\nCerebrovascular disease\n", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"301766008" [label="301766008\nLesion of brain\n", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"127294003" [label="127294003\nTraumatic or nontraumatic brain injury\n", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"12738006_5_1" [label="12738006\nBrain structure\n", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '"37782003_6_1" [label="37782003\nDamage\n", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '"28661005_7_2" [label="28661005\nCerebrovascular system structure\n", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '}' ], ]; render(); //return width; return md``; }4a:T57a,{ console.log('magjac 100: tween'); playPathTweening2; yield html`

`; var dotIndex = 0; var graphviz = d3.select("#graph3").graphviz(false) .transition(function () { return d3.transition() .ease(d3.easeLinear) .delay(500) .duration(dotIndex * dotIndex * 800); }); function attributer(datum, index, nodes) { var selection = d3.select(this); if (datum.tag == "svg") { //var width = 500; var height = 400 * width / 964; var scale = 0.5 * width / 964; var viewBox = `0 0 ${width * 3 / 4 / scale} ${height * 3 / 4 / scale}`; selection .attr("width", width) .attr("height", height) .attr("viewBox", `${viewBox}`); datum.attributes.width = width; datum.attributes.height = height; datum.attributes.viewBox = `${viewBox}`; } } function render() { var dotLines = dots[dotIndex % dots.length]; var dot = dotLines.join(''); graphviz .tweenPaths(tweenPaths) .zoom(false) .tweenShapes(false) .attributer(attributer) .renderDot(dot) .on('end', function () { dotIndex += 1; if (dotIndex != dots.length) { render(); } }); } // var dots = dots2 var dots = dots3 render(); //return width; return md``; } 4b:T446,dots = [ [ 'digraph {', ' node [style="filled"]', ' b [fillcolor="#1f77b4"]', ' a [fillcolor="#d62728"]', ' c [fillcolor="#2ca02c"]', ' d [fillcolor="#ff7f0e"]', '}' ], [ 'digraph {', ' node [style="filled"]', ' a [fillcolor="#d62728"]', ' b [fillcolor="#1f77b4"]', ' c [fillcolor="#2ca02c"]', ' d [fillcolor="#ff7f0e"]', ' a -> b', ' a -> c', ' a -> d', '}' ], [ 'digraph {', ' node [style="filled"]', ' a [fillcolor="#d62728"]', ' b [fillcolor="#1f77b4"]', ' c [fillcolor="#2ca02c"]', ' d [fillcolor="#ff7f0e"]', ' a -> b', ' a -> c', ' b -> d', ' c -> d', ' a -> d', '}' ], [ 'digraph {', ' node [style="filled"]', ' a [fillcolor="#d62728"]', ' b [fillcolor="#1f77b4"]', ' c [fillcolor="#2ca02c"]', ' d [fillcolor="#ff7f0e"]', ' a -> b', ' a -> c', ' b -> d', ' c -> d', ' a -> d', ' c -> b', '}' ], ]4c:Td25,comparisonGraph = { if (!runComparison) { return; } let cell = this ? this : html`

`; let cellSel = d3.select(cell); var dotIndex = 0; var transition1; var numGraphs = 0; var numPending = 0; var table = d3.select(cell).append("table"); var graphs = []; var nrows = 2; var ncols = 4; var tweenPrecision = 10; for (var r = 0; r < nrows; r++) { var row = table.append("tr"); graphs.push([]); for (var c = 0; c < ncols; c++) { var id = "r" + r + "c" + c; var col = row.append("td") var p = col.append("p") .text(id); var div = col.append("div"); var graphviz = div.graphviz(useWorker) .zoom(false) .tweenShapes(false) .tweenPrecision(tweenPrecision) .transition(transitionFactory) .on("initEnd", firstRenderAll); graphs[r].push({ "p": p, "graphviz": graphviz, }); numPending += 1; numGraphs += 1; } } for (var r = 0; r < nrows; r++) { for (var c = 0; c < ncols; c++) { var graph = graphs[r][c]; var p = graph.p; var graphviz = graph.graphviz; let html = []; if (c < 2 ) { graphviz.fade(false); html.push("~~fade~~"); } else { html.push("fade"); } if (r == 0) { graphviz.tweenPaths(false); html.push("~~tweenPaths~~"); } else { html.push("tweenPaths"); } if (c == 0 | c == 2) { graphviz.growEnteringEdges(false); html.push("~~growEnteringEdges~~"); } else { html.push("growEnteringEdges"); } p.html(html.join(' ')); } } return cell; function firstRenderAll() { numPending -= 1; if (numPending == 0) { for (var r = 0; r < nrows; r++) { for (var c = 0; c < ncols; c++) { var graph = graphs[r][c]; render(graph.graphviz); } } } } function render(graphviz) { var dotLines = dots[dotIndex % dots.length]; var dot = dotLines.join(''); graphviz .tweenShapes(false) .dot(dot) .attributer(attributer) .render() .on('end', function () { if (numPending == 0 && dotIndex < dots.length) { dotIndex += 1; } if (runComparison && dotIndex < dots.length) { render(graphviz); } }); numPending += 1; } function loadCell() { cellSel.dispatch("load"); } function attributer(datum, index, nodes) { var selection = d3.select(this); if (datum.tag == "svg") { var width = compareWidth; var height = compareHeight; var x = "10"; var y = "10"; var k = 1.7; selection .attr("width", width) .attr("height", height) .attr("viewBox", -x + " " + -y + " " + width * k * 3 / 4 + " " + height * k * 3 / 4); datum.attributes.width = width; datum.attributes.height = height; datum.attributes.viewBox = -x + " " + -y + " " + width * k * 3 / 4 + " " + height * k * 3 / 4; loadCell(); } } function transitionFactory() { if (numPending == numGraphs) { transition1 = d3.transition("main") .ease(d3.easeLinear) .delay(3000) .duration(3000); } numPending -= 1; return transition1; } }4d:T2e15,dots2 = [ [ 'strict digraph G { rankdir=LR; ranksep=.3; node [shape=box, fontsize=9, fontname=Helvetica, style=filled, fillcolor=white]', '"20020131"->"230690007" [style=invis]', '"230690007"->"DN"', '"DN"->"BN0"', '"BN0"->"62914000" [arrowhead=onormal]', '"BN0"->"363698007_2"', '"363698007_2"->"59820001_2"', '"BN0"->"363698007_3"', '"363698007_3"->"28661005_3"', '"BN0" [shape=circle, fontsize=0, width=0, style=filled, fillcolor=black]', '"DN" [shape=circle, fontsize=27, margin=0, width=0, label="⊆", labelloc=c, style=filled, fillcolor=white]', '"363698007_2" [label="363698007\nFinding site\n", shape=box, peripheries=2, style="rounded,filled", fillcolor="#FFFFCC"]', '"363698007_3" [label="363698007\nFinding site\n", shape=box, peripheries=2, style="rounded,filled", fillcolor="#FFFFCC"]', '"230690007" [label="230690007\nStroke\n", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '"20020131" [label="20020131", shape=box, peripheries=2, style=filled, fillcolor=pink]', '"62914000" [label="62914000\nCerebrovascular disease\n", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"59820001_2" [label="59820001\nBlood vessel structure\n", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '"28661005_3" [label="28661005\nCerebrovascular system structure\n", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '}' ], [ 'strict digraph G { rankdir=LR; ranksep=.3; node [shape=box, fontsize=9, fontname=Helvetica, style=filled, fillcolor=white]', '"20020731"->"230690007" [style=invis]', '"230690007"->"DN"', '"DN"->"BN0"', '"BN0"->"62914000" [arrowhead=onormal]', '"BN0"->"363698007_2"', '"363698007_2"->"28661005_2"', '"BN0" [shape=circle, fontsize=0, width=0, style=filled, fillcolor=black]', '"DN" [shape=circle, fontsize=27, margin=0, width=0, label="⊆", labelloc=c, style=filled, fillcolor=white]', '"363698007_2" [label="363698007\nFinding site\n", shape=box, peripheries=2, style="rounded,filled", fillcolor="#FFFFCC"]', '"230690007" [label="230690007\nStroke\n", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '"20020731" [label="20020731", shape=box, peripheries=2, style=filled, fillcolor=pink]', '"62914000" [label="62914000\nCerebrovascular disease\n", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"28661005_2" [label="28661005\nCerebrovascular system structure\n", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '}' ], [ 'strict digraph G { rankdir=LR; ranksep=.3; node [shape=box, fontsize=9, fontname=Helvetica, style=filled, fillcolor=white]', '"20060131"->"230690007" [style=invis]', '"230690007"->"DN"', '"DN"->"BN0"', '"BN0"->"62914000" [arrowhead=onormal]', '"BN0"->"363698007_2"', '"363698007_2"->"12738006_2"', '"BN0"->"363698007_3"', '"363698007_3"->"28661005_3"', '"BN0" [shape=circle, fontsize=0, width=0, style=filled, fillcolor=black]', '"DN" [shape=circle, fontsize=27, margin=0, width=0, label="⊆", labelloc=c, style=filled, fillcolor=white]', '"363698007_2" [label="363698007\nFinding site\n", shape=box, peripheries=2, style="rounded,filled", fillcolor="#FFFFCC"]', '"363698007_3" [label="363698007\nFinding site\n", shape=box, peripheries=2, style="rounded,filled", fillcolor="#FFFFCC"]', '"230690007" [label="230690007\nStroke\n", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '"20060131" [label="20060131", shape=box, peripheries=2, style=filled, fillcolor=pink]', '"62914000" [label="62914000\nCerebrovascular disease\n", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"12738006_2" [label="12738006\nBrain structure\n", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '"28661005_3" [label="28661005\nCerebrovascular system structure\n", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '}' ], [ 'strict digraph G { rankdir=LR; ranksep=.3; node [shape=box, fontsize=9, fontname=Helvetica, style=filled, fillcolor=white]', '"20100131"->"230690007" [style=invis]', '"230690007"->"DN"', '"DN"->"BN0"', '"BN0"->"62914000" [arrowhead=onormal]', '"BN0"->"363698007_2"', '"363698007_2"->"28661005_2"', '"BN0" [shape=circle, fontsize=0, width=0, style=filled, fillcolor=black]', '"DN" [shape=circle, fontsize=27, margin=0, width=0, label="⊆", labelloc=c, style=filled, fillcolor=white]', '"363698007_2" [label="363698007\nFinding site\n", shape=box, peripheries=2, style="rounded,filled", fillcolor="#FFFFCC"]', '"230690007" [label="230690007\nStroke\n", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '"20100131" [label="20100131", shape=box, peripheries=2, style=filled, fillcolor=pink]', '"62914000" [label="62914000\nCerebrovascular disease\n", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"28661005_2" [label="28661005\nCerebrovascular system structure\n", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '}' ], [ 'strict digraph G { rankdir=LR; ranksep=.3; node [shape=box, fontsize=9, fontname=Helvetica, style=filled, fillcolor=white]', '"20180731"->"230690007" [style=invis]', '"230690007"->"DN"', '"DN"->"BN0"', '"BN0"->"62914000" [arrowhead=onormal]', '"BN0"->"127294003" [arrowhead=onormal]', '"BN0"->"363698007_5"', '"363698007_5"->"28661005_5"', '"BN0"->"GN1"', '"GN1"->"BN1"', '"BN1"->"363698007_3_1"', '"363698007_3_1"->"12738006_3_1"', '"BN1"->"116676008_4_1"', '"116676008_4_1"->"37782003_4_1"', '"BN0" [shape=circle, fontsize=0, width=0, style=filled, fillcolor=black]', '"BN1" [shape=circle, fontsize=0, width=0, style=filled, fillcolor=black]', '"GN1" [shape=circle, fontsize=1, width=0.5, label="" style=filled, fillcolor=white]', '"DN" [shape=circle, fontsize=27, margin=0, width=0, label="≡", labelloc=c, style=filled, fillcolor=white]', '"363698007_5" [label="363698007\nFinding site\n", shape=box, peripheries=2, style="rounded,filled", fillcolor="#FFFFCC"]', '"363698007_3_1" [label="363698007\nFinding site\n", shape=box, peripheries=2, style="rounded,filled", fillcolor="#FFFFCC"]', '"116676008_4_1" [label="116676008\nAssociated morphology\n", shape=box, peripheries=2, style="rounded,filled", fillcolor="#FFFFCC"]', '"230690007" [label="230690007\nStroke\n", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"20180731" [label="20180731", shape=box, peripheries=2, style=filled, fillcolor=pink]', '"62914000" [label="62914000\nCerebrovascular disease\n", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"127294003" [label="127294003\nTraumatic or nontraumatic brain injury\n", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"28661005_5" [label="28661005\nCerebrovascular system structure\n", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '"12738006_3_1" [label="12738006\nBrain structure\n", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '"37782003_4_1" [label="37782003\nDamage\n", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '}' ], [ 'strict digraph G { rankdir=LR; ranksep=.3; node [shape=box, fontsize=9, fontname=Helvetica, style=filled, fillcolor=white]', '"20190731"->"230690007" [style=invis]', '"230690007"->"DN"', '"DN"->"BN0"', '"BN0"->"62914000" [arrowhead=onormal]', '"BN0"->"127294003" [arrowhead=onormal]', '"BN0"->"GN1"', '"GN1"->"BN1"', '"BN1"->"363698007_3_1"', '"363698007_3_1"->"12738006_3_1"', '"BN1"->"116676008_4_1"', '"116676008_4_1"->"37782003_4_1"', '"BN0"->"GN2"', '"GN2"->"BN2"', '"BN2"->"363698007_5_2"', '"363698007_5_2"->"28661005_5_2"', '"BN0" [shape=circle, fontsize=0, width=0, style=filled, fillcolor=black]', '"BN1" [shape=circle, fontsize=0, width=0, style=filled, fillcolor=black]', '"BN2" [shape=circle, fontsize=0, width=0, style=filled, fillcolor=black]', '"GN1" [shape=circle, fontsize=1, width=0.5, label="" style=filled, fillcolor=white]', '"GN2" [shape=circle, fontsize=1, width=0.5, label="" style=filled, fillcolor=white]', '"DN" [shape=circle, fontsize=27, margin=0, width=0, label="≡", labelloc=c, style=filled, fillcolor=white]', '"363698007_3_1" [label="363698007\nFinding site\n", shape=box, peripheries=2, style="rounded,filled", fillcolor="#FFFFCC"]', '"116676008_4_1" [label="116676008\nAssociated morphology\n", shape=box, peripheries=2, style="rounded,filled", fillcolor="#FFFFCC"]', '"363698007_5_2" [label="363698007\nFinding site\n", shape=box, peripheries=2, style="rounded,filled", fillcolor="#FFFFCC"]', '"230690007" [label="230690007\nStroke\n", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"20190731" [label="20190731", shape=box, peripheries=2, style=filled, fillcolor=pink]', '"62914000" [label="62914000\nCerebrovascular disease\n", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"127294003" [label="127294003\nTraumatic or nontraumatic brain injury\n", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"12738006_3_1" [label="12738006\nBrain structure\n", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '"37782003_4_1" [label="37782003\nDamage\n", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '"28661005_5_2" [label="28661005\nCerebrovascular system structure\n", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '}' ], [ 'strict digraph G { rankdir=LR; ranksep=.3; node [shape=box, fontsize=9, fontname=Helvetica, style=filled, fillcolor=white]', '"20210731"->"230690007" [style=invis]', '"230690007"->"DN"', '"DN"->"BN0"', '"BN0"->"282728007" [arrowhead=onormal]', '"BN0"->"62914000" [arrowhead=onormal]', '"BN0"->"301766008" [arrowhead=onormal]', '"BN0"->"127294003" [arrowhead=onormal]', '"BN0"->"GN1"', '"GN1"->"BN1"', '"BN1"->"363698007_5_1"', '"363698007_5_1"->"12738006_5_1"', '"BN1"->"116676008_6_1"', '"116676008_6_1"->"37782003_6_1"', '"BN0"->"GN2"', '"GN2"->"BN2"', '"BN2"->"363698007_7_2"', '"363698007_7_2"->"28661005_7_2"', '"BN0" [shape=circle, fontsize=0, width=0, style=filled, fillcolor=black]', '"BN1" [shape=circle, fontsize=0, width=0, style=filled, fillcolor=black]', '"BN2" [shape=circle, fontsize=0, width=0, style=filled, fillcolor=black]', '"GN1" [shape=circle, fontsize=1, width=0.5, label="" style=filled, fillcolor=white]', '"GN2" [shape=circle, fontsize=1, width=0.5, label="" style=filled, fillcolor=white]', '"DN" [shape=circle, fontsize=27, margin=0, width=0, label="≡", labelloc=c, style=filled, fillcolor=white]', '"363698007_5_1" [label="363698007\nFinding site\n", shape=box, peripheries=2, style="rounded,filled", fillcolor="#FFFFCC"]', '"116676008_6_1" [label="116676008\nAssociated morphology\n", shape=box, peripheries=2, style="rounded,filled", fillcolor="#FFFFCC"]', '"363698007_7_2" [label="363698007\nFinding site\n", shape=box, peripheries=2, style="rounded,filled", fillcolor="#FFFFCC"]', '"230690007" [label="230690007\nStroke\n", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"20210731" [label="20210731", shape=box, peripheries=2, style=filled, fillcolor=pink]', '"282728007" [label="282728007\nCardiovascular injury\n", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"62914000" [label="62914000\nCerebrovascular disease\n", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"301766008" [label="301766008\nLesion of brain\n", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"127294003" [label="127294003\nTraumatic or nontraumatic brain injury\n", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"12738006_5_1" [label="12738006\nBrain structure\n", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '"37782003_6_1" [label="37782003\nDamage\n", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '"28661005_7_2" [label="28661005\nCerebrovascular system structure\n", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '}' ], ];4e:T65d3,dots3 = [ [ 'strict digraph G { rankdir=BT; ranksep=.3; node [shape=box, fontsize=9, fontname=Helvetica, style=filled, fillcolor=white]', '"138875005"->"20020131" [style=invis]', '"49601007"->"362965005" [arrowhead=onormal]', '"118940003"->"362965005" [arrowhead=onormal]', '"230690007"->"62914000" [arrowhead=onormal]', '"27550009"->"49601007" [arrowhead=onormal]', '"118934005"->"123946008" [arrowhead=onormal]', '"62914000"->"230689003" [arrowhead=onormal]', '"62914000"->"81308009" [arrowhead=onormal]', '"62914000"->"27550009" [arrowhead=onormal]', '"23853001"->"118940003" [arrowhead=onormal]', '"362965005"->"123946008" [arrowhead=onormal]', '"81308009"->"118934005" [arrowhead=onormal]', '"81308009"->"23853001" [arrowhead=onormal]', '"230689003"->"23853001" [arrowhead=onormal]', '"64572001"->"138875005" [arrowhead=onormal]', '"123946008"->"64572001" [arrowhead=onormal]', '"21829004"->"138875005" [style=invis]', '"106063007"->"21829004" [style=invis]', '"282728007"->"106063007" [style=invis]', '"246556002"->"106063007" [style=invis]', '"246556002"->"21829004" [style=invis]', '"19660004"->"282728007" [style=invis]', '"19660004"->"106063007" [style=invis]', '"280128006"->"246556002" [style=invis]', '"280128006"->"282728007" [style=invis]', '"118234003"->"19660004" [style=invis]', '"118234003"->"246556002" [style=invis]', '"301857004"->"280128006" [style=invis]', '"301857004"->"19660004" [style=invis]', '"299718000"->"118234003" [style=invis]', '"299718000"->"280128006" [style=invis]', '"118254002"->"301857004" [style=invis]', '"118254002"->"118234003" [style=invis]', '"248402002"->"299718000" [style=invis]', '"248402002"->"301857004" [style=invis]', '"128126004"->"118254002" [style=invis]', '"128126004"->"299718000" [style=invis]', '"82271004"->"248402002" [style=invis]', '"82271004"->"118254002" [style=invis]', '"128239009"->"128126004" [style=invis]', '"128239009"->"248402002" [style=invis]', '"127296001"->"82271004" [style=invis]', '"127296001"->"128126004" [style=invis]', '"301766008"->"128239009" [style=invis]', '"301766008"->"82271004" [style=invis]', '"102957003"->"127296001" [style=invis]', '"102957003"->"128239009" [style=invis]', '"299735001"->"301766008" [style=invis]', '"299735001"->"127296001" [style=invis]', '"127294003"->"102957003" [style=invis]', '"127294003"->"301766008" [style=invis]', '"20020131" [label="20020131", shape=box, fontsize=11, peripheries=2, style=filled, fillcolor=pink]', '"118934005" [label="118934005\nDisorder of head", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"27550009" [label="27550009\nVascular disorder", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"230690007" [label="230690007\nStroke", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '"362965005" [label="362965005\nDisorder of body system", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"123946008" [label="123946008\nDisorder by body site", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"81308009" [label="81308009\nDisorder of brain", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"64572001" [label="64572001\nDisease", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '"230689003" [label="230689003\nCerebrovascular and spinal vascular disorders", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '"118940003" [label="118940003\nDisorder of nervous system", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"62914000" [label="62914000\nCerebrovascular disease", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"138875005" [label="138875005\nSNOMED CT Concept", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '"49601007" [label="49601007\nDisorder of cardiovascular system", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"23853001" [label="23853001\nDisorder of the central nervous system", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"106063007" [label="106063007\nCardiovascular finding", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"248402002" [label="248402002\nGeneral finding of soft tissue", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"282728007" [label="282728007\nCardiovascular injury", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"118234003" [label="118234003\nFinding by site", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"246556002" [label="246556002\nCentral nervous system finding", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"127294003" [label="127294003\nTraumatic or nontraumatic brain injury", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"128126004" [label="128126004\nInjury of central nervous system", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"19660004" [label="19660004\nDisorder of soft tissue", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"128239009" [label="128239009\nInjury of nervous system", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"82271004" [label="82271004\nInjury of head", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"299718000" [label="299718000\nFinding of brain", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"118254002" [label="118254002\nFinding of head and neck region", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"280128006" [label="280128006\nDisorder of soft tissue of body cavity", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"301766008" [label="301766008\nLesion of brain", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"301857004" [label="301857004\nFinding of body region", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"299735001" [label="299735001\nNeurological lesion", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"102957003" [label="102957003\nNeurological finding", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"127296001" [label="127296001\nIntracranial injury", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"21829004" [label="21829004\nBlood vessel finding", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '}' ], [ 'strict digraph G { rankdir=BT; ranksep=.3; node [shape=box, fontsize=9, fontname=Helvetica, style=filled, fillcolor=white]', '"138875005"->"20020731" [style=invis]', '"49601007"->"362965005" [arrowhead=onormal]', '"118940003"->"362965005" [arrowhead=onormal]', '"230690007"->"62914000" [arrowhead=onormal]', '"27550009"->"49601007" [arrowhead=onormal]', '"118934005"->"123946008" [arrowhead=onormal]', '"62914000"->"81308009" [arrowhead=onormal]', '"62914000"->"27550009" [arrowhead=onormal]', '"23853001"->"118940003" [arrowhead=onormal]', '"362965005"->"123946008" [arrowhead=onormal]', '"81308009"->"118934005" [arrowhead=onormal]', '"81308009"->"23853001" [arrowhead=onormal]', '"64572001"->"138875005" [arrowhead=onormal]', '"123946008"->"64572001" [arrowhead=onormal]', '"21829004"->"138875005" [style=invis]', '"106063007"->"21829004" [style=invis]', '"282728007"->"106063007" [style=invis]', '"246556002"->"106063007" [style=invis]', '"246556002"->"21829004" [style=invis]', '"230689003"->"282728007" [style=invis]', '"230689003"->"106063007" [style=invis]', '"19660004"->"246556002" [style=invis]', '"19660004"->"282728007" [style=invis]', '"280128006"->"230689003" [style=invis]', '"280128006"->"246556002" [style=invis]', '"118234003"->"19660004" [style=invis]', '"118234003"->"230689003" [style=invis]', '"301857004"->"280128006" [style=invis]', '"301857004"->"19660004" [style=invis]', '"299718000"->"118234003" [style=invis]', '"299718000"->"280128006" [style=invis]', '"118254002"->"301857004" [style=invis]', '"118254002"->"118234003" [style=invis]', '"248402002"->"299718000" [style=invis]', '"248402002"->"301857004" [style=invis]', '"128126004"->"118254002" [style=invis]', '"128126004"->"299718000" [style=invis]', '"82271004"->"248402002" [style=invis]', '"82271004"->"118254002" [style=invis]', '"128239009"->"128126004" [style=invis]', '"128239009"->"248402002" [style=invis]', '"127296001"->"82271004" [style=invis]', '"127296001"->"128126004" [style=invis]', '"301766008"->"128239009" [style=invis]', '"301766008"->"82271004" [style=invis]', '"102957003"->"127296001" [style=invis]', '"102957003"->"128239009" [style=invis]', '"299735001"->"301766008" [style=invis]', '"299735001"->"127296001" [style=invis]', '"127294003"->"102957003" [style=invis]', '"127294003"->"301766008" [style=invis]', '"20020731" [label="20020731", shape=box, fontsize=11, peripheries=2, style=filled, fillcolor=pink]', '"118934005" [label="118934005\nDisorder of head", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"27550009" [label="27550009\nVascular disorder", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"230690007" [label="230690007\nStroke", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '"362965005" [label="362965005\nDisorder of body system", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"123946008" [label="123946008\nDisorder by body site", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"81308009" [label="81308009\nDisorder of brain", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"64572001" [label="64572001\nDisease", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '"118940003" [label="118940003\nDisorder of nervous system", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"62914000" [label="62914000\nCerebrovascular disease", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"138875005" [label="138875005\nSNOMED CT Concept", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '"49601007" [label="49601007\nDisorder of cardiovascular system", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"23853001" [label="23853001\nDisorder of the central nervous system", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"106063007" [label="106063007\nCardiovascular finding", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"248402002" [label="248402002\nGeneral finding of soft tissue", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"282728007" [label="282728007\nCardiovascular injury", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"118234003" [label="118234003\nFinding by site", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"246556002" [label="246556002\nCentral nervous system finding", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"127294003" [label="127294003\nTraumatic or nontraumatic brain injury", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"128126004" [label="128126004\nInjury of central nervous system", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"19660004" [label="19660004\nDisorder of soft tissue", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"128239009" [label="128239009\nInjury of nervous system", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"82271004" [label="82271004\nInjury of head", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"299718000" [label="299718000\nFinding of brain", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"118254002" [label="118254002\nFinding of head and neck region", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"280128006" [label="280128006\nDisorder of soft tissue of body cavity", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"301766008" [label="301766008\nLesion of brain", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"230689003" [label="230689003\nCerebrovascular and spinal vascular disorders", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"301857004" [label="301857004\nFinding of body region", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"299735001" [label="299735001\nNeurological lesion", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"102957003" [label="102957003\nNeurological finding", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"127296001" [label="127296001\nIntracranial injury", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"21829004" [label="21829004\nBlood vessel finding", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '}' ], [ 'strict digraph G { rankdir=BT; ranksep=.3; node [shape=box, fontsize=9, fontname=Helvetica, style=filled, fillcolor=white]', '"138875005"->"20030731" [style=invis]', '"49601007"->"362965005" [arrowhead=onormal]', '"118940003"->"362965005" [arrowhead=onormal]', '"230690007"->"62914000" [arrowhead=onormal]', '"27550009"->"49601007" [arrowhead=onormal]', '"118934005"->"123946008" [arrowhead=onormal]', '"62914000"->"81308009" [arrowhead=onormal]', '"62914000"->"27550009" [arrowhead=onormal]', '"23853001"->"118940003" [arrowhead=onormal]', '"362965005"->"123946008" [arrowhead=onormal]', '"399902003"->"123946008" [arrowhead=onormal]', '"81308009"->"399902003" [arrowhead=onormal]', '"81308009"->"118934005" [arrowhead=onormal]', '"81308009"->"23853001" [arrowhead=onormal]', '"64572001"->"138875005" [arrowhead=onormal]', '"123946008"->"64572001" [arrowhead=onormal]', '"21829004"->"138875005" [style=invis]', '"106063007"->"21829004" [style=invis]', '"282728007"->"106063007" [style=invis]', '"246556002"->"106063007" [style=invis]', '"246556002"->"21829004" [style=invis]', '"230689003"->"282728007" [style=invis]', '"230689003"->"106063007" [style=invis]', '"19660004"->"246556002" [style=invis]', '"19660004"->"282728007" [style=invis]', '"280128006"->"230689003" [style=invis]', '"280128006"->"246556002" [style=invis]', '"118234003"->"19660004" [style=invis]', '"118234003"->"230689003" [style=invis]', '"301857004"->"280128006" [style=invis]', '"301857004"->"19660004" [style=invis]', '"299718000"->"118234003" [style=invis]', '"299718000"->"280128006" [style=invis]', '"118254002"->"301857004" [style=invis]', '"118254002"->"118234003" [style=invis]', '"248402002"->"299718000" [style=invis]', '"248402002"->"301857004" [style=invis]', '"128126004"->"118254002" [style=invis]', '"128126004"->"299718000" [style=invis]', '"82271004"->"248402002" [style=invis]', '"82271004"->"118254002" [style=invis]', '"128239009"->"128126004" [style=invis]', '"128239009"->"248402002" [style=invis]', '"127296001"->"82271004" [style=invis]', '"127296001"->"128126004" [style=invis]', '"301766008"->"128239009" [style=invis]', '"301766008"->"82271004" [style=invis]', '"102957003"->"127296001" [style=invis]', '"102957003"->"128239009" [style=invis]', '"299735001"->"301766008" [style=invis]', '"299735001"->"127296001" [style=invis]', '"127294003"->"102957003" [style=invis]', '"127294003"->"301766008" [style=invis]', '"20030731" [label="20030731", shape=box, fontsize=11, peripheries=2, style=filled, fillcolor=pink]', '"118934005" [label="118934005\nDisorder of head", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"27550009" [label="27550009\nVascular disorder", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"230690007" [label="230690007\nStroke", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '"362965005" [label="362965005\nDisorder of body system", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"123946008" [label="123946008\nDisorder by body site", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"81308009" [label="81308009\nDisorder of brain", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"64572001" [label="64572001\nDisease", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '"399902003" [label="399902003\nDisorder of body cavity", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"118940003" [label="118940003\nDisorder of nervous system", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"62914000" [label="62914000\nCerebrovascular disease", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"138875005" [label="138875005\nSNOMED CT Concept", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '"49601007" [label="49601007\nDisorder of cardiovascular system", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"23853001" [label="23853001\nDisorder of the central nervous system", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"106063007" [label="106063007\nCardiovascular finding", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"248402002" [label="248402002\nGeneral finding of soft tissue", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"282728007" [label="282728007\nCardiovascular injury", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"118234003" [label="118234003\nFinding by site", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"246556002" [label="246556002\nCentral nervous system finding", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"127294003" [label="127294003\nTraumatic or nontraumatic brain injury", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"128126004" [label="128126004\nInjury of central nervous system", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"19660004" [label="19660004\nDisorder of soft tissue", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"128239009" [label="128239009\nInjury of nervous system", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"82271004" [label="82271004\nInjury of head", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"299718000" [label="299718000\nFinding of brain", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"118254002" [label="118254002\nFinding of head and neck region", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"280128006" [label="280128006\nDisorder of soft tissue of body cavity", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"230689003" [label="230689003\nCerebrovascular and spinal vascular disorders", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"301766008" [label="301766008\nLesion of brain", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"301857004" [label="301857004\nFinding of body region", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"299735001" [label="299735001\nNeurological lesion", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"102957003" [label="102957003\nNeurological finding", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"127296001" [label="127296001\nIntracranial injury", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"21829004" [label="21829004\nBlood vessel finding", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '}' ], [ 'strict digraph G { rankdir=BT; ranksep=.3; node [shape=box, fontsize=9, fontname=Helvetica, style=filled, fillcolor=white]', '"138875005"->"20040131" [style=invis]', '"118254002"->"301857004" [arrowhead=onormal]', '"49601007"->"362965005" [arrowhead=onormal]', '"118940003"->"362965005" [arrowhead=onormal]', '"118234003"->"404684003" [arrowhead=onormal]', '"230690007"->"62914000" [arrowhead=onormal]', '"406122000"->"118254002" [arrowhead=onormal]', '"118934005"->"123946008" [arrowhead=onormal]', '"118934005"->"406122000" [arrowhead=onormal]', '"27550009"->"49601007" [arrowhead=onormal]', '"62914000"->"81308009" [arrowhead=onormal]', '"62914000"->"27550009" [arrowhead=onormal]', '"23853001"->"118940003" [arrowhead=onormal]', '"362965005"->"123946008" [arrowhead=onormal]', '"399902003"->"123946008" [arrowhead=onormal]', '"301857004"->"118234003" [arrowhead=onormal]', '"81308009"->"399902003" [arrowhead=onormal]', '"81308009"->"118934005" [arrowhead=onormal]', '"81308009"->"23853001" [arrowhead=onormal]', '"64572001"->"404684003" [arrowhead=onormal]', '"123946008"->"64572001" [arrowhead=onormal]', '"123946008"->"118234003" [arrowhead=onormal]', '"404684003"->"138875005" [arrowhead=onormal]', '"21829004"->"138875005" [style=invis]', '"106063007"->"21829004" [style=invis]', '"282728007"->"106063007" [style=invis]', '"246556002"->"106063007" [style=invis]', '"246556002"->"21829004" [style=invis]', '"230689003"->"282728007" [style=invis]', '"230689003"->"106063007" [style=invis]', '"19660004"->"246556002" [style=invis]', '"19660004"->"282728007" [style=invis]', '"280128006"->"230689003" [style=invis]', '"280128006"->"246556002" [style=invis]', '"299718000"->"19660004" [style=invis]', '"299718000"->"230689003" [style=invis]', '"248402002"->"280128006" [style=invis]', '"248402002"->"19660004" [style=invis]', '"128126004"->"299718000" [style=invis]', '"128126004"->"280128006" [style=invis]', '"82271004"->"248402002" [style=invis]', '"82271004"->"299718000" [style=invis]', '"128239009"->"128126004" [style=invis]', '"128239009"->"248402002" [style=invis]', '"127296001"->"82271004" [style=invis]', '"127296001"->"128126004" [style=invis]', '"301766008"->"128239009" [style=invis]', '"301766008"->"82271004" [style=invis]', '"102957003"->"127296001" [style=invis]', '"102957003"->"128239009" [style=invis]', '"299735001"->"301766008" [style=invis]', '"299735001"->"127296001" [style=invis]', '"127294003"->"102957003" [style=invis]', '"127294003"->"301766008" [style=invis]', '"20040131" [label="20040131", shape=box, fontsize=11, peripheries=2, style=filled, fillcolor=pink]', '"118934005" [label="118934005\nDisorder of head", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"230690007" [label="230690007\nStroke", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '"27550009" [label="27550009\nVascular disorder", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"404684003" [label="404684003\nClinical finding", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '"362965005" [label="362965005\nDisorder of body system", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"123946008" [label="123946008\nDisorder by body site", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"118234003" [label="118234003\nFinding by site", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"118254002" [label="118254002\nFinding of head and neck region", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"406122000" [label="406122000\nHead finding", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"81308009" [label="81308009\nDisorder of brain", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"64572001" [label="64572001\nDisease", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '"399902003" [label="399902003\nDisorder of body cavity", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"301857004" [label="301857004\nFinding of body region", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"118940003" [label="118940003\nDisorder of nervous system", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"62914000" [label="62914000\nCerebrovascular disease", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"138875005" [label="138875005\nSNOMED CT Concept", shape=box, peripheries=1, style=filled, fillcolor="#99CCFF"]', '"49601007" [label="49601007\nDisorder of cardiovascular system", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"23853001" [label="23853001\nDisorder of the central nervous system", shape=box, peripheries=2, style=filled, fillcolor="#CCCCFF"]', '"82271004" [label="82271004\nInjury of head", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"299735001" [label="299735001\nNeurological lesion", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"246556002" [label="246556002\nCentral nervous system finding", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"127294003" [label="127294003\nTraumatic or nontraumatic brain injury", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"106063007" [label="106063007\nCardiovascular finding", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"128126004" [label="128126004\nInjury of central nervous system", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"102957003" [label="102957003\nNeurological finding", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"299718000" [label="299718000\nFinding of brain", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"280128006" [label="280128006\nDisorder of soft tissue of body cavity", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"230689003" [label="230689003\nCerebrovascular and spinal vascular disorders", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"301766008" [label="301766008\nLesion of brain", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"248402002" [label="248402002\nGeneral finding of soft tissue", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"282728007" [label="282728007\nCardiovascular injury", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"127296001" [label="127296001\nIntracranial injury", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"19660004" [label="19660004\nDisorder of soft tissue", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"21829004" [label="21829004\nBlood vessel finding", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '"128239009" [label="128239009\nInjury of nervous system", shape=box, peripheries=1, style=filled, fillcolor=lightsalmon]', '}' ]]4f:[] 29:{"id":"c63b22e2f2b9de89","slug":null,"title":"Illustrating SNOMED CT concept definition evolution using d3-graphviz","thumbnail":"3bca0831e6edf742790cb2757a839316b2bf11ad6cad7dcebd3c3fadab0a23ae","access_level":"public","create_time":"$D2023-09-20T18:08:31.585Z","update_time":"$D2023-10-21T08:40:46.620Z","view_time":null,"first_public_time":"$D2023-09-20T18:08:31.585Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"3d7d3bdc6da7fe30","login":"claimclarity","name":"Jamie LaPaglia","avatar_url":"https://avatars-next.observableusercontent.com/5bd04b352319395640172458b136a8c0e8d5b1b5d1360bed031b60686b8707f6","tier":"starter_2024","bio":"","following":false},"version":1708,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3a39330b7c23120f","login":"claimclarity","name":"Jamie LaPaglia","avatar_url":"https://avatars-next.observableusercontent.com/5bd04b352319395640172458b136a8c0e8d5b1b5d1360bed031b60686b8707f6","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"3a39330b7c23120f","login":"claimclarity","name":"Jamie LaPaglia","avatar_url":"https://avatars-next.observableusercontent.com/5bd04b352319395640172458b136a8c0e8d5b1b5d1360bed031b60686b8707f6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Illustrating SNOMED CT concept definition evolution using d3-graphviz","cells":[{"id":0,"value":"md`# Illustrating SNOMED CT concept definition evolution using d3-graphviz`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":994,"value":"md`## Path tweening - concept definition`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1504,"value":"viewof playPathTweening = button({value: \"Play path tweening animation\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":984,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1650,"value":"md`## Path tweening 2 - ancestor tree`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1702,"value":"Need to figure out how to import/hold larger dots variable","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1655,"value":"viewof playPathTweening2 = button({value: \"Play second path tweening animation\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1658,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1694,"value":"html``","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"tweenPaths","database":"$undefined"},{"id":1409,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1414,"value":"compareHeight = 230 * 4 / 3// * compareWidth / 290","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1416,"value":"compareWidth = width / 4","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1481,"value":"viewof runComparison = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1281,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1321,"value":"md`### Using d3-graphviz natively in Observable`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1305,"value":"md`Using [d3-graphviz]((https://github.com/magjac/d3-graphviz) natively gives access to the full functionality and configurability. For simpler cases in Observable, consider using the **adot** [template literal tag](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals#Tagged_templates) defined in [@magjac/d3-graphviz]((https://beta.observablehq.com/@magjac/d3-graphviz)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1301,"value":"graph = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1325,"value":"dotSrc = dotSrcs[dotIndex % dotSrcs.length]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1307,"value":"md`First we define an array of DOT sources:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1299,"value":"dotSrcs = [\n \"digraph {a -> b; c}\", \n \"digraph {a -> b; a -> c}\",\n \"digraph {a -> b; a -> c; c -> d; e}\",\n \"digraph {a -> b; a -> c; c -> d; e -> d}\",\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":517,"value":"viewof dotIndex = slider({\n min: 0, \n max: dotSrcs.length - 1, \n step: 1, \n value: 0, \n description: \"Select DOT source to render\",\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"viewof duration = slider({\n min: 0, \n max: 5000, \n step: 1, \n value: 1000, \n description: \"Set duration of animated transition\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1315,"value":"{\n if (renderEnd) {\n return md`Last rendering ended at ${new Date}`;\n } else {\n return;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1331,"value":"md`#### Implementation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1329,"value":"md`We set the height of the graph:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1327,"value":"height = 300","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":477,"value":"md`We create the Graphviz renderer instance on a selected element`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1294,"value":"graphviz_init = d3.select(graph).graphviz(false)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"graphviz = graphviz_init\n .attributer(attributerFn)\n .transition(transitionFactory)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":472,"value":"md`An attributer function scales the graph to fit the allocated space`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"attributerFn = function (d) {\n if (d.tag == \"svg\") {\n d3.select(this)\n .attr(\"width\", width)\n .attr(\"height\", height);\n d.attributes.width = width;\n d.attributes.height = height;\n }\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"md`A transition factory returns a transition and is called just before rendering starts:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"transitionFactory = function () {\n var t = d3.transition(\"magjacT\").duration(duration);\n return t;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":468,"value":"md`This variable evaulates to *true* when the animated transition ends and can be used to trigger other cells:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"renderEnd = new Promise(function(resolve, reject) { \n graphviz.renderDot(dotSrc, function () {resolve(this)})})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":756,"value":"md`## Notebook assets`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1170,"value":"useWorker = true","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1452,"value":"viz_script = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":734,"value":"logoDuration = 1000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1270,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"d3 = require(\"d3-graphviz@2\", \"d3-selection@1\", \"d3-transition@1\", \"d3-ease@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"import {slider, button, checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":617,"value":"//import {adot, logoDots} from \"@magjac/d3-graphviz\"\nimport {adot, logoDots, logoDot} from \"@magjac/d3-graphviz\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":697,"value":"import {slide, slide_style} from \"@mbostock/slide\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1665,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1683,"value":"$4e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":698,"value":"slide_style","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1706,"value":"null","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W4f","stdlib":"1"}} 24:null