difference = {
const svg = d3.create('svg')
.attr('viewBox', [0, 0, width, height]);
const wrapper = svg.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`);
wrapper.append('path')
.datum(data_null)
.attr('fill', '#6CB2EB')
.attr('fill-opacity', .7)
.attr('stroke', 'none')
.attr('d', area);
wrapper.append('path')
.datum(data)
.attr('fill', '#3490DC')
.attr('fill-opacity', .9)
.attr('stroke', 'none')
.attr('d', area);
wrapper.append('line')
.attr('x1', x(0.31))
.attr('x2', x(0.31))
.attr('y1', 0)
.attr('y2', y.range()[0])
.style('stroke', '#fff')
.style('stroke-dasharray', '4 4');
wrapper.append('line')
.attr('x1', x(0))
.attr('x2', x(0))
.attr('y1', 0)
.attr('y2', y.range()[0])
.style('stroke', '#fff')
.style('stroke-dasharray', '4 4');
wrapper.append('line')
.attr('x1', x(0))
.attr('x2', x(0.31))
.attr('y1', innerHeight + margin.bottom / 3)
.attr('y2', innerHeight + margin.bottom / 3)
.style('stroke', 'black');
wrapper.append('line')
.attr('x1', x(0))
.attr('x2', x(0))
.attr('y1', innerHeight + margin.bottom / 3)
.attr('y2', innerHeight + margin.bottom / 4)
.style('stroke', 'black');
wrapper.append('line')
.attr('x1', x(0.31))
.attr('x2', x(0.31))
.attr('y1', innerHeight + margin.bottom / 3)
.attr('y2', innerHeight + margin.bottom / 4)
.style('stroke', 'black');
wrapper.append('text')
.attr('x', x(0.31 / 2))
.attr('y', innerHeight + margin.bottom / 1.5)
.text("Gruppenunterschied 10%")
.style('text-anchor', 'middle')
return svg.node();
}