bubbleChart = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const chartArea = svg.append("g")
.attr("transform", `translate(${margin},${margin})`);
function renderBubbles(data) {
data.forEach((dataPoints, i) => {
chartArea.selectAll("circle.bubble_" + i)
.data(dataPoints)
.enter()
.append("circle")
.attr("class", "bubble_" + i)
.attr("cx", d => x(d.x))
.attr("cy", y(0))
.attr("r", 0)
.attr("stroke", colors[i])
.attr("fill", colors[i])
.attr("fill-opacity", 0.5);
chartArea.selectAll("circle.bubble_" + i)
.data(dataPoints)
.transition()
.duration(500)
.attr("cx", d => x(d.x))
.attr("cy", d => y(d.y))
.attr("r", d => z(d.z));
});
}
renderAxes(svg);
return Object.assign(svg.node(), {
render(data) {
renderBubbles(data);
}
});
}