Published
Edited
Jan 3, 2020
md`# Pitchfork Best Albums of Decade
Uses Adam Pearce's data from https://roadtolarissa.com/pitchfork/
Just a janky notebook to practice some js. code and viz are garbage, but maybe someone else wants to play with the data.
### do it
* check data x
* load tsv from Adam's github x
* for each element in decade list:
* get its demidecade position X
* 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.
* Try the coachella thing
* Make a "new" indicator
* Color code by year: clear break with 2015-19 but also ordered.
* try to get arrow to scale to font height.
Rankings data: smaller is better.
`
d3 = require("d3@5")
import {html, svg} from "@observablehq/htl"
data = {
let url = 'https://raw.githubusercontent.com/1wheel/roadtolarissa/master/source/pitchfork/albums.tsv'
let data = await d3.tsv(url, d3.autoType)
return data.filter(x => x.year == '2010-2014' || x.year == '2010-2019')
}
joined = {
let decade = data.filter(x => x.year == '2010-2019');
let demidecade = data.filter(x => x.year == '2010-2014');
const getDemiRank = function(target) {
const found = demidecade.find(x => x.slug == target.slug);
return found ? found.rank : undefined;
}
decade = decade.map(x => ({...x, rankDemi: getDemiRank(x)}))
return decade.map(x => ({...x, slope: x.rankDemi * 2.0 - x.rank}))
}
t = joined.slice().sort((a, b) => d3.ascending(a.rank, b.rank))
tf = t.filter(x => x.rankDemi)
angle = {
let min = Math.min(...tf.map(x=>x.slope))
let max = Math.max(...tf.map(x=>x.slope))
let abs = Math.max(Math.abs(min), Math.abs(max))
return d3.scaleLinear()
.domain([-abs, abs])
.range([-Math.PI * .9 * .5, Math.PI * .9 * .5]) // unit: angle degrees
}
debug = {
let min = Math.min(...t.map(x=>x.slope))
let max = Math.max(...t.map(x=>x.slope))
let abs = Math.max(Math.abs(min), Math.abs(max))
return {min,max,abs}
}
line = (d) => !isNaN(d) ?
svg`<svg width="50" viewbox="-1 0 10 10">
<marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5"
markerWidth="6" markerHeight="6"
orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
<line x1="0" y1="5" x2="${3*Math.cos(angle(d))}" y2="${5 - 3*Math.sin(angle(d))}" style="stroke:rgb(255,0,0);stroke-width:.3"
marker-end="url(#arrow)"/>
</svg>`
:
svg`<svg width="50" viewbox="-1 0 10 10">
<circle cx=".5" cy="5" r=".5"/>
</svg>`
line(50)
{
const fontSize = function(x){
if (x.rank == 1) return "font-size:50px";
if (x.rank <= 5) return "font-size:40px";
if (x.rank <= 25) return "font-size:30px";
if (x.rank <= 50) return "font-size:20px";
return "font-size:10px";
}
const view = function(x){
return html`<span style=${fontSize(x)}>${x.artist} ${line(x.slope)}</span>`
}
return html`<div>
<h1>Pitchfork's Top Albums 2010-2019</h1>
<h3>Arrow indicates change from Best Albums of 2010-2014</h13>
<hr/>
${t.filter(x => x.rank <= 200).map(x => view(x))}
<div>`
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.