{
const height = width
const svg = d3.select(DOM.svg(width, 400))
svg.selectAll("rect")
.data([[0,50,"#8cd4b4"],[50,100,"#9383ab"]])
.enter()
.append("rect")
.attr("x", d => xScale(d[0]))
.attr("y", 90)
.attr("width", d => (xScale(d[1]) - xScale(d[0])))
.attr("height", 220)
.attr("fill", d => d[2])
.attr('fill-opacity', 0.5);
svg.append("text")
.text("More biographies about men")
.attr('text-anchor','start')
.attr("transform","translate(30, 110)")
.attr("font-size", `${width/10}%`)
svg.append("text")
.text("More biographies about women")
.attr('text-anchor','end')
.attr("transform",`translate(${width - 30},110)`)
.attr("font-size", `${width/10}%`)
let simulation = d3.forceSimulation().nodes(data)
.force('collision', d3.forceCollide().radius(d => radiusScale(d.total)))
.force('x', d3.forceX().x(d => xScale(d.percent)))
.force('y', d3.forceY().y(d => 200))
.on('tick', ticked)
let selection = svg.selectAll('g').data(data)
let enterSelection = selection.enter().append('g')
let circles = enterSelection.append('circle')
.attr('r', d => radiusScale(d.total))
.attr('stroke', "#111111")
.attr('fill', "#111111")
.attr('fill-opacity', 0.3);
circles.append("title").text(d => d.key + " - " + d.percent + "%")
selection = selection.merge(enterSelection)
let xAxis = d3.axisBottom()
.scale(xScale)
.tickFormat(d => d + "%")
.ticks(width / 80)
.tickSizeOuter(0);
svg.append("g")
.attr("transform", "translate(0,310)")
.call(xAxis);
svg.append("text")
.text("Percentage of biographies that are about women in Wikipedia's top 50 languages")
.attr('text-anchor','middle')
.attr("transform",`translate(${width/2},370)`)
function ticked() {
selection.attr("transform", function(d) {return "translate(" + d.x + "," + d.y + ")" });
}
return svg.node();
}