textSpiral = {
const height = width*.7
const svg = DOM.svg(width, height)
const color = d3.scaleOrdinal(['red','green','blue'])
yield svg
const layers = d3.nest()
.key( ({m}) => String(1 + m))
.entries(spiral)
const layer = d3.select(svg)
.attr('width', '10in')
.attr('height', '7in')
.selectAll('g')
.data(layers)
.enter()
.append('g')
.attr('transform', `translate(${width * .5}, ${height * .5+6}) scale(${.69})`)
.attr('id', ({key}) => key)
.attr(':inkscape:groupmode', 'layer')
.attr(':inkscape:label', l => l.key)
layer.selectAll('path')
.data(d => d.values)
.enter()
.append('path')
.attr('stroke', ({c,m}) => color(m) && '#333')
.attr('stroke-width', ({f,s,m}) => (1 + m)/s)
.attr('fill', 'none')
.attr('d', ({d, w}) => d )
.style('display', ({type}) => type === '_' ? 'none' : null)
.attr('transform', ({a,r,s,f,type}, i) => {
return `
scale(${s})
rotate(${a * 180 / Math.PI})
translate(${0}, ${(-r + (type === '.' ? 3 : 0)) / s + (1 - s) * b / s})
`
})
return svg
}