2c:null 2d:["$","title",null,{"children":"Bump Charts: English Premier League | Tanya Shapiro | Observable"}] 32:T694,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"}), //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}) ] })33:[{"id":"33f7fd7c8e5970f43112e7d861b9967e54112ae0fa63e248d15e750fff9fe2a92b8cf8c2f8eec6e058bb482bd11a0d85cf42d05895838297ad74913a998ca3e1","href":"https://static.observableusercontent.com/files/33f7fd7c8e5970f43112e7d861b9967e54112ae0fa63e248d15e750fff9fe2a92b8cf8c2f8eec6e058bb482bd11a0d85cf42d05895838297ad74913a998ca3e1","name":"epl_team_season.csv","type":"text/csv","lastModified":1685992288839.337,"size":7027},{"id":"899fd83e6c3f90864b5ce08506434e3d709bf33d120033ca440c40ab43e9eadb76e42e05e65274a1054cd1cf38eb61f0ec3f575df62bb5570f1b363b79c170be","href":"https://static.observableusercontent.com/files/899fd83e6c3f90864b5ce08506434e3d709bf33d120033ca440c40ab43e9eadb76e42e05e65274a1054cd1cf38eb61f0ec3f575df62bb5570f1b363b79c170be","name":"team_colors.csv","type":"text/csv","lastModified":1685992314468.239,"size":1201},{"id":"fb875af063948eae23255a9571b060eadcacad5bd8f63ef1c00bb76a4370cf3929715f2a7bfa2b72151420f672e95730076ac669593e751739e0db4bc8771158","href":"https://static.observableusercontent.com/files/fb875af063948eae23255a9571b060eadcacad5bd8f63ef1c00bb76a4370cf3929715f2a7bfa2b72151420f672e95730076ac669593e751739e0db4bc8771158","name":"ref_epl_teams.csv","type":"text/csv","lastModified":1685992326611.434,"size":5183}] 30:{"id":"aa2ed4c606d995c0","slug":null,"title":"Bump Charts: English Premier League","thumbnail":"1fb800ecf074f5cd3b42b706778100e1a02e14805da2d6678b81bf627fa5c105","access_level":"public","create_time":"$D2023-06-05T19:10:57.267Z","update_time":"$D2023-06-05T22:05:08.680Z","view_time":null,"first_public_time":"$D2023-06-05T20:18:53.997Z","has_unpublished_edits":null,"fork":false,"stars":31,"starred":false,"owner":{"type":"team","id":"230f604926360997","login":"tashapiro","name":"Tanya Shapiro","avatar_url":"https://avatars-next.observableusercontent.com/28b8518718dc3e70bed3a8256215864c8ac22777155e21dd5564f285665f60ae","tier":"starter_2024"},"version":228,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fccfb83ec070004a","login":"tashapiro","name":"Tanya Shapiro","avatar_url":"https://avatars-next.observableusercontent.com/28b8518718dc3e70bed3a8256215864c8ac22777155e21dd5564f285665f60ae","tier":null}],"members":[{"type":"individual","id":"fccfb83ec070004a","login":"tashapiro","name":"Tanya Shapiro","avatar_url":"https://avatars-next.observableusercontent.com/28b8518718dc3e70bed3a8256215864c8ac22777155e21dd5564f285665f60ae","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":13,"collection":{"id":"f74a9c30ecc99663","slug":"recreating-ggplots-with-observable-plot","title":"Recreating ggplots with Observable Plot","owner":{"id":"230f604926360997","login":"tashapiro","name":"Tanya Shapiro"}},"type":"notebook","body":{"title":"Bump Charts: English Premier League","cells":[{"id":0,"value":"# Bump Charts: English Premier League \nChange in team rankings season by season from 2018 to 2022. \n\nPART 1. Recreate my [\"Tale of Two Clubs\"](https://twitter.com/tanya_shapiro/status/1643731773170352128) ggplot bump chart.\n\nPART 2. Experiment to recreate one of my interactive graphics about the [EPL](https://tanyaviz.com/projects/premier-league/). Hover feature for line chart pending [Observable Plot enhancement](https://github.com/observablehq/plot/issues/1574).\n\nDATA. Includes data import and data prep for visualization.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":203,"value":"## PART 1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":170,"value":"## A Tale of Two Clubs\nThe English Premier League is the top professional football league in England. This chart highlights the teams with the most significant contrast in rankings over the past 5 years. Brighton & Hove Albion, a relative newcomer to the league, has gained 11 places, which Leicester City has declined in performance, falling 9 spots to 18th place.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"## DATA","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":210,"value":"Store main clubs that I want to highlight in a separate variable. Reduce typing (and typos)...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":172,"value":"accentClubs = ['Brighton & Hove Albion','Leicester City']","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"### Reshape Data\nUse SQL to reshape data and create two new data sets - main one for lines, and a second one with first and last season just for the team logos.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"select *\nfrom data d\nwhere last_season = 1 or first_season =1","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"firstLastSeason","database":"var:data"},{"id":18,"value":"select \n s.season\n ,s.rank \n ,s.team_name\n ,s.team_abbr\n --- data clean up for logo, not a perfect join, use case when to fill in blanks\n ,case \n when s.team_name = 'Manchester City' then 'https://resources.premierleague.com/premierleague/badges/t43.png'\n when s.team_name = 'Manchester United' then 'https://resources.premierleague.com/premierleague/badges/t1.png'\n else l.logo end as team_logo\n --- data clean up for team color, not a perfect join, use case when to fill in blanks\n ,case \n when s.team_name='Wolverhampton Wanderers' then '#fdb913' \n when s.team_name='Norwich City' then '#fff200'\n when s.team_name = 'Leicester City' then c.team_color_2\n when c.team_color_1 IS NULL then 'grey'\n else c.team_color_1 end as team_color\n ,rank() over (partition by team_name order by season) as first_season\n,rank() over (partition by team_name order by season desc) as last_season\nfrom seasons s \n left join colors c on c.team = s.team_name\n left join logos l on l.abbr = s.team_abbr\nwhere s.season>=2018","pinned":true,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","output":"data","database":"var:db"},{"id":4,"value":"### Import Data\nData scraped from ESPN with R, exported as csv, then imported into Observable.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"db = DuckDBClient.of({\n seasons: teamSeason, \n logos: teamLogo,\n colors : teamColors\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"teamSeason = await FileAttachment(\"epl_team_season.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"teamSeason","database":"$undefined"},{"id":7,"value":"teamColors = await FileAttachment(\"team_colors.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"teamColors","database":"$undefined"},{"id":8,"value":"teamLogo = await FileAttachment(\"ref_epl_teams.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"teamLogo","database":"$undefined"},{"id":136,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"