function concentricPctLines (datum, {
bind = null,
f = d3.format('.1f'),
swatch = null,
margin = {top: 10, right: 10, bottom: 30, left: 10},
circleSize = 350,
width = (circleSize * 2) + (margin.left + margin.right),
height = circleSize * 1.8 + (margin.top + margin.bottom),
max = 100,
domain = [0, max],
range = [0, circleSize],
} = {}) {
const w = width - margin.left - margin.right
const h = height - margin.top - margin.bottom
const colourArray = colours.filter(obj => obj.swatch === swatch)
bind.selectAll('svg').remove();
const sel = bind.append('svg')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', `translate(${margin.left},${margin.top})`);
const scale = d3.scaleLinear();
scale.domain(domain).range(range);
const r = scale(circleSize);
const translate = `translate(${width / 2},${(height - margin.bottom) / 2 })`;
const active = sel.append('g')
.attr('class', 'g-active-wrap')
.attr('transform', translate);
active.selectAll('circle')
.data(d3.range(datum))
.join('circle')
.attr('r', d => scale(d + 1))
.attr('fill', 'none')
.attr('stroke', d => {
const obj = colourArray[d]
const rgb = d3.rgb(obj.rgb[0], obj.rgb[1], obj.rgb[2]);
return rgb;
})
.attr('stroke-width', 4);
active.append('text')
.attr('class', 'percent-label')
.attr('y', scale(datum))
.attr('dy', 35)
.style('text-anchor', 'middle')
.text(datum);
return sel;
}