bubble_chart = {
const svg = d3.select(DOM.svg(width, height));
svg.append('g').call(xAxis);
svg.append('g').call(yAxis);
svg.append('defs').call(addDefs);
const tip = d3.select('body').selectAll('div.tool-tip')
.data([1]).join('div')
.attr('class', 'tool-tip').style('opacity', 0);
svg.append('g')
.selectAll('circle')
.data(data)
.join('circle')
.attr('cx', d => x(d.x))
.attr('cy', d => y(d.y))
.attr('r', d => z(d.z))
.on('mouseover',d => {
tip.style('opacity', 1);
})
.on('mousemove', d => {
var rows = [];
rows.push([data.x, d3.format(" ,.2r")(d.x)]);
rows.push([data.y, d3.format(" ,.2r")(d.y)]);
rows.push([data.z, d3.format(" ,.2f")(d.z)]);
tip.html(rows.map(row => `<span>${row[0]}:<mark>${row[1]}</mark></span>`).join(''))
.transition().duration(200)
.style('opacity', .9)
.style('left', (d3.event.pageX + 28) + 'px')
.style('top', (d3.event.pageY - 28) + 'px');
})
.on('mouseout', d => {
tip.transition().duration(500).style('opacity', 0);
})
.style('fill', '#a4e5fc')
.style('opacity', '0.7')
.attr('stroke', 'd9f5ff');
return svg.node();
}