scatterplot = {
const svg = d3.select(DOM.svg(width, height));
const tooltip = d3.select('body')
.append('div')
.attr('id', 'scatterplot-tooltip')
.style('position', 'absolute')
.style('z-index', '1')
.style('visibility', 'hidden')
.style('padding', '10px')
.style('background', 'rgba(0,0,0,0.6)')
.style('border-radius', '4px')
.style('color', '#fff');
svg.selectAll('circle')
.data(desiredData)
.join('circle')
.attr('cx', d => fertilityScale(d.fertility))
.attr('cy', d => lifeExpectScale(d.life_expect))
.attr('r', d => populationScale(d.pop))
.attr('fill', d => d3.schemeCategory10[d.cluster])
.attr('fill-opacity', 0.4)
.attr('stroke', d => d3.schemeCategory10[d.cluster])
.on("mouseover", function(e,d,i) {
let tooltipWidth = tooltip.node().offsetWidth;
let tooltipHeight = tooltip.node().offsetHeight;
tooltip
.style("left", e.pageX - tooltipWidth/2 +'px')
.style("top", e.pageY-tooltipHeight - 10+'px')
.style('visibility', 'visible')
.html(`<b> ${d.country}</b><br/>L. Expectancy: <b>${d.life_expect}</b><br/>Fertility: <b>${d.fertility}</b>`);
d3.select(this).attr('fill-opacity', 0.8);})
.on('mousemove', function (e) {
let tooltipWidth = tooltip.node().offsetWidth;
let tooltipHeight = tooltip.node().offsetHeight;
tooltip
.style("left", e.pageX - tooltipWidth/2 +'px')
.style("top", e.pageY-tooltipHeight - 10+'px')
})
.on("mouseout", function(e,d) {
tooltip
.style('visibility', 'hidden')
d3.select(this).attr('fill-opacity', 0.4);});
svg.append("g")
.call(xAxis);
svg.append("g")
.call(yAxis);
// Specific to Observable
return svg.node();
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
