Public
Edited
Jul 7, 2024
viewof currDate = Scrubber(keys, { delay: 100, repeat: false })
svg = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const g = svg
.append("g")
.attr("class", "gDrawing")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
g.append("g")
.attr("class", "x--axis")
.attr("transform", `translate(0, ${iheight})`)
.call((axis) =>
axis
.append("text")
.text("Average Age")
.style("fill", "black")
.attr("transform", `translate( ${iwidth}, -10)`)
.style("text-anchor", "end")
);
g.append("g")
.attr("class", "y--axis")
.call((axis) =>
axis
.append("text")
.text("Count of Players")
.style("fill", "black")
.style("text-anchor", "middle")
.attr("y", -15)
);
g.append("text")
.attr("x", width / 2 - margin.left)
.attr("y", -margin.top / 2)
.attr("text-anchor", "middle")
.style("font-size", "18px")
.text("Average Age vs. Player Count Group by Nation");
const legend = Legend(
d3.scaleSequential([0, maxCount], d3.interpolatePlasma),
{
title: "count",
width: 200
}
);
// Append the legend to the SVG
g.append(() => legend)
.attr("x", width - 300)
.attr("y", -10);
return svg.node();
}
update = {
const g = d3.select(svg).select(".gDrawing");
const setCircleAttribs = (circle) => {
circle
.attr("cx", (d) => x(d[xAttr]))
.attr("cy", (d) => y(d[yAttr]))
.attr("r", (d) => Math.log(d[yAttr]) * 1.8)
.attr("opacity", (d) => (10 - Math.log(d[yAttr])) / 7)
.style("stroke", "gray")
.attr("fill", (d) => c(Math.log(d[yAttr])));
};
const t = g.transition().duration(750);
// Update axes
g.select(".x--axis").transition(t).call(d3.axisBottom(x));
g.select(".y--axis").transition(t).call(d3.axisLeft(y));
// Update circles
g.selectAll(".circle")
.data(filteredData)
.join((enter) => enter.append("circle").call(setCircleAttribs))
.attr("class", "circle")
.transition(t)
.call(setCircleAttribs);
}
import { Legend } from "@d3/color-legend"
margin = ({ left: 50, right: 20, top: 70, bottom: 50 })
iwidth = width - margin.left - margin.right
height = 500
iheight = height - margin.top - margin.bottom
xAttr = "avgAge"
yAttr = "count"
x = d3
.scaleLinear()
.domain([minAge - 2, maxAge])
.range([0, iwidth])
.nice()
y = d3
.scaleLinear()
.domain([0, d3.max(counted_avg, (d) => d.count)])
.range([iheight, 0])
.nice()
c = d3
.scaleSequential(d3.interpolatePlasma)
.domain(d3.extent(counted_avg, (d) => d.log_count))
color = d3.scaleOrdinal(d3.schemeBlues)
keys = Array.from(new Set(counted_avg.map((d) => d.avgAge)).values()).sort()
import { Scrubber } from "@mbostock/scrubber"
filteredData = counted_avg
.filter((d) => +d.avgAge <= +currDate)
.sort((a, b) => a.avgAge - b.avgAge)
currDate
{
const height = 400;
const width = 800;
const target = html`<svg id="target" viewBox="0 0 ${width} ${height}">
</svg>`;
const margin = { left: 50, right: 20, top: 20, bottom: 50 },
iwidth = width - margin.left - margin.right,
iheight = height - margin.top - margin.bottom;
const svg = d3.select(target);
const gDrawing = svg
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
gDrawing
.append("rect")
.attr("width", iwidth)
.attr("height", iheight)
.attr("fill", "#fff");
// Min and Max of average age to focus the graph so the data is not as clumped
const x = d3
.scaleLinear()
.domain([minAge - 2, maxAge])
.range([0, iwidth])
.nice();
const y = d3
.scaleLinear()
.domain([0, d3.max(counted_avg, (d) => d.count)])
.range([iheight, 0])
.nice();
const color = d3.scaleOrdinal(d3.schemeBlues);
const c = d3
.scaleSequential(d3.interpolatePlasma)
.domain(d3.extent(counted_avg, (d) => d.log_count));
gDrawing
.append("g")
.attr("class", "x--axis")
.attr("transform", `translate(0, ${iheight})`)
.call(d3.axisBottom(x));
gDrawing.append("g").attr("class", "y--axis").call(d3.axisLeft(y));
const circles = gDrawing
.selectAll("circle")
.data(counted_avg)
.join("circle")
.attr("cx", (d) => x(d.avgAge))
.attr("cy", (d) => y(d.count))
.attr("r", (d) => d.log_count * 1.7)
.attr("opacity", (d) => (10 - d.log_count) / 7)
.style("stroke", "gray")
.attr("fill", (d) => c(d.log_count));
return target;
}
data = FileAttachment("players_20.csv").csv()
groupData = d3.group(data, (d) => d.nationality)
d3.rollup(
data,
(v) => ({ count: v.length, aveAge: d3.mean(v, (d) => d.age) }),
(d) => d.nationality
)
counted_avg = Array.from(
d3.rollup(
data,
(v) => ({
count: v.length,
log_count: Math.log(v.length).toFixed(0),
avgAge: +d3.mean(v, (d) => +d.age).toFixed(2)
}),
(d) => d.nationality
),
([nationality, values]) => ({ nationality, ...values })
)
minAge = d3.min(counted_avg, (d) => d.avgAge)
maxAge = d3.max(counted_avg, (d) => d.avgAge);
maxCount = d3.max(counted_avg, (d) => d.count)
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.
