chart = {
const svg = d3.select(DOM.svg(width, height))
svg.style('background-color', '#222')
svg.style('border-radius', '6px')
const heading = ['One', 'Two', 'Three', 'Four']
const colours = {
Mean:'#E6C79C',
Median:'#66AE9B',
Mode:'#ED766B',
Range:'#CC7D89'
}
svg.selectAll('g')
.data(data).enter()
.append('g')
.each(function(d, i) {
let num = modify[selection](d)
d3.select(this)
.append('text')
.text(heading[i] +' ')
.attr("font-family", "sans-serif")
.attr("font-size", "20px")
.attr("fill", "#eee")
.attr('y', y(i) - 12)
.attr('x', margin.left + 6)
.append("svg:tspan")
.style('fill', '#888')
.text( selection === 'Mean' ? Math.round(num) : num )
const backgroundGroup = d3.select(this).append('g')
const backgrounds = backgroundGroup.selectAll('rect').data(num)
backgrounds.enter()
.append('rect')
.attr('x', margin.left)
.attr('y', y(i) -33)
.attr('rx', 4)
.attr('ry', 4)
.attr('height', 28)
.attr('width', lastBackground[i] )
.attr('fill', 'rgba(255,255,255,' + ( 0.1 / num.length ) + ')')
.transition()
.duration(300)
.ease(d3.easeCircle)
.on('end', (num) => lastBackground[i] = x(num) - margin.left + 6)
.attr('width', num => x(num) - margin.left + 6)
backgrounds.exit().remove()
const lineGroup = d3.select(this).append('g')
const lines = lineGroup.selectAll('rect').data(d)
lines.enter()
.append('rect')
.attr('x', d => x(d))
.attr('y', y(i)+1)
.attr('height', 26)
.attr('width', 2)
.attr('fill', 'rgba(255,255,255,0.1)')
lines.exit().remove()
const pointerGroup = d3.select(this).append('g')
const pointer = pointerGroup.selectAll('rect').data(num)
pointer.enter()
.append('rect')
.attr('rx', 4)
.attr('ry', 4)
.attr('y', y(i))
.attr('height', 28)
.attr('width', 28)
.attr('fill', lastFill[i])
.attr('x', lastPoint[i])
.transition()
.duration(300)
.ease(d3.easeCircle)
.on('end', (num, selection) => {
lastPoint[i] = x(num) - 10
lastFill[i] = colours[selection]
})
.attr('x', num => x(num)-10)
.attr('fill', colours[selection])
pointer.exit().remove()
})
return svg.node()
}