Public
Edited
Sep 18, 2023
data = FileAttachment("players_20.csv").csv()
groupedData = {
let result = {};
console.log("Data:", data);
for (let player of data) {
let nationality = player.nationality;
let age = Number(player.age);
console.log("Processing:", nationality, age);
if (isNaN(age)) {
continue;
}
if (!result.hasOwnProperty(nationality)) {
result[nationality] = { sumAge: 0, count: 0 };
}
result[nationality].sumAge += age;
result[nationality].count += 1;
}
console.log("Result:", result);
return result;
}
countrySummary = {
const output = {};
for (const country in groupedData) {
const countryData = groupedData[country];
const sum = countryData.count;
const avgAge = countryData.sumAge / countryData.count;
output[country] = { count: sum, averageAge: avgAge };
}
return output;
}
scatterData = Object.entries(countrySummary).map(
([country, { count, averageAge }]) => ({
country,
count,
averageAge
})
)
xScale = d3
.scaleLinear()
.domain([0, d3.max(scatterData, (d) => d.count)])
.range([0, 750])
yScale = d3
.scaleLinear()
.domain([0, d3.max(scatterData, (d) => d.averageAge)])
.range([480, 0])
colorScale = d3
.scaleOrdinal()
.domain(scatterData.map((d) => d.country))
.range(d3.schemeCategory10)
svg = {
const svg = d3.create("svg").attr("width", 800).attr("height", 500);
svg
.selectAll("circle")
.data(scatterData)
.enter()
.append("circle")
.attr("cx", (d) => xScale(d.count))
.attr("cy", (d) => yScale(d.averageAge))
.attr("r", 5)
.attr("fill", (d) => colorScale(d.country))
.append("title")
.text((d) => `${d.country}: Count=${d.count}, Average Age=${d.averageAge}`);
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.
