{
const leftMargin = 20
const thickness = 5
const wideness = 600
let size = (d) => d.elements.length*12
let setBoxes = Stack({width: thickness, padding: 6, data: sets, size})
let subsetBoxes = Stack({width: thickness, padding: 6, data: subsets, size})
let setBoxesIndex = {}
setBoxes.boxes.forEach(box => setBoxesIndex[box.d.label] = box)
let setToSubsets = {}
sets.forEach(set => setToSubsets[set.label] = [])
subsets.forEach(subset => subset.sets.forEach(set => setToSubsets[set].push(subset)))
let setStacks = {}
sets.forEach(set => {
let stack = Stack({width: thickness/2, padding:0, data: setToSubsets[set.label], size})
setStacks[set.label] = {}
stack.boxes.forEach(box => setStacks[set.label][box.d.label] = box)
})
return svg`<svg width="${width}" height="${Math.max(setBoxes.height, subsetBoxes.height)}">
${
setBoxes.boxes.map(box => `<rect x="${leftMargin}" y="${box.begin}" width="${box.width}" height="${box.height}" fill="${setColor(box.d.label)}"/><text y="${box.begin+box.height/2}">${box.d.label}</text>`)
}
${
subsetBoxes.boxes.map(box => `<rect x="${leftMargin + wideness}" y="${box.begin}" width="${box.width}" height="${box.height}"/>`)
}
${
subsetBoxes.boxes.map(box => box.d.sets.map(set => `<path d="${Band({source: [thickness/2, setBoxesIndex[set].begin + setStacks[set][box.d.label].begin], target: [wideness, box.begin], width: box.height})}" transform="translate(${leftMargin},0)" fill="${setColor(set)}" opacity="0.5" style="mix-blend-mode: multiply;"/>` ))
}
</svg>`
}