Public
Edited
Feb 18
Insert cell
Insert cell
Insert cell
Insert cell
teams_stats21 = FileAttachment("teams_stats2@1.csv").csv()
Insert cell
Insert cell
margin = ({ top: 20, right: 30, bottom: 40, left: 50 });
Insert cell
width = 500 - margin.left - margin.right;
Insert cell
height = 300 - margin.top - margin.bottom;
Insert cell
Insert cell
xScale = d3.scaleLinear()
.domain(d3.extent(teams_stats21, d => +d.goals_for))
.range([0, width])
.nice();
Insert cell
yScale = d3.scaleLinear()
.domain(d3.extent(teams_stats21, d => +d.goals_against))
.range([height, 0])
.nice();
Insert cell
colorScale = d3.scaleSequential()
.domain(d3.extent(teams_stats21, d => +d.points))
.interpolator(d3.interpolateBlues);
Insert cell
radiusScale = d3.scaleSqrt()
.domain(d3.extent(teams_stats21, d => +d.points))
.range([3, 10]);
Insert cell
Insert cell
Insert cell
{
const svg = d3.create("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom);

const g = svg.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);

g.append("g")
.attr("class", "x-axis")
.attr("transform", `translate(0,${height})`)
.call(d3.axisBottom(xScale));

g.append("g")
.attr("class", "y-axis")
.call(d3.axisLeft(yScale));

render_data(g, teams_stats21);

return svg.node();
}
Insert cell
Insert cell
Insert cell
render_data = (group, data) => {
group.selectAll("circle")
.data(data)
.join("circle")
.attr("cx", d => xScale(+d.goals_for))
.attr("cy", d => yScale(+d.goals_against))
.attr("r", d => radiusScale(+d.points))
.attr("fill", "steelblue")
.attr("opacity", 0.8);
}
Insert cell

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.
Learn more