scatterplot = {
const svg = d3.select(DOM.svg(width, height));
const main = svg.append('g')
.attr('class', 'main')
.attr('clip-path', 'url(#clip)');
const tooltip = d3.select('body')
.append('div')
.attr('id', 'barchart-tooltip')
.style("font-family", "'Work Sans', sans-serif")
.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>🌏 Country</b>: ${d.country} <br/><b>👯♂️Population</b>: ${d.pop}
<br/><b>👴🏻 Life Expectancy</b>: ${d.life_expect} <br/><b>👶🏻 Fertility</b>: ${d.fertility}`)
d3.select(this).attr("fill", "steelblue");})
.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", "purple");});
function zoomed(event) {
fertilityScale.range([event.transform.applyX(margin.left), event.transform.applyX(width - margin.right)]);
main.selectAll('rect').attr("x", (d, i) => fertilityScale(i)).attr("width", fertilityScale.bandwidth());
xAxis.call(xAxis);
}
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.
