working_memory = {
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('g')
.call(xAxis);
const yAxis = wrapper.append('g')
.attr('class', 'y-axis')
.call(yAxisGenerator);
const grids = wrapper.append('g')
.call(grid);
var rects = wrapper.append('g')
.attr('class', 'bars')
.selectAll('rect')
.data(mydata[0].data)
.join('rect')
.attr('x', d => x(d.group))
.attr('y', d => y(d.mean))
.attr('fill', (d, i) => colorScale[i])
.attr('fill-opacity', 0.99)
.attr('stroke', '#3D4852')
.attr('height', d => y(y.domain()[0]) - y(d.mean))
.attr('width', x.bandwidth())
.on('click', changeYScale)
.style("cursor", "pointer");
wrapper.append('g')
.attr('class', 'confInt')
.selectAll('line')
.data(mydata[0].data)
.join('line')
.attr('y1', d => y(d.cl_lower))
.attr('y2', d => y(d.cl_upper))
.attr('x1', d => x(d.group)+ x.bandwidth() / 2)
.attr('x2', d => x(d.group) + x.bandwidth() / 2)
.attr('stroke', 'black');
wrapper.append('g')
.attr('class', 'topWhiskers')
.selectAll('line')
.data(mydata[0].data)
.join('line')
.attr('y1', d => y(d.cl_upper))
.attr('y2', d => y(d.cl_upper))
.attr('x1', d => x(d.group) + (x.bandwidth()/2) - (x.bandwidth() / 20))
.attr('x2', d => x(d.group) + (x.bandwidth()/2) + (x.bandwidth() / 20))
.attr('stroke', 'black');
wrapper.append('g')
.attr('class', 'bottomWhiskers')
.selectAll('line')
.data(mydata[0].data)
.join('line')
.attr('y1', d => y(d.cl_lower))
.attr('y2', d => y(d.cl_lower))
.attr('x1', d => x(d.group) + (x.bandwidth()/2) - (x.bandwidth() / 20))
.attr('x2', d => x(d.group) + (x.bandwidth()/2) + (x.bandwidth() / 20))
.attr('stroke', 'black');
function changeYScale() {
let yDomain = y.domain();
let tickValues = d3.range(28, 36, 1);
if (y.domain()[0] == 0) {
y.domain([28, 35]);
tickValues = d3.range(28, 36, 1);
} else {
y.domain([0, 35]);
tickValues = d3.range(0, 36, 5);
}
yAxis.transition(t)
.call(d3.axisLeft(y)
.ticks(tickValues)
.tickSize(3)
.tickValues(tickValues)
.tickFormat(d3.format(',.0f')))
.call(g => g.selectAll('.tick text')
.attr('font-size', '0.8rem'));
svg.select('.bars')
.selectAll('rect')
.transition(t)
.attr('y', d => y(d.mean))
.attr('height', d => y(y.domain()[0]) - y(d.mean));
svg.select('.confInt')
.selectAll('line')
.transition(t)
.attr('y1', d => y(d.cl_lower))
.attr('y2', d => y(d.cl_upper))
.attr('stroke', 'black');
svg.select('.topWhiskers')
.selectAll('line')
.transition(t)
.attr('y1', d => y(d.cl_upper))
.attr('y2', d => y(d.cl_upper));
svg.select('.bottomWhiskers')
.selectAll('line')
.transition(t)
.attr('y1', d => y(d.cl_lower))
.attr('y2', d => y(d.cl_lower));
}
return svg.node();
}