Notebooks 2.0 is here.
Public
Edited
Jun 8, 2024
data = FileAttachment("players_20.csv").csv()
ageGroup = d3
.flatGroup(
data,
(d) => Math.floor(d.height_cm / 5) * 5,
(d) => Math.floor(d.potential / 10) * 10
)
.sort(d3.ascending)
groupData = ageGroup
.map(([height, potential, players]) => ({
height,
potential,
players: players.length
}))
.sort()
Plot.plot({
width: 800,
y: { transform: (d) => d },
color: { scheme: "Set2", range: groupData.potential, legend: "ramp" },
title: "Hight vs. Potential",
marks: [
Plot.ruleY([0]),
Plot.ruleX([0]),
Plot.barY(groupData, {
x: "height",
y: "players",
fill: "potential"
})
]
})
import { legend } 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.
