31:T411,chart = { const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); svg.append("g").call(xAxis); svg .append("g") .attr("transform", `translate(${width / 2}, ${height - 5})`) .append("text") .style("text-anchor", "middle") .text("DANCEABILITY") .attr("class", "x_text"); svg.append("g").call(yAxis); svg .append("g") .attr("transform", `translate(20, ${height / 2})rotate(-90)`) .append("text") .style("text-anchor", "middle") .text("ENERGY") .attr("class", "y_text"); svg .append("g") .attr("class", "hexbin") .selectAll("path") .data(bins) .enter() .append(shape) .attr("transform", (d) => `translate(${d.x},${height})`) .call( shape === "path" ? (path) => path.attr("d", (d) => hexbin.hexagon(r(d.length))) : (circle) => circle.attr("r", (d) => r(d.length)) ) .transition() .delay((d, i) => i) .duration(2500) .attr("transform", (d) => `translate(${d.x},${d.y})`); return svg.node(); }32:T870,style = html``33:T51f,### Spotify data Audio features are defined and modelled by Spotify. [link](https://developer.spotify.com/documentation/web-api/reference/#category-tracks) #### Danceability Danceability describes how suitable a track is for dancing based on a combination of musical elements including tempo, rhythm stability, beat strength, and overall regularity. A value of 0.0 is least danceable and 1.0 is most danceable. #### Energy Energy is a measure from 0.0 to 1.0 and represents a perceptual measure of intensity and activity. Typically, energetic tracks feel fast, loud, and noisy. For example, death metal has high energy, while a Bach prelude scores low on the scale. Perceptual features contributing to this attribute include dynamic range, perceived loudness, timbre, onset rate, and general entropy. #### How are these features created? "I've done a bit of work with it, and I know that the "danceability" metrics, etc. are proprietary. These are calculated by Echonest's algorithms, which is now owned by Spotify, but even when they weren't the specifics were closed off. Your best bet is maybe Tristan Jehan's dissertation, which talks about the concepts that would later go onto be echonest features." [link](https://www.researchgate.net/post/Is-there-any-documentation-about-Spotifys-audio-features)34:[{"id":"b82f35cd7b8a3f2940b2809489b233df0c89b8bfcd60b22f11102b5eb97b89bed3e3e402726958d4735ecd54b25ae0d9b436617bf8c2f6b62549527c2108e70b","href":"https://static.observableusercontent.com/files/b82f35cd7b8a3f2940b2809489b233df0c89b8bfcd60b22f11102b5eb97b89bed3e3e402726958d4735ecd54b25ae0d9b436617bf8c2f6b62549527c2108e70b","name":"data_by_genres.csv","type":"text/csv","lastModified":1631022423012.35,"size":579430}] 2f:{"title":"SPOTIFY | GENRES","cells":[{"id":0,"value":"# SPOTIFY | GENRES\n\nThis dataset contains the audio features for different genres from the music platform Spotify. Please find more details about the data in the appendix.","pinned":false,"hidden":false,"mode":"md"},{"id":364,"value":"viewof radius = {\n const form = html``;\n form.i.oninput = () =>\n (form.o.value = `${(form.value = form.i.valueAsNumber)}px radius`);\n form.i.oninput();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"viewof shape = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":218,"value":"The hexbin chart using color as a visual encoding for frequency (heatmap) shows that the clear majority of genres have higher levels on both audio features (around 0.7). ","pinned":false,"hidden":false,"mode":"md"},{"id":132,"value":"md` ### Data`","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"data = d3.csvParse(await FileAttachment(\"data_by_genres.csv\").text(), d3.autoType); ","pinned":false,"hidden":false,"mode":"ojs"},{"id":358,"value":"hexbin = d3\n .hexbin()\n .x((d) => x(d.danceability))\n .y((d) => y(d.energy))\n .radius(radius)\n .extent([\n [margin.left, margin.top],\n [width - margin.right, height - margin.bottom]\n ])","pinned":false,"hidden":false,"mode":"ojs"},{"id":372,"value":"bins = hexbin(data)","pinned":false,"hidden":false,"mode":"ojs"},{"id":527,"value":"bins.length","pinned":false,"hidden":false,"mode":"ojs"},{"id":206,"value":"formatNumber = d3.format(\".0\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"md` ### Scales`","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"x = d3.scaleLinear()\n .domain(d3.extent(data, d => d.danceability)).nice()\n .range([margin.left, width - margin.right])","pinned":false,"hidden":false,"mode":"ojs"},{"id":12,"value":"y = d3.scaleLinear()\n .domain(d3.extent(data, d => d.energy)).nice()\n .range([height - margin.bottom, margin.top])","pinned":false,"hidden":false,"mode":"ojs"},{"id":433,"value":"r = d3.scaleSqrt()\n .domain([0, d3.max(bins, d => d.length)])\n .range([0, hexbin.radius() * Math.SQRT2])","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"md` ### Axes`","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"xAxis = g => g\n .attr(\"class\", \"x-axis\")\n .attr(\"transform\", `translate(0,${height - margin.bottom})`)\n .call(d3.axisBottom(x)\n .ticks(5)\n .tickSize(0)\n .tickPadding(5)\n .tickFormat(formatNumber))","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"yAxis = g => g\n .attr(\"class\", \"y-axis\")\n .attr(\"transform\", `translate(${margin.left},0)`)\n .call(d3.axisLeft(y)\n .ticks(5)\n .tickPadding(5)\n .tickSize(0)\n .tickFormat(formatNumber))","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"---\n### Appendix ","pinned":false,"hidden":false,"mode":"md"},{"id":369,"value":"d3 = require(\"d3@6\", \"d3-hexbin@0.2\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"width = 950","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"height = 550","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"margin = ({top: 10, right: 10, bottom: 50, left: 50})","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":110,"value":"$33","pinned":false,"hidden":false,"mode":"md"}],"files":"$W34","stdlib":"1","titling":"auto"}