30:T643,out = { let gap = 8, opt = { zoom: true, async: true, inset: 82 }; let svg = await dot`${codeGraph} ${{opt}}`; svg.setAttribute('style',` padding:${gap}px; width: ${width-(gap*2)}; max-width: ${640-(gap*2)}; border: 1px solid #ddd; border-radius: 8px; overflow:hidden; transform-origin: center; height: auto; user-select: none;`) svg = d3.select(svg) let edges = [...svg.selectAll('g[class=edge]').selectAll('title')].map(d=>d.textContent.split('->')) function hover(el,decorator,event){ let node = d3.select(el), name = node.select("title").text(), context = edges .filter((d) => d[0] == name || d[1] == name).flat() .filter((d) => d !== name).concat(name) svg.selectAll('g[class=node]') .filter((_,i,n)=>context.includes(d3.select(n[i]).select('title').text())) .each(function(_,i,n) { decorator.call(node,event, d3.select(n[i]),n)}) svg.selectAll('g[class=edge]') .filter((_,i,n)=> d3.select(n[i]).select('title').text().split('->').every(d=>context.includes(d))) .each(function(_,i,n) { decorator.call(node,event, d3.select(n[i]),n) }) } svg.selectAll('g[class=node]').on('pointerenter', function(e) { hover(this,decorate,e)}) svg.selectAll('g[class=node]').on('pointerleave', function(e) { hover(this,decorate,e)} ) svg.selectAll('g[class=node]').on('pointerdown', function(e) { hover(this,decorate,e)} ) return svg.node() }31:T949,function decorate(event, mesh, list) { invalidation.then(() =>mutable disp = []) let node = this, nodes = mesh.filter((_,i,n)=> n[i].classList.contains('node')), edges = mesh.filter((_,i,n)=> n[i].classList.contains('edge')), range = d3.selectAll(list); if (event.type == 'pointerdown' && (node.attr('id') == mesh.attr('id'))) { mesh.attr('clicked') ? mesh.attr('clicked', null ) : mesh.attr('clicked', true ) } else if (event.type == 'pointerleave') { mesh.attr('active', node.attr('clicked')) } else if (event.type == 'pointerenter') { mesh.attr('active', true ) } let it = mesh.attr('clicked') ?? mesh.attr('active') let colorVal = Math.log( // color by focus node parseInt( node.select("title").text().slice(1)) + 1 ) % 1, color = d3.interpolateRainbow(1-colorVal), style = { fill: d3.interpolate(color, 'white')(0.7), fillOpacity: 1, stroke: color, strokeWidth:4 }, annul = { fill: null, } ; let shape = nodes.selectAll("path,polygon"), point = edges.selectAll("polygon"), paths = edges.selectAll("path"), group = d3.selectAll([...shape,...point]); tween(group,{...style}) tween(paths,{...style,...annul}) if( [...mesh].length ) { var { x, y, width:w, height:h } = node.node().getBBox(); var cx = x + w/2, cy = y + h/2; node.transition().duration(200) .ease(d3.easeBackOut.overshoot(4)) .style('transform', it ? `translate(${cx}px, ${cy}px) scale(${1.1}) translate(${(-cx)}px, ${(-cy)}px)`: null) mesh.transition().delay(parseInt(Math.random()*100)).duration(200) .ease(d3.easeBackOut.overshoot(6)) .style('transform', it ? `translate(${cx}px, ${cy}px) scale(${1.05}) translate(${(-cx)}px, ${(-cy)}px)`: null) } function tween(target, map) { let roll = target.transition().duration(75); return Object.entries(map).reduce((pool, [key, val]) => { let stylise = tgt => tgt.style(kebab(key), it ? val+'' : null); return pool ? stylise(pool) : stylise(roll) } , roll ) } function kebab (str) { return str.split('').map((char, i) => { return char.toUpperCase() === char ? `${i !== 0 ? '-' : ''}${char.toLowerCase()}` : char }).join('') } }32:T19e2,codeGraph = `digraph { rankdir = "LR"; ranksep = "1"; nodesep = "0.05"; concentrate = "true"; overlap="scale"; root="n7"; layout ="${layout}" ; outputorder = "edgesfirst"; ratio = "auto"; ordering="out"; splines = "true"; edge [arrowsize="1", penwidth="0.6"] graph [bgcolor = "${/*#faf9f980*/'transparent'}" ] n0 [ label="library (244)", shape="underline", margin="0.15,0", fontsize="20", style="filled,rounded,bold", color="#e1789240", fillcolor="#aaaaaa31", labelfontcolor="white", fontcolor="#000000", fontname="Arial"] n1 [ label="ggplot2 (601)", shape="underline", margin="0.15,0", fontsize="26", style="filled,rounded,bold", color="#e1789299", fillcolor="#aaaaaa35", labelfontcolor="white", fontcolor="#000000", fontname="Arial"] n2 [ label="package (219)", shape="underline", margin="0.15,0", fontsize="19", style="filled,rounded,bold", color="#e1789236", fillcolor="#aaaaaa31", labelfontcolor="white", fontcolor="#000000", fontname="Arial"] n3 [ label="output (272)", shape="underline", margin="0.15,0", fontsize="22", style="filled,rounded,bold", color="#e1789244", fillcolor="#aaaaaa35", labelfontcolor="white", fontcolor="#000000", fontname="Arial"] n4 [ label="renderplot (147)", shape="underline", margin="0.15,0", fontsize="14", style="filled,rounded,bold", color="#e1789224", fillcolor="#aaaaaa22", labelfontcolor="white", fontcolor="#000000", fontname="Arial"] n5 [ label="ggplot (319)", shape="underline", margin="0.15,0", fontsize="24", style="filled,rounded,bold", color="#e1789252", fillcolor="#aaaaaa35", labelfontcolor="white", fontcolor="#000000", fontname="Arial"] n6 [ label="geom_line (74)", shape="underline", margin="0.15,0", fontsize="12", style="filled,rounded,bold", color="#e1789212", fillcolor="#aaaaaa14", labelfontcolor="white", fontcolor="#000000", fontname="Arial"] n7 [ label="install (151)", shape="underline", margin="0.15,0", fontsize="14", style="filled,rounded,bold", color="#e1789224", fillcolor="#aaaaaa22", labelfontcolor="white", fontcolor="#000000", fontname="Arial"] n8 [ label="packages (177)", shape="underline", margin="0.15,0", fontsize="12", style="filled,rounded,bold", color="#e1789229", fillcolor="#aaaaaa18", labelfontcolor="white", fontcolor="#000000", fontname="Arial"] n9 [ label="function (165)", shape="underline", margin="0.15,0", fontsize="17", style="filled,rounded,bold", color="#e1789227", fillcolor="#aaaaaa26", labelfontcolor="white", fontcolor="#000000", fontname="Arial"] n10 [ label="structure (125)", shape="underline", margin="0.15,0", fontsize="13", style="filled,rounded,bold", color="#e1789220", fillcolor="#aaaaaa21", labelfontcolor="white", fontcolor="#000000", fontname="Arial"] n11 [ label="factor (163)", shape="underline", margin="0.15,0", fontsize="17", style="filled,rounded,bold", color="#e1789226", fillcolor="#aaaaaa26", labelfontcolor="white", fontcolor="#000000", fontname="Arial"] n12 [ label="geom_bar (128)", shape="underline", margin="0.15,0", fontsize="13", style="filled,rounded,bold", color="#e1789221", fillcolor="#aaaaaa21", labelfontcolor="white", fontcolor="#000000", fontname="Arial"] n13 [ label="identity (68)", shape="underline", margin="0.15,0", fontsize="12", style="filled,rounded,bold", color="#e1789211", fillcolor="#aaaaaa10", labelfontcolor="white", fontcolor="#000000", fontname="Arial"] n14 [ label="legend (104)", shape="underline", margin="0.15,0", fontsize="12", style="filled,rounded,bold", color="#e1789217", fillcolor="#aaaaaa18", labelfontcolor="white", fontcolor="#000000", fontname="Arial"] n15 [ label="position (65)", shape="underline", margin="0.15,0", fontsize="12", style="filled,rounded,bold", color="#e1789210", fillcolor="#aaaaaa10", labelfontcolor="white", fontcolor="#000000", fontname="Arial"] n16 [ label="server (139)", shape="underline", margin="0.15,0", fontsize="20", style="filled,rounded,bold", color="#e1789222", fillcolor="#aaaaaa32", labelfontcolor="white", fontcolor="#000000", fontname="Arial"] n17 [ label="documents (45)", shape="underline", margin="0.15,0", fontsize="18", style="filled,rounded,bold", color="#e178927", fillcolor="#aaaaaa28", labelfontcolor="white", fontcolor="#000000", fontname="Arial"] n18 [ label="namespace (87)", shape="underline", margin="0.15,0", fontsize="12", style="filled,rounded,bold", color="#e1789214", fillcolor="#aaaaaa18", labelfontcolor="white", fontcolor="#000000", fontname="Arial"] n19 [ label="failed (84)", shape="underline", margin="0.15,0", fontsize="19", style="filled,rounded,bold", color="#e1789213", fillcolor="#aaaaaa30", labelfontcolor="white", fontcolor="#000000", fontname="Arial"] n20 [ label="geom_point (42)", shape="underline", margin="0.15,0", fontsize="12", style="filled,rounded,bold", color="#e178926", fillcolor="#aaaaaa7", labelfontcolor="white", fontcolor="#000000", fontname="Arial"] n21 [ label="shinyapp (40)", shape="underline", margin="0.15,0", fontsize="12", style="filled,rounded,bold", color="#e178926", fillcolor="#aaaaaa7", labelfontcolor="white", fontcolor="#000000", fontname="Arial"] n22 [ label="scale_fill_manual (40)", shape="underline", margin="0.15,0", fontsize="12", style="filled,rounded,bold", color="#e178926", fillcolor="#aaaaaa3", labelfontcolor="white", fontcolor="#000000", fontname="Arial"] n23 [ label="values (40)", shape="underline", margin="0.15,0", fontsize="12", style="filled,rounded,bold", color="#e178926", fillcolor="#aaaaaa3", labelfontcolor="white", fontcolor="#000000", fontname="Arial"] n24 [ label="element_blank (39)", shape="underline", margin="0.15,0", fontsize="12", style="filled,rounded,bold", color="#e178926", fillcolor="#aaaaaa0", labelfontcolor="white", fontcolor="#000000", fontname="Arial"] n25 [ label="session (76)", shape="underline", margin="0.15,0", fontsize="12", style="filled,rounded,bold", color="#e1789212", fillcolor="#aaaaaa14", labelfontcolor="white", fontcolor="#000000", fontname="Arial"]; n0 -> n1 [color="#dddddd"] n1 -> n2 [color="#dddddd"] n3 -> n4 [color="#dddddd"] n5 -> n6 [color="#dddddd"] n7 -> n8 [color="#dddddd"] n3 -> n9 [color="#dddddd"] n10 -> n11 [color="#dddddd"] n12 -> n13 [color="#dddddd"] n4 -> n5 [color="#dddddd"] n14 -> n15 [color="#dddddd"] n1 -> n8 [color="#dddddd"] n12 -> n5 [color="#dddddd"] n16 -> n9 [color="#dddddd"] n0 -> n17 [color="#dddddd"] n18 -> n2 [color="#dddddd"] n18 -> n19 [color="#dddddd"] n16 -> n3 [color="#dddddd"] n20 -> n5 [color="#dddddd"] n1 -> n19 [color="#dddddd"] n1 -> n7 [color="#dddddd"] n16 -> n21 [color="#dddddd"] n22 -> n23 [color="#dddddd"] n3 -> n5 [color="#dddddd"] n14 -> n24 [color="#dddddd"] n25 -> n9 [color="#dddddd"] n25 -> n3 [color="#dddddd"] n11 -> n5 [color="#dddddd"] }`33:T591,{ let gap = 8 let svg = await dot`${argdownGraph}`; svg.setAttribute('style',` padding: ${gap}px; width: ${width-(gap*2)}; max-width: ${640-(gap*2)}; border: 1px solid #ddd; border-radius: 8px; overflow:hidden; height: auto;`) svg = d3.select(svg) let links = [...svg.selectAll('g[class=edge]').selectAll('title')].map(d=>d.textContent.split('->')) function hover(el,decorator,event){ let node = d3.select(el), name = node.select("title").text(), context = links .filter((d) => d[0] == name || d[1] == name).flat() .filter((d) => d !== name).concat(name) svg.selectAll('g[class=node]') .filter((_,i,n)=>context.includes(d3.select(n[i]).select('title').text())) .each(function(d,i,n) { decorator.call(node,event,d3.select(n[i])) }) svg.selectAll('g[class=edge]') .filter((_,i,n)=> d3.select(n[i]).select('title').text().split('->').every(d=> context.includes(d))) .each(function(_,i,n) { decorator.call(node,event, d3.select(n[i])) }) } svg.selectAll('g[class=node]').on('pointerenter', function(e) { hover(this,decorate,e)}) svg.selectAll('g[class=node]').on('pointerleave', function(e) { hover(this,decorate,e)} ) return svg.node() }34:T1fcb,argdownGraph = `digraph "Argument Map" { rankdir = "BT"; concentrate = "false"; ratio = "auto"; size = "10,10" ; outputorder = "edgesfirst" ; edge[arrowsize="1", penwidth="1"]graph [bgcolor = "transparent" ] subgraph cluster_1 { label = <Argdown Basics>; color = "#DADADA"; margin="8" style = filled; labelloc = "b"; n4 [label=<

Statement 1

Another statement (after a blank line),
this time with a title defined in
square brackets. We can use the title
to refer to this statement later or
mention it in other statements.
#(Another tag)

>, shape="box", margin="0.11,0.055", style="filled,rounded,bold", color="#7570b3", fillcolor="white", labelfontcolor="white", fontcolor="#000000", type="statement-map-node"]; n5 [label=<

Statement 2

We have already defined a statement
with this title. Argdown allows you to
add multiple statements to the same
"equivalence class" by giving them the
same title. The statements will then
be treated as logically equivalent.

>, shape="box", margin="0.11,0.055", style="filled,rounded,bold", color="#1b9e77", fillcolor="white", labelfontcolor="white", fontcolor="#000000", type="statement-map-node"]; n7 [label=<

Argument title

Statements can be supported by
arguments . Arguments are defined by
using angle brackets. #tag

>, margin="0.11,0.055", shape="box", style="filled, rounded", fillcolor="#d95f02", fontcolor="#000000", type="argument-map-node"]; n8 [label=<

Another argument

This arguments attacks @[Statement 2].
#tag

>, margin="0.11,0.055", shape="box", style="filled, rounded", fillcolor="#d95f02", fontcolor="#000000", type="argument-map-node"]; n9 [label=<

Yet another argument

Arguments can also be supported or
attacked. #yet-another-tag

>, margin="0.11,0.055", shape="box", style="filled, rounded", fillcolor="#e7298a", fontcolor="#000000", type="argument-map-node"]; subgraph cluster_2 { label = <Argument reconstructions>; color = "#BABABA"; margin="8" style = filled; labelloc = "b"; n6 [label=<

Outgoing relations of the conclusion,
are also interpreted as outgoing
relations of the whole argument.

>, shape="box", margin="0.11,0.055", style="filled,rounded,bold", color="#1b9e77", fillcolor="white", labelfontcolor="white", fontcolor="#000000", type="statement-map-node"]; n10 [label=<

Argument 1

>, margin="0.11,0.055", shape="box", style="filled, rounded", fillcolor="#1b9e77", fontcolor="#000000", type="argument-map-node"]; } } n0 [label=<

Intro

Argdown is a simple syntax for defining
argumentative structures, inspired by
Markdown.

>, shape="box", margin="0.11,0.055", style="filled,rounded,bold", color="#1b9e77", fillcolor="white", labelfontcolor="white", fontcolor="#000000", type="statement-map-node"]; n1 [label=<

Writing a list of pros & cons in
Argdown is as simple as writing a
twitter message (actually we are right
in the middle of one).

>, shape="box", margin="0.11,0.055", style="filled,rounded,bold", color="#1b9e77", fillcolor="white", labelfontcolor="white", fontcolor="#000000", type="statement-map-node"]; n2 [label=<

But you can also logically reconstruct
more complex relations between
arguments or dive into the details of
their premise-conclusion structures.

>, shape="box", margin="0.11,0.055", style="filled,rounded,bold", color="#1b9e77", fillcolor="white", labelfontcolor="white", fontcolor="#000000", type="statement-map-node"]; n3 [label=<

Finally, you can export Argdown as a
graph and create argument maps of
whole debates.

>, shape="box", margin="0.11,0.055", style="filled,rounded,bold", color="#1b9e77", fillcolor="white", labelfontcolor="white", fontcolor="#000000", type="statement-map-node"]; n1 -> n0 [type="support", color="#00ff00"]; n2 -> n0 [type="support", color="#00ff00"]; n3 -> n0 [type="support", color="#00ff00"]; n7 -> n5 [type="support", color="#00ff00"]; n9 -> n8 [type="attack", color="#ff0000"]; n8 -> n5 [type="attack", color="#ff0000"]; n0 -> n10 [type="attack", color="#ff0000"]; n10 -> n6 [type="attack", color="#ff0000"]; n10 -> n9 [type="support", color="#00ff00"]; n10 -> n4 [type="attack", color="#ff0000"]; n5 -> n10 [type="support", color="#00ff00"]; }`35:T886,function dot(t, ...lit) { let settings = [t,lit].flat().filter(d=> d.opt)[0]?.opt; let defaults = { zoom: true, async: true, inset: 16 } let { zoom, async, inset } = { ...defaults,...settings} let string = [t,lit].flat().filter(d=>!d.options) .map((str, i) => str + ( i < lit.length ? lit[i] : "")) .join(""); return graphviz.layout(string, "svg","dot") .then( d=> new DOMParser().parseFromString(d,"application/xml")) .then( d=> svg`${clean(d.querySelector("*"))}`) .then( d=> zoom ? focus(d) : d ) .then( d=> { d.setAttribute('viewBox',autoBox(d,inset)); return d}) function clean(node) { for(var n = 0; n < node.childNodes.length; n++) { var child = node.childNodes[n]; if ( child.nodeType === 8 ) { node.removeChild(child); n--; } else if ( child.nodeType === 1 ) { clean(child) } } return node } function focus(svg) { var svg = d3.select(svg); var g = svg.select("g"); let [x, y, w, h] = svg.attr("viewBox").split(" "); let zoom = d3.zoom(); svg.call(zoom .extent([[0, 0],[w, h]]) .scaleExtent([0.1, 8]) .on("zoom", ({ transform }) => g.attr("transform", transform))) .call(zoom.translateTo, w/2, -h/2) svg.on("dblclick.zoom", () => { event.stopPropagation(); svg .transition() .duration(250) .call(zoom.transform, d3.zoomIdentity.translate(0, h)) }); return svg.node() } function load(esmap){ let proxy = htl.html`