2b:null 2c:["$","title",null,{"children":"Charting the Charts | Sahil Chinoy | Observable"}] 31:T150d,chart = { const chartWidth = width / numAcross; const radius = chartWidth / 1.7; const rowHeight = radius * 2.1; const margin = { top: 80, bottom: 0 } const height = (Math.floor(trackData.length / numAcross) + 1) * rowHeight + margin.top + margin.bottom; const svg = d3.select(DOM.svg(width, height)); const defs = svg.append('defs'); const gradient = defs.append('linearGradient') .attr('id', 'legend-gradient'); gradient.append('stop') .attr('offset', '0') .attr('stop-color', colors[0]); gradient.append('stop') .attr('offset', '1') .attr('stop-color', colors[1]); const barWidth = 220; const legend = svg.append('g') .attr('class', 'g-legend') .attr('transform', `translate(${width / 2 - barWidth / 2}, 10)`) legend.append('text') .attr('x', -10) .attr('y', 10) .text('Hits are different') .style('text-anchor', 'end') legend.append('text') .attr('x', barWidth + 10) .attr('y', 10) .text('Hits are similar') .style('text-anchor', 'start') legend.append('rect') .attr('x', 0) .attr('y', 0) .attr('width', barWidth) .attr('height', 10) .style('fill', 'url(#legend-gradient)') defs.append('marker') .attr('id', 'leader-marker') .attr('markerWidth', 12) .attr('markerHeight', 12) .attr('refX', 6) .attr('refY', 6) .append('rect') .attr('x', 0) .attr('y', 0) .attr('width', 12) .attr('height', 12) .style('fill', 'black') const rScale = d3.scaleLinear() .domain([-2.5, 2.5]) .range([0, radius]) .clamp(true); const radarLine = d3.lineRadial() .curve(d3.curveCardinalClosed) .radius(d => rScale(d)) .angle((d, i) => 2 * Math.PI * i / 5) const translateX = i => chartWidth / 2 + (i % numAcross) * chartWidth; const translateY = i => margin.top + rowHeight / 2 + Math.floor(i / numAcross) * rowHeight; let years = svg.append('g') .selectAll('g') .data(trackData) .enter().append('g') .attr('class', 'g-year') .attr('transform', (d, i) => `translate(${translateX(i)}, ${translateY(i)})`) years.each(function(d, i) { let container = d3.select(this); const songs = container .selectAll('g') .data(d => d.values) .enter().append('g') .attr('class', 'g-song') if (audioOn) { songs.filter(d => d.preview_url != '') .style('cursor', 'pointer') } songs.append('path') .attr('class', 'g-radar') .attr("d", d => radarLine(getChartData(d))) .style('stroke', d => colorScale(yearData[d.year].cosine_similarity)) let allPts = []; songs.each(function(d) { let sel = d3.select(this); let pathNode = sel.select('path').node(); const pts = sample(pathNode, precision) .map(f => { f.track = d.track; return f; }); allPts = allPts.concat(pts); let leader = sel.append('line') .attr('class', 'g-leader') .attr('x1', 0) .attr('y1', -radius + 10) .attr('x2', 0) .attr('y2', 0) .style('marker-end', 'url(#leader-marker)') const intersection = getIntersections(pathNode, leader); if (intersection) { leader.attr('y2', intersection.y) } }); const polygons = d3.voronoi() .extent([[-radius, -radius], [radius, radius]]) .x(d => d.x) .y(d => d.y) .polygons(allPts); let nested = d3.nest() .key(d => d.data.track) .entries(polygons.filter(d => d)); nested.forEach(function(d) { songs.filter(f => f.track == d.key) .append('g') .selectAll('path') .data(d.values) .enter().append('path') .attr('class', 'g-voronoi') .attr("d", d => d ? "M" + d.join("L") + "Z" : null ); }); let labels = songs.append('g') .attr('class', 'g-label') .attr('transform', `translate(0, ${-radius - 10})`) .style('font-style', d => audioOn && d.preview_url == '' ? 'italic' : ''); labels.append('text') .attr('x', 0) .attr('y', 0) .attr('width', chartWidth) .text(d => d.track); labels.append('text') .attr('x', 0) .attr('y', 16) .attr('width', chartWidth) .text(d => d.artist); container.append('text') .attr('class', 'g-year-label') .attr('x', 0) .attr('y', 0) .text(d => d.key); if (audioOn) { songs .on('click', function(d) { if (d.preview_url != '' && audio.src != d.preview_url) { audio.src = d.preview_url; audio.play(); d3.selectAll('.g-year').classed('g-playing', false); d3.select(this.parentNode).classed('g-playing', true); d3.selectAll('.g-song').classed('g-playing', false); d3.selectAll('.g-pulse').remove(); d3.select(this) .classed('g-playing', true) .append('path') .attr('class', 'g-pulse') .attr("d", d => radarLine(getChartData(d))); } else { audio.src = ''; d3.selectAll('.g-year').classed('g-playing', false); d3.selectAll('.g-song').classed('g-playing', false); d3.selectAll('.g-pulse').remove(); audio.pause(); } }); } }); return svg.node() }32:T521,md` The acoustic data comes via Spotify’s API from algorithms originally developed by the Echo Nest. Billboard chart data is from Bob Borst’s [website](http://www.bobborst.com/). Further reading and listening: * The Pudding’s [exploration](https://pudding.cool/2018/05/similarity/) of the similarity of Billboard hits * [This paper](http://journals.sagepub.com/doi/abs/10.1177/0003122417728662) by Michael Mauskapf and Noah Askin that asks what makes a song successful * Collin Morris’s [application](https://www8.gsb.columbia.edu/articles/projects/what-makes-a-hit/#explorer-intro) of the radar chart form to illustrate Mauskapf and Askin’s paper, and his analysis of repetition in song lyrics, neatly captured in this [Vox video](https://www.vox.com/videos/2017/10/13/16469744/repetition-in-music) * [This Spotify playlist](https://open.spotify.com/user/playlistgiants/playlist/6KOwiWg5zwrt83nEcx7HyI) of every year’s Billboard Top 10 hits * Bob Stanley’s book “Yeah Yeah Yeah: The Story of Modern Pop” In the course of developing this chart, I [experimented](https://beta.observablehq.com/@sahilchinoy/radar-chart-voronoi) with sampling points along a set of overlapping radar charts to compute a Voronoi tesselation, which enables hover using pure CSS.`33:Ta0b,style = html``34:T5db,// https://bl.ocks.org/bricof/f1f5b4d4bc02cad4dea454a3c5ff8ad7 function getIntersections(pathEl, line) { function btwn(a, b1, b2) { if ((a >= b1) && (a <= b2)) { return true; } if ((a >= b2) && (a <= b1)) { return true; } return false; } function line_line_intersect(line1, line2) { var x1 = line1.x1, x2 = line1.x2, x3 = line2.x1, x4 = line2.x2; var y1 = line1.y1, y2 = line1.y2, y3 = line2.y1, y4 = line2.y2; var pt_denom = (x1 - x2) * (y3 - y4) - (y1 - y2) * (x3 - x4); var pt_x_num = (x1*y2 - y1*x2) * (x3 - x4) - (x1 - x2) * (x3*y4 - y3*x4); var pt_y_num = (x1*y2 - y1*x2) * (y3 - y4) - (y1 - y2) * (x3*y4 - y3*x4); if (pt_denom == 0) { return "parallel"; } else { var pt = {'x': pt_x_num / pt_denom, 'y': pt_y_num / pt_denom}; if (btwn(pt.x, x1, x2) && btwn(pt.y, y1, y2) && btwn(pt.x, x3, x4) && btwn(pt.y, y3, y4)) { return pt; } else { return "not in range"; } } } var n_segments = 50; var pathLength = pathEl.getTotalLength(); for (var i=0; iIf audio is on, when you click a song, a 30-second sample (courtesy of Spotify) will begin playing. The song will turn red; click it again to stop playback. Many tracks, especially recent ones, do not have samples available. They are in italics.

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":839,"value":"audio = {\n if (audioOn) {\n return html`

`\n } else {\n return md`Audio player is not on.`\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":28,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":390,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1127,"value":"md`## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":501,"value":"colors = ['#00aeef', '#ec008c']","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":508,"value":"colorScale = d3.scaleLinear()\n .domain(d3.extent(Object.entries(yearData).map(d => d[1].cosine_similarity)))\n .range(colors)\n .interpolate(d3.interpolateLab)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":435,"value":"numAcross = width > 600 ? 5 : 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":67,"value":"precision = 5 // number of samples to take along each path for computing Voronoi diagram","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":176,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":66,"value":"// https://bl.ocks.org/mbostock/8027835\n\nfunction sample(pathNode, precision) {\n var pathLength = pathNode.getTotalLength(),\n samples = [];\n for (var sample, sampleLength = 0; sampleLength <= pathLength; sampleLength += precision) {\n samples.push(pathNode.getPointAtLength(sampleLength));\n }\n return samples;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1016,"value":"truncate = {\n // https://stackoverflow.com/questions/9241315/trimming-text-to-a-given-pixel-width-in-svg\n\n d3.select(chart).selectAll('.g-label text').each(function() {\n let sel = d3.select(this);\n let text = sel.text();\n let width = sel.attr('width');\n let textLength = sel.node().getComputedTextLength();\n while ( ( textLength > width ) && text.length > 0) {\n text = text.slice(0, -1);\n sel.text(text + '...');\n textLength = sel.node().getComputedTextLength();\n }\n });\n \n return true;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":639,"value":"function getChartData(d) {\n return [\n +d.loudness_z,\n +d.energy_z,\n +d.danceability_z,\n +d.acousticness_z,\n +d.valence_z\n ]\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":583,"value":"yearData = {\n let years = {}\n await d3.csv('https://gist.githubusercontent.com/sahilchinoy/27aa54a87c9fae231cf2564e127ca46a/raw/d93f20fb8395bce25a62bfcff30d399af58d9ea9/song_similarity_yearly.csv', d => {\n if (d.year >= 1960) {\n years[d.year] = {\n cosine_similarity: +d.cosine_similarity,\n //cosine_similarity_rolling: +d.cosine_similarity_rolling\n }\n }\n})\n \n return years\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":3,"value":"trackData = {\n const data = await d3.csv('https://gist.githubusercontent.com/sahilchinoy/a4729ef2aa5b8977307b39870073cf46/raw/7403c2a7526f02b94c3ab2b6091e20e39376d80f/top10_tracks.csv');\n return d3.nest()\n .key(d => d.year)\n .sortValues((a,b) => +a.position - b.position)\n .entries(data.filter(d => +d.year >= 1960));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":0,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":398,"value":"import {radio, checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"