<lively-presentation tabindex="0"></lively-presentation>
<div class="lively-slide" style="display: block;"> <!-- markdown-config presentation=true --> <!-- #TODO make style links in container content relative to url --> <!-- <link rel="stylesheet" type="text/css" href="style.css" /> --> <link rel="stylesheet" type="text/css" href="doc/PX2018/style.css"></link><link rel="stylesheet" type="text/css" href="src/client/lively.css"></link><link rel="stylesheet" type="text/css" href="templates/livelystyle.css"></link><style> .lively-slide { border: 1px solid rgb(220,220,220) page-break-before: always; /* border: 2px solid red <em>/ } p { font-size: 18pt } @media print { .lively-slide { page-break-before: always; border: 0px solid white; /</em> border: 2px solid blue; */ } } </style> <div class="title">PX 2018: Graph Drawing</div> <div class="authors">Theresa Zobel, Siegfried Horschig</div> <div class="credentials">Software Architecture Group Hasso Plattner Institute University of Potsdam, Germany</div> <lively-script><script>var button = document.createElement(&quot;button&quot;) button.textContent = &quot;print&quot; button.onclick = async () =&gt; { var presentation = lively.query(this, &quot;lively-presentation&quot;) presentation.print() } button.style = &quot;position: absolute; bottom: 10px; left: 10px&quot; button</script> </lively-script> ![](https://lively-kernel.org/lively4/lively4-jens/doc/PX2018/media/hpi_logo.png) <div class="page-number"></div> </div>
<div class="lively-slide" style="display: none;"># Abstract ![](https://lively-kernel.org/lively4/lively4-core/doc/PX2018/project_6/./img/standard-layout-1.gif) ![](https://lively-kernel.org/lively4/lively4-jens/doc/PX2018/media/hpi_logo.png) <div class="page-number"></div> </div>
<div class="lively-slide" style="display: none;"># Demo <div><svg width="900" height="500" id="svgContainer" style="border-style: solid"><g class="nodes"><circle r="10" cx="504.6702363960105" cy="224.1597547660516"></circle><title>1</title><circle r="10" cx="441.51370049050007" cy="302.68207250555514"></circle><title>2</title><circle r="10" cx="403.88576893763576" cy="223.1253175807241"></circle><title>3</title></g><g class="links"><line stroke-width="1" stroke="lightgray" x1="504.6702363960105" y1="224.1597547660516" x2="441.51370049050007" y2="302.68207250555514"></line><line stroke-width="1.4142135623730951" stroke="lightgray" x1="504.6702363960105" y1="224.1597547660516" x2="403.88576893763576" y2="223.1253175807241"></line></g></svg><button id="addNode">Add Node</button></div> <lively-script><script>import d3 from &quot;src/external/d3.v5.js&quot; var addNodeButton = lively.query(this, &quot;#addNode&quot;); addNodeButton.onclick = async () =&gt; { addNode(); } var svg = d3.select(lively.query(this, &quot;#svgContainer&quot;)); var nodeId = 3; var graphJson = { &quot;nodes&quot;: [ {&quot;id&quot;: &quot;1&quot;, &quot;group&quot;: 1}, {&quot;id&quot;: &quot;2&quot;, &quot;group&quot;: 2}, {&quot;id&quot;: &quot;3&quot;, &quot;group&quot;: 3} ], &quot;links&quot;: [ {&quot;source&quot;: &quot;1&quot;, &quot;target&quot;: &quot;2&quot;, &quot;value&quot;: 1}, {&quot;source&quot;: &quot;1&quot;, &quot;target&quot;: &quot;3&quot;, &quot;value&quot;: 2} ] } function getGraphJSON() { return graphJson; } function addNode() { nodeId++; var newNode = {&quot;id&quot;: nodeId, &quot;group&quot;: nodeId}; var newLink = {&quot;source&quot;: &quot;1&quot;, &quot;target&quot;: nodeId, &quot;value&quot;: 2}; graphJson[&quot;nodes&quot;].push(newNode); graphJson[&quot;links&quot;].push(newLink); console.log(graphJson); // restart(); } function restart() { console.log('restart'); } (async () =&gt; { var color = d3.scaleOrdinal(d3.schemeCategory20); var graph = getGraphJSON(), width = +svg.attr(&quot;width&quot;), height = +svg.attr(&quot;height&quot;); var simulation = d3.forceSimulation() .force(&quot;link&quot;, d3.forceLink().id(function(d) { return d.id; })) .force(&quot;charge&quot;, d3.forceManyBody()) .force(&quot;center&quot;, d3.forceCenter(width / 2, height / 2)); var node = svg.append(&quot;g&quot;) .attr(&quot;class&quot;, &quot;nodes&quot;) .selectAll(&quot;circle&quot;) .data(graph.nodes) node.exit().remove(); node = node.enter().append(&quot;circle&quot;) .attr(&quot;r&quot;, 10) .attr(&quot;fill&quot;, function(d) { return color(d.group); }) .call(d3.drag() .on(&quot;start&quot;, dragstarted.bind(this, simulation)) .on(&quot;drag&quot;, dragged.bind(this, simulation)) .on(&quot;end&quot;, dragended.bind(this, simulation))) .merge(node); var link = svg.append(&quot;g&quot;) .attr(&quot;class&quot;, &quot;links&quot;) .selectAll(&quot;line&quot;) .data(graph.links) link.exit().remove(); link = link.enter().append(&quot;line&quot;) .attr(&quot;stroke-width&quot;, function(d) { return Math.sqrt(d.value); }) .attr(&quot;stroke&quot;, &quot;lightgray&quot;) .merge(link); node.append(&quot;title&quot;) .text(function(d) { return d.id; }); simulation .nodes(graph.nodes) .on(&quot;tick&quot;, ticked.bind(this, link, node)); simulation.force(&quot;link&quot;) .links(graph.links) .distance(100); simulation.alpha(1).restart(); })(); function ticked(link, node) { link .attr(&quot;x1&quot;, function(d) { return d.source.x; }) .attr(&quot;y1&quot;, function(d) { return d.source.y; }) .attr(&quot;x2&quot;, function(d) { return d.target.x; }) .attr(&quot;y2&quot;, function(d) { return d.target.y; }); node .attr(&quot;cx&quot;, function(d) { return d.x; }) .attr(&quot;cy&quot;, function(d) { return d.y; }); } function dragstarted(simulation, d) { if (!d3.event.active) simulation.alphaTarget(0.3).restart(); d.fx = d.x; d.fy = d.y; } function dragged(simulation, d) { d.fx = d3.event.x; d.fy = d3.event.y; } function dragended(simulation, d) { if (!d3.event.active) simulation.alphaTarget(0); d.fx = null; d.fy = null; }</script> </lively-script> ![](https://lively-kernel.org/lively4/lively4-jens/doc/PX2018/media/hpi_logo.png) <div class="page-number"></div> </div>
<div class="lively-slide" style="display: none;"> <!-- #TODO pull this up into presentation? --> <lively-script><script>// poor men's slide master var presentation = lively.query(this, &quot;lively-presentation&quot;) if (presentation &amp;&amp; presentation.slides) { presentation.slides().forEach(ea =&gt; { var img = document.createElement(&quot;img&quot;) img.classList.add(&quot;logo&quot;) img.src=&quot;https://lively-kernel.org/lively4/lively4-jens/doc/PX2018/media/hpi_logo.png&quot; img.setAttribute(&quot;width&quot;, &quot;50px&quot;) ea.appendChild(img) var div = document.createElement(&quot;div&quot;) div.classList.add(&quot;page-number&quot;) ea.appendChild(div) }); } &quot;&quot;</script> </lively-script> ![](https://lively-kernel.org/lively4/lively4-jens/doc/PX2018/media/hpi_logo.png) <div class="page-number"></div> </div>