figure = {
const hw = 100, hh = 75
const ret = html`<svg width=${hw*2} height=${hh*2}><g transform="translate(${hw},${hh})"></g></svg>`,
sel = d3.select(ret).select('g')
sel.html(`<rect x=${-hw} y=${-hh} width=${hw*2} height=${hh*2} style="fill: #111"></rect>`)
sel.selectAll('g.node').data(nodes).join('g').attr('class', 'node')
.html(d => `<circle r=8 cx=${d[0]} cy=${d[1]} style="stroke:#444; stroke-width:2px; fill:none;"></circle>`)
sel.selectAll('g.edge').data(edges).join('g').attr('class', 'edge')
.html(d => makeStroke(d[0], d[1]))
function makeStroke(i,j) {
if (i == j) return `<circle r=2 cx=${nodes[i][0]} cy=${nodes[i][1]} style="fill: lightgray;"></circle>`
let [x1, y1] = nodes[i]
let [x2, y2] = nodes[j]
return `<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" style="stroke: lightgray; stroke-width:1.5px; stroke-dasharray: 7;"></line>`
}
return ret
}