Public
Edited
May 20, 2024
color = d3.scaleOrdinal()
.domain(Object.values(countryRegionMapping))
.range(d3.schemeDark2)
regions = [
{ index: 0, label: 'Oceania' },
{ index: 1, label: 'Asia' },
{ index: 2, label: 'Africa' },
{ index: 3, label: 'Europe' },
{ index: 4, label: 'South America' },
{ index: 5, label: 'North America' },
];
function sizeLegend(container) {
// Append the bold part of the title
container.append('text')
.attr('x', 0)
.attr('y', 0)
.attr('fill', 'black')
.attr('font-family', 'Helvetica Neue, Arial')
.attr('font-weight', 'bold')
.attr('font-size', '13px')
.text('Bubble size:');
// Append the normal part of the title, positioned right after the bold part
container.append('text')
.attr('x', 80)
.attr('y', 0)
.attr('fill', 'black')
.attr('font-family', 'Helvetica Neue, Arial')
.attr('font-weight', 'normal')
.attr('font-size', '13px')
.text('relative to the contribution to world total of that year and to the zoom factor');
// Append the example description on the next line
/*container.append('text')
.attr('x', 0)
.attr('y', 20) // Adjust the y position to place the text below the first line
.attr('fill', 'black')
.attr('font-family', 'Helvetica Neue, Arial')
.attr('font-weight', 'normal')
.attr('font-size', '12px')
.text('e.g. if China\'s contribution to the world total of that year is 20% and Brazil\'s is 10%, then China will be twice as big. Additionally: relative to the zoom factor');*/
}
bubbleZoomChart.setYearAndEmissionType(yearZoomDynamic, emissionType)
reset, bubbleZoomChart.reset()
xAxis = (g, x) => g
.attr('transform', `translate(0, ${height - marginBottom})`)
.call(d3.axisBottom(x).ticks(12))
yAxis = (g, y) => g
.attr('transform', `translate(${marginLeft}, 0)`)
.call(d3.axisLeft(y).ticks(12 * k))
height = 560;
k = height / width
function calculateRadiusScale(data, transform, maxEmission, worldYearTotal, zx) {
const xDomainMax = zx.domain()[1];
const maxDomain = worldYearTotal / transform.k;
const maxRange = 0.5 * ((xDomainMax / (100 * transform.k)));
let newRadiusScale;
if (xDomainMax > 60) {
newRadiusScale = d3.scaleLinear().domain([0, 5000]).range([0.1, 20]);
} else if (xDomainMax > 15) {
newRadiusScale = d3.scaleLinear().domain([0, 1000]).range([0.01, 5]);
} else {
newRadiusScale = d3.scaleLinear().domain([0, 1000]).range([0.001, 5]);
}
return newRadiusScale;
}
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.
