31:[] 2f:{"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"},{"id":8,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":195,"value":"import {html, svg} from \"@observablehq/htl\"","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":49,"value":"t = joined.slice().sort((a, b) => d3.ascending(a.rank, b.rank))","pinned":true,"hidden":false,"mode":"ojs"},{"id":247,"value":"tf = t.filter(x => x.rankDemi)","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":139,"value":"line = (d) => !isNaN(d) ?\nsvg``\n:\nsvg``","pinned":true,"hidden":false,"mode":"ojs"},{"id":279,"value":"line(50)","pinned":true,"hidden":false,"mode":"ojs"},{"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"}],"files":"$W31","stdlib":"1","titling":"auto"}

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"}],"files":"$W31","stdlib":"1","titling":"auto"}

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"}],"files":"$W31","stdlib":"1","titling":"auto"}