Public
Edited
May 28, 2023
d3.select('#bubble-chart')
// remove the loading text from the container
.text(null)
.datum(fd)
.call(chart)
chart = fc
.chartCartesian(d3.scaleLog(), d3.scaleLinear())
.xDomain(fc.extentLinear().accessors([d => d.income])(fd))
.yDomain(fc.extentLinear().accessors([d => d.lifeExpectancy])(fd))
.chartLabel('The Wealth & Health of Nations')
.xLabel('Income (dollars)')
.yLabel('Life expectancy (years)')
.xTicks(2, d3.format(',d'))
.yOrient('left')
.svgPlotArea(pointSeries)
.decorate(selection => {
// append an svg for the d3-legend
selection
.enter()
.append('d3fc-svg')
.attr('class', 'legend');
// render the legend
selection
.select('.legend')
.select('svg')
.call(legend);
});
pointSeries = fc
.seriesSvgPoint()
.crossValue(d => d.income)
.mainValue(d => d.lifeExpectancy)
.size(d => size(d.population))
.decorate(sel => {
sel.enter().attr('fill', d => color(d.region));
});
size = d3
.scaleLinear()
.range([20, 800])
.domain(fc.extentLinear().accessors([d => d.population])(fd));
legend = d3.legendColor().scale(color)
color = d3.scaleOrdinal(d3.schemeCategory10).domain(regions.values())
regions = new Set(fd.map(d => d.region))
fd.forEach(d => {
d.income = Number(d.income);
d.population = Number(d.population);
d.lifeExpectancy = Number(d.lifeExpectancy);
});
healthWealth = FileAttachment("health-wealth.json").json()
d3 = require("d3@latest")
fc = require("d3fc@latest")
indexRollup = require("d3-svg-legend@2.25.6")
d3.legendColor = indexRollup.legendColor;
fd = FileAttachment("health-wealth.json").json()
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.
