studiesViz = {
const svg = d3.create('svg')
.attr('viewBox', [0, 0, width, height]);
const wrapper = svg.append('g')
.attr('transform', `translate(${margin.left},${margin.top})`);
const defs = svg.append('defs');
wrapper.append('rect')
.attr('x', x(0))
.attr('width', x(0.2))
.attr('height', innerHeight)
.attr('fill', '#EFF8FF');
wrapper.append('rect')
.attr('x', x(0.2))
.attr('width', x(0.5))
.attr('height', innerHeight)
.attr('fill', '#BCDEFA');
wrapper.append('rect')
.attr('x', x(0.5))
.attr('width', x(0.3))
.attr('height', innerHeight)
.attr('fill', '#6CB2EB');
wrapper.append('rect')
.attr('x', x(0.8))
.attr('width', x(0.7))
.attr('height', innerHeight)
.attr('fill', '#3490DC');
wrapper.selectAll('text')
.data([[0.25, 'kleiner Effekt'], [0.53, 'mittlerer Effekt'], [0.85, 'großer Effekt']])
.join('text')
.attr('x', d => x(d[0]))
.attr('y', innerHeight - 10)
.text(d => d[1])
.style('font-size', 10)
.style('fill', '#0F2F21')
.style('font-weight', 'bold');
wrapper.append('g')
.call(grid);
wrapper.append('g')
.call(xAxis);
wrapper.append('g')
.call(yAxis);
wrapper.selectAll('circle')
.data(data)
.join('circle')
.attr('cx', d => x(d.effect))
.attr('cy', d => y(d.study) + y.bandwidth() / 2)
.attr('r', 5)
.attr('fill', '#0F2F21');
return svg.node();
}