2e:null 2f:["$","title",null,{"children":"Pitchfork Best Albums of Decade | Alex Wein | Observable"}] 34:[] 32:{"id":"490ffd3b7c97eae5","slug":"pitchfork-best-albums-of-decade","title":"Pitchfork Best Albums of Decade","thumbnail":"d6885f32684d3f4667d66a8744721a5a4588a9ce9e78412d7d6a6c7730481697","access_level":"public","create_time":"$D2019-12-28T18:19:52.319Z","update_time":"$D2020-01-03T02:01:53.400Z","view_time":null,"first_public_time":"$D2020-01-03T01:19:47.064Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"4093387c4c9e9fa0","login":"a-lexwein","name":"Alex Wein","avatar_url":"https://avatars-next.observableusercontent.com/24e7d8a063682ac02c3dfe01ccd791dc00d5d7f9bcb16828adbcbf2faebb73a8","tier":"starter_2024"},"version":326,"publish_version":326,"role":null,"authored":false,"authors":[{"type":"individual","id":"df192455c1e22a3a","login":"a-lexwein","name":"Alex Wein","avatar_url":"https://avatars-next.observableusercontent.com/24e7d8a063682ac02c3dfe01ccd791dc00d5d7f9bcb16828adbcbf2faebb73a8","tier":null}],"members":[{"type":"individual","id":"df192455c1e22a3a","login":"a-lexwein","name":"Alex Wein","avatar_url":"https://avatars-next.observableusercontent.com/24e7d8a063682ac02c3dfe01ccd791dc00d5d7f9bcb16828adbcbf2faebb73a8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Pitchfork Best Albums of Decade","cells":[{"id":3,"value":"md`# Pitchfork Best Albums of Decade\n\nUses Adam Pearce's data from https://roadtolarissa.com/pitchfork/\n\nJust a janky notebook to practice some js. code and viz are garbage, but maybe someone else wants to play with the data.\n\n### do it\n* check data x\n* load tsv from Adam's github x\n* for each element in decade list:\n * get its demidecade position X\n * if on both lists, compute slope. Slope: if an album was 10 on L10-14 and 20 on L10-19, it's delta is 0.\n* Try the coachella thing\n * Make a \"new\" indicator\n * Color code by year: clear break with 2015-19 but also ordered.\n * try to get arrow to scale to font height.\n\nRankings data: smaller is better.\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"import {html, svg} from \"@observablehq/htl\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"data = {\n let url = 'https://raw.githubusercontent.com/1wheel/roadtolarissa/master/source/pitchfork/albums.tsv'\n \n let data = await d3.tsv(url, d3.autoType)\n \n return data.filter(x => x.year == '2010-2014' || x.year == '2010-2019')\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"joined = {\n let decade = data.filter(x => x.year == '2010-2019');\n let demidecade = data.filter(x => x.year == '2010-2014');\n \n const getDemiRank = function(target) {\n const found = demidecade.find(x => x.slug == target.slug);\n return found ? found.rank : undefined;\n }\n \n decade = decade.map(x => ({...x, rankDemi: getDemiRank(x)}))\n return decade.map(x => ({...x, slope: x.rankDemi * 2.0 - x.rank}))\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"t = joined.slice().sort((a, b) => d3.ascending(a.rank, b.rank))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":247,"value":"tf = t.filter(x => x.rankDemi)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"angle = {\n let min = Math.min(...tf.map(x=>x.slope))\n let max = Math.max(...tf.map(x=>x.slope))\n let abs = Math.max(Math.abs(min), Math.abs(max))\n \n return d3.scaleLinear()\n .domain([-abs, abs])\n .range([-Math.PI * .9 * .5, Math.PI * .9 * .5]) // unit: angle degrees\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":236,"value":"debug = {\n let min = Math.min(...t.map(x=>x.slope))\n let max = Math.max(...t.map(x=>x.slope))\n let abs = Math.max(Math.abs(min), Math.abs(max))\n return {min,max,abs}\n }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"line = (d) => !isNaN(d) ?\nsvg``\n:\nsvg``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"line(50)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"{\n const fontSize = function(x){\n if (x.rank == 1) return \"font-size:50px\";\n if (x.rank <= 5) return \"font-size:40px\";\n if (x.rank <= 25) return \"font-size:30px\";\n if (x.rank <= 50) return \"font-size:20px\";\n return \"font-size:10px\";\n }\n \n \n const view = function(x){\n return html`${x.artist} ${line(x.slope)}`\n }\n return html`

Pitchfork's Top Albums 2010-2019

Arrow indicates change from Best Albums of 2010-2014\n
\n ${t.filter(x => x.rank <= 200).map(x => view(x))}\n
`\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 33:"$32:body"