31:Tafb,html`

${variables.map(v => addChart(v))}

`32:T6f8,addChart = group => { const svg = d3.create('svg') .attr('viewBox', [0, 0, w, h]); // Divide variables into equal-length groups. const min = group == 'loudness' ? d3.min(data, d => d[group]) : d3.min(data, d => d[group]) < 1 ? 0 : d3.min(data, d => d[group]), max = group == 'loudness' ? d3.max(data, d => d[group]) : d3.max(data, d => d[group]) < 1 ? 1 : d3.max(data, d => d[group]), step = (max - min) / nBins; const bins = d3.pairs(d3.range(min, max + step * 0.5, step)); const category = d3.scaleQuantize() .domain([min, max]) .range(bins); // Group and summarise the data. let dataGrouped = d3.rollups(data, v => { return { mean: d3.mean(v, v => v.streams), n: v.length }; }, d => category(d[group])); dataGrouped = bins.filter(k => k != 'NaN, NaN').map(k => dataGrouped.filter(d => d[0] == k)[0]).filter(d => d != undefined); // Create scales. const x = d3.scaleBand() .domain(bins) .range([m.left, w - m.right]) .paddingInner(0.05); const yUpper = d3.scaleLinear() .domain([0, d3.max(dataGrouped, d => d[1].mean)]) .range([0, h * 0.5 - m.top]); const yLower = d3.scaleLinear() .domain([0, d3.max(dataGrouped, d => d[1].n)]) .range([0, h * 0.5 - m.bottom]); // Add label. svg.append('g') .attr('transform', `translate(${w * 0.5}, ${h * 0.05})`) .append('text') .attr('class', 'variable-title') .text(group.toUpperCase().replace('_MS', '')); // Add description. svg.append('g') .attr('transform', `translate(${w * 0.5}, ${h * 0.125})`) .append('text') .attr('class', 'description-center') .text(variablesDescriptions[group]); // Add bars. svg.call(addBars, group, dataGrouped, x, yUpper, yLower, bins); return svg.node(); }33:T1272,addBars = (svg, variable, data, x, yUpper, yLower, domain) => { const axis = svg.append('g') .attr('class', 'axis'); axis.call(addAxis, variable, x, domain); axis.append('line') .attr('x1', x.range()[0] - 10) .attr('x2', x.range()[1] + 10) .attr('y1', h * heightOffset) .attr('y2', h * heightOffset) .attr('stroke', 'url(#lineGradient)') .attr('stroke-width', 3); axis.call(addAxisLabel, variable, 'left'); axis.call(addAxisLabel, variable, 'right'); const upperBarsHolders = svg.append('g') .attr('class', 'upper-bars-holder') .selectAll() .data(data) .join('g') .attr('class', (d, i) => `bar-${i} bar-up`); upperBarsHolders.selectAll() .data(d => [d]) .join('rect') .attr('rx', 0.5) .attr('x', d => x(d[0])) .attr('y', d => h * heightOffset - yUpper(d[1].mean) - 1.5) .attr('width', x.bandwidth()) .attr('height', d => yUpper(d[1].mean)); upperBarsHolders.selectAll('text') .data(d => [d]) .join('text') .attr('class', 'bar-label') .attr('x', d => x(d[0]) + x.bandwidth() * 0.5) .attr('y', d => h * heightOffset - yUpper(d[1].mean) - 8.5) .text(d => Math.round(10 * d[1].mean / d3.max(data, d => d[1].mean)) / 10 == 1 ? '1x' : String(Math.round(100 * d[1].mean / d3.max(data, d => d[1].mean)) / 100 + 'x').replace('0.', '.')); const lowerBarsHolders = svg.append('g') .attr('class', 'lower-bars-holder') .selectAll() .data(data) .join('g') .attr('class', (d, i) => `bar-${i} bar-down`); lowerBarsHolders.selectAll() .data(d => [d]) .join('rect') .attr('rx', 0.5) .attr('x', d => x(d[0])) .attr('y', d => h * heightOffset + 1.5) .attr('width', x.bandwidth()) .attr('height', d => yLower(d[1].n)); lowerBarsHolders.selectAll('text') .data(d => [d]) .join('text') .attr('class', 'bar-label') .attr('x', d => x(d[0]) + x.bandwidth() * 0.5) .attr('y', d => h * heightOffset + yLower(d[1].n) + 8.5) .attr('dy', '0.6em') .text(d => Math.round(100 * d[1].n / d3.sum(data, d => d[1].n)) + '%'); let lastHoveredIndex; svg.append('g') .attr('class', 'invisible-bars-holder') .on('mouseenter', function() { const duration = 400, delay = duration * 0.05; svg.selectAll(`.bar-up:not(.bar-invisible)`) .transition() .duration(duration) .delay((d, i) => Math.abs(i - lastHoveredIndex) * delay) .attr('transform', 'translate(0, -20)'); svg.selectAll(`.bar-down:not(.bar-invisible)`) .transition() .duration(duration) .delay((d, i) => Math.abs(i - lastHoveredIndex) * delay) .attr('transform', 'translate(0, 20)'); svg.selectAll(`.axis-ticks > text`) .transition() .duration(duration) .delay((d, i) => Math.abs(i - lastHoveredIndex) * delay) .style('opacity', 1); }) .on('mouseleave', function() { const duration = 400, delay = duration * 0.05; svg.selectAll(`.bar-up`) .transition() .duration(duration) .delay((d, i) => data.length * delay - Math.abs(i - lastHoveredIndex) * delay) .attr('transform', 'translate(0, 0)'); svg.selectAll(`.bar-down`) .transition() .duration(duration) .delay((d, i) => data.length * delay - Math.abs(i - lastHoveredIndex) * delay) .attr('transform', 'translate(0, 0'); svg.selectAll(`.axis-ticks > text`) .transition() .duration(duration) .delay((d, i) => data.length * delay - Math.abs(i - lastHoveredIndex) * delay) .style('opacity', 0); }) .selectAll() .data(data) .join('rect') .attr('class', (d, i) => `bar-${i} bar-invisible`) .attr('rx', 0.5) .attr('x', d => x(d[0])) .attr('y', d => h * heightOffset - yUpper.range()[1] - 1.5 - 20) .attr('width', x.bandwidth() + 1.5) .attr('height', d => yUpper.range()[1] * 2 + 4.5 + 40) .style('opacity', 0) .on('mouseover', function(d, i) { lastHoveredIndex = i; svg.selectAll(`.bar-${i}.bar-up > rect`) .style('stroke', upperColor); svg.selectAll(`.bar-${i}.bar-down > rect`) .style('stroke', lowerColor); svg.selectAll(`.bar-${i}:not(.bar-invisible) > text`) .transition().duration(125) .style('opacity', 1); }) .on('mouseout', function(d, i) { svg.selectAll(`rect:not(.bar-invisible)`) .style('stroke', 'none'); svg.selectAll(`.bar-${i}:not(.bar-invisible) > text`) .transition().duration(125) .style('opacity', 0); }); }34:T667,html` `35:[{"id":"840c6334e9ed89716e4085b27fa8ea3b3c19a7b57bc3dffa38b962f13760c969cdb1e185ee19eacb87e20bb94623dba1acea9edf2bad38415151cc7824451271","href":"https://static.observableusercontent.com/files/840c6334e9ed89716e4085b27fa8ea3b3c19a7b57bc3dffa38b962f13760c969cdb1e185ee19eacb87e20bb94623dba1acea9edf2bad38415151cc7824451271","name":"featureSummarisedData.csv","type":"text/csv","lastModified":1588432178324.351,"size":467771}] 2f:{"title":"Connection between song's features and popularity","cells":[{"id":0,"value":"md`# Connection between song's features and popularity`","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"md`If you've ever wondered if:

*...loud songs are generally more popular than quiet ones...
...it's worth to include a lot of speech in the track when you're aiming to release a hit...
...popular songs are more sorrowful, happy or somewhere in between...*

this notebook might provide some answers.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":742,"value":"md`---\n## Introduction`","pinned":false,"hidden":false,"mode":"ojs"},{"id":776,"value":"md`Spotify's rich library of songs (and company's willingness to share their data) allows us to gain a better perspective on the vast amount of music-related topics.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":781,"value":"md`In the third chapter of The Anatomy of Hit Songs, we'll look into the characteristics of most popular songs on the platform between 2017 and 2019.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":785,"value":"md`---\n## Methodology`","pinned":false,"hidden":false,"mode":"ojs"},{"id":788,"value":"md`We'll focus on 10 metrics — from danceability through speechiness to tempo — each one of them was divided into a set of equal-length intervals.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1550,"value":"md`### How to read the chart`","pinned":false,"hidden":false,"mode":"ojs"},{"id":999,"value":"md`For every interval, two metrics were calculated — the first one is an average number of streams for songs that belong to a given category, where second one is simply a number of songs.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1009,"value":"md`By doing that, a simultaneous comparison of both distribution of features and popularity of songs for each interval is possible.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1557,"value":"md`### Interactivity`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1544,"value":"md`You can hover over the charts, to reveal metric's domain and highlight values for a given interval. For upper bars, the tooltip shows an average number of streams for that interval divided by maximum value of average streams for all intervals; for lower bars it shows percentage of songs that belong to given category.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1553,"value":"md`### Some metrics are just estimations`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1013,"value":"md`It's also worth noting that some of the metrics are *confidence metrics* — which means that they try to capture some characteristics, but it's not guaranteed that they do so correctly (one example — acousticness metric, which is supposed to tell whether or not a given song contains no instruments, takes a higher value for \"regular\" version of the most popular song in the dataset — Shape of You by Ed Sheeran, and lower value for its... acoustic version [and this should be totally opposite]).

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"viewof nBins = slider({\n title: 'NUMBER OF BINS',\n desc: 'Change the level of details.',\n theme: 'default-thin',\n divStyle: {\n width: '150px',\n 'margin': 'auto',\n 'text-align': 'center'\n },\n min: 1,\n max: 20,\n step: 1,\n value: 20,\n oninput: objs => {\n objs.output.textContent = objs.output.textContent.length > 1 ? objs.output.textContent : '0' + objs.output.textContent;\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":332,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":698,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":702,"value":"md`### Dimensions & constants`","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"w = 954","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"h = 350","pinned":false,"hidden":false,"mode":"ojs"},{"id":22,"value":"m = ({top: 85, right: 225, bottom: 85, left: 225})","pinned":false,"hidden":false,"mode":"ojs"},{"id":642,"value":"upperColor = '#FFB35F' // #FF9770","pinned":false,"hidden":false,"mode":"ojs"},{"id":644,"value":"lowerColor = 'lightgray' // #70D6FF","pinned":false,"hidden":false,"mode":"ojs"},{"id":1179,"value":"heightOffset = 0.55","pinned":false,"hidden":false,"mode":"ojs"},{"id":714,"value":"md`---\n### Functions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":308,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1261,"value":"addAxis = (axis, variable, x, domain) => {\n axis.append('g')\n .attr('class', 'axis-ticks')\n .selectAll()\n .data([...domain.map(d => d[0]), domain[domain.length - 1][1]])\n .join('text')\n .attr('x', (d, i) => i != domain.length ? x(domain[i]) : x(domain[i - 1]) + x(domain[1]) - x(domain[0]))\n .attr('y', heightOffset * h)\n .attr('dy', '0.3em')\n .text((d, i) => variable == 'duration_ms' ? Math.round(d / 1000) + 's' : variable == 'loudness' ? Math.round(d * 10) / 10 : variable == 'tempo' ? Math.round(d) : Math.round(d * 100) / 100);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":987,"value":"addAxisLabel = (axis, variable, position) => {\n axis.append('text')\n .attr('class', `axis-label-${position}`)\n .attr('transform', `translate(${position == 'left' ? m.left - 20 : w - m.right + 20}, ${h * heightOffset})`)\n .attr('dy', '0.3em')\n .text(function() {\n const text = axisLabels[variable][position == 'left' ? 0 : 1].toUpperCase();\n if (text.split(' ').length > 2) {\n d3.select(this).attr('dy', '-0.15em');\n d3.select(this.parentNode)\n .append('text')\n .attr('class', `axis-label-${position}`)\n .attr('transform', `translate(${position == 'left' ? m.left - 20 : w - m.right + 20}, ${h * heightOffset})`)\n .attr('dy', '1em')\n .text(text.split(' ').slice(2).join(' '));\n return text.split(' ').slice(0, 2).join(' ');\n } else {\n return text;\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":719,"value":"md`---\n### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"data = d3.csvParse(await FileAttachment('featureSummarisedData.csv').text(), d3.autoType)","pinned":false,"hidden":false,"mode":"ojs"},{"id":355,"value":"variables = data.columns.filter(d => ['id', 'n', 'streams', 'key', 'mode', 'time_signature'].indexOf(d) < 0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":527,"value":"axisLabels = ({\n acousticness: ['with instruments', 'without instruments'],\n danceability: ['not danceable at all', 'very dancey'],\n energy: ['energyless', 'very energetic'],\n instrumentalness: ['contains vocals', \"without words\"],\n liveness: ['no audience in track', 'recorded live'],\n loudness: ['mostly quiet', 'very loud'],\n speechiness: ['non-speech track (song)', 'speech-only (e.g. podcast)'],\n valence: ['sad', 'happy'],\n tempo: ['slow', 'fast'],\n duration_ms: ['short', 'long']\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1053,"value":"variablesDescriptions = ({\n acousticness: 'A confidence measure of whether the track is acoustic.',\n danceability: ['A measure which describes how suitable a track is for dancing.'],\n energy: ['A measure which represents a perceptual measure of intensity and activity.'],\n instrumentalness: ['A confidence measure of whether a track contains no vocals.'],\n liveness: ['A confidence measure which detects the presence of an audience in the recording.'],\n loudness: ['A measure which describes the overall loudness of a track in decibels.'],\n speechiness: ['A confidence measure which detects the presence of spoken words in a track.'],\n valence: ['A measure describing the musical positiveness conveyed by a track. '],\n tempo: ['The overall estimated tempo of a track.'],\n duration_ms: ['The duration of the track.']\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":711,"value":"md`---\n### Imports & Styles`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"d3 = require('d3@5', 'd3-array@2')","pinned":false,"hidden":false,"mode":"ojs"},{"id":476,"value":"import { slider } from '@bartok32/diy-inputs'","pinned":false,"hidden":false,"mode":"ojs"},{"id":459,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":387,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W35","stdlib":"1","titling":"auto"}