Public
Edited
Jul 7, 2023
Plot.plot({
width:1000,
height:600,
marginBottom:50,
x: {tickSize:0,
tickPadding:25,
//adjust domain, add some padding for team text
domain: [2016.7,2023.3],
ticks: [2018, 2019, 2020, 2021, 2022],
//use to format years
tickFormat: d3.format("d"),
label:null},
y: {label:null,
ticks:false,
reverse:true},
marks: [
//line charts for all teams, apply bump-x curve to smooth out lines
Plot.lineY(data,
{x: "season",
y: "rank",
z: "team_name",
stroke:'#D8DCDC',
strokeWidth:3,
curve: "bump-x"}),
Plot.dot(data,
{x: "season",
y: "rank",
fill:'#D8DCDC'}),
//line chart just for Brighton and Leicester
Plot.lineY(data,
{filter: d => accentClubs.includes(d.team_name),
x: "season",
y: "rank", z:
"team_name",
stroke:'team_color',
strokeWidth:3,
curve: "bump-x"}),
//team logos
Plot.image(firstLastSeason, {src:"team_logo", height:25, width:25, x:"season", y:"rank"}),
//team names starting point
Plot.text(firstLastSeason,
{filter: d => d.season===2018,
text: d => d.team_name + ' ' + d.rank,
textAnchor: "end",
fontSize:13,
y:"rank",
x:2017.85}),
//team names ending point
Plot.text(firstLastSeason,
{filter: d => d.season===2022,
text: d => d.rank + ' ' + d.team_name,
textAnchor: "start",
fontSize:13,
y:"rank",
x:2022.15})
]
})
import {data, firstLastSeason} from "aa2ed4c606d995c0"
accentClubs = ['Brighton & Hove Albion','Leicester City']
viewof select = Inputs.select(["A", "B"], {label: "Select one",})
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.
