Public
Edited
Sep 30, 2023
data = FileAttachment("players_20.csv").csv()
Player's International Rating By Preferred Foot
svg = {
const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]);
const g = svg
.append("g")
.attr("transform", `translate(${margin.left}, ${margin.top})`);
g.append("g")
.call(d3.axisBottom(x))
.attr("transform", `translate(0, ${height - margin.top - margin.bottom})`)
.call((axis) =>
axis
.append("text")
.text(xAttr)
.style("fill", "black")
.attr("transform", `translate( ${iwidth}, -10)`)
.style("text-anchor", "end")
);
g.append("g")
.call(d3.axisLeft(y))
.call((axis) =>
axis
.append("text")
.text(yAttr)
.style("fill", "black")
.style("text-anchor", "middle")
.attr("y", -15)
);
// Your marks here
g.selectAll(".series")
.data(stackedData)
.join("g")
.attr("class", "series")
.attr("fill", (d) => color(d.key))
.selectAll(".bar")
.data((d) => d)
.join("rect")
.attr("class", "bar")
.attr("x", (d) => x(d.data[xAttr]))
.attr("width", x.bandwidth())
.attr("height", (d) => iheight - y(d[1] - d[0]))
.attr("y", (d) => y(d[1]));
return svg.node();
}
tableData = groupToStack(data, xAttr, colAttr)
stackedData = d3.stack().keys(color.domain())(tableData)
iwidth = width - margin.left - margin.right
iheight = height - margin.top - margin.bottom
colAttr = "international_reputation"
color = d3.scaleOrdinal(d3.schemePastel1).domain(data.map(d => d[colAttr]))
xAttr = "preferred_foot"
yAttr = "count"
x = d3
.scaleBand()
.domain(data.map(d => d[xAttr]))
.padding(0.3)
.range([0, iwidth])
y = d3
.scaleLinear()
.domain([0, d3.max(stackedData, d => d3.max(d, e => e[1]))])
.range([iheight, 0])
.nice()
y.domain()
height = 400
margin = ({ left: 50, top: 30, right: 20, bottom: 20 })
md`## Data`
d3 = require("d3@6")
import { groupToStack } from "@john-guerra/d3-stack-with-d3-group"
import { swatches } from "@d3/color-legend"
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.
