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:T688,scatter = { const height = 400; const chartWidth = width > 600 ? 600 : width; const margin = { 'left': 38, 'top': 5, 'right': 15, 'bottom': 60 } const svg = d3.select(DOM.svg(chartWidth, height)); const x = d3.scaleLinear() .domain([1960, 2016]) .range([0, chartWidth - margin.right - margin.left]) const y = d3.scaleLinear() .domain(colorScale.domain()) .range([height - margin.bottom, 0]) const chart = svg.append('g') .attr('transform', `translate(${margin.left}, ${margin.top})`) chart.append("g") .attr("transform", `translate(0, ${height - margin.bottom + 20})`) .call( d3.axisBottom(x) .tickFormat(d => d.toString()) .ticks(5) ) .select(".domain") .remove() chart.append("g") .attr("transform", 'translate(-10, 0)') .call(d3.axisLeft(y).ticks(5)) .select(".domain") .remove() chart.selectAll('circle') .data(Object.entries(yearData)) .enter().append('circle') .attr('cx', d => x(d[0])) .attr('cy', d => y(d[1].cosine_similarity)) .attr('r', 3) .attr('fill', d => colorScale(d[1].cosine_similarity)) const line = d3.line() .curve(d3.curveCardinal) .x(d => x(d[0])) .y(d => y(d[1].cosine_similarity_rolling)); chart.append('g') .append("path") .attr('class', 'g-line') .datum(Object.entries(yearData).filter(d => +d[0] < 2016)) .attr("fill", "none") .style('stroke', 'grey') .style('stroke-opacity', .8) .style("stroke-linejoin", "round") .style("stroke-linecap", "round") .style("stroke-width", 1.5) .attr("d", line); return svg.node(); }33: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.`34:Ta0b,style = html``35: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"},{"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"},{"id":28,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":749,"value":"md`Something happened around 2000 that increased the homogeneity of the Billboard Top 10. The article explores some ideas, which include a change in the way record sales were tabulated, the dominance of a few producers and the increased prevalence of digital music-making. More recently, however, the charts have seen the return of some musical diversity.\n\nBelow, the mean similarity each year, plotted with a five-year rolling average.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":746,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":501,"value":"colors = ['#00aeef', '#ec008c']","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":435,"value":"numAcross = width > 600 ? 5 : 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":67,"value":"precision = 5 // number of samples to take along each path for computing Voronoi diagram","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"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"},{"id":583,"value":"yearData = {\n let years = {}\n await d3.csv('https://gist.githubusercontent.com/sahilchinoy/50f9f19a98d41afca7c0b06ef9f8fa68/raw/f50af4efead529a0d579bd948e0af86e31c08f80/years.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"},{"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"},{"id":0,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":398,"value":"import {radio, checkbox} from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}