2c:null 2d:["$","title",null,{"children":"Spotify songs comparison | Julien Verdun | Observable"}] 32:T49d,parralelChart = { let height = keys.length * 55 const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); svg.append("g") .attr("fill", "none") .attr("stroke-width", 1.5) .attr("stroke-opacity", 0.4) .selectAll("path") .data(dataParl.slice(movingWindow,movingWindow+100).sort((a, b) => d3.ascending(a[keyz], b[keyz]))) .join("path") .attr("stroke", d => z(d[keyz])) .attr("d", d => line(d3.cross(keys, [d], (key, d) => [key, d[key]]))) .append("title") .text(d => d.name); svg.append("g") .selectAll("g") .data(keys) .join("g") .attr("transform", d => `translate(0,${y(d)})`) .each(function(d) { d3.select(this).call(d3.axisBottom(x.get(d))); }) .call(g => g.append("text") .attr("x", margin.left) .attr("y", -6) .attr("text-anchor", "start") .attr("fill", "currentColor") .text(d => d)) .call(g => g.selectAll("text") .clone(true).lower() .attr("fill", "none") .attr("stroke-width", 5) .attr("stroke-linejoin", "round") .attr("stroke", "white")); return svg.node(); }33:Tbc0,spiderChart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width+margin.left+margin.right, height+margin.top+margin.bottom]); let center = {"x":width/2+margin.left,"y":height/2+margin.top}; svg.append("text") .attr("x", center.x) .attr("y", margin.top / 2) .attr("text-anchor", "middle") .style("font-size", "16px") .style("text-decoration", "underline") .text(song + " (" + trackData[song].album + ")"); svg.append("text") .attr("x", center.x) .attr("y", margin.top / 2 + 20) .attr("text-anchor", "middle") .style("font-size", "16px") .style("text-decoration", "underline") .text(trackData[song].artist.join(" feat ")); let radialScale = d3.scaleLinear() .domain([0,1]) .range([0,250]); let ticks = [0.2,0.4,0.6,0.8,1] ticks.forEach(t => svg.append("circle") .attr("cx", center.x) .attr("cy", center.y) .attr("fill", "none") .attr("stroke", "gray") .attr("r", radialScale(t)) ); function angleToCoordinate(angle, value){ let x = Math.cos(angle) * radialScale(value); let y = Math.sin(angle) * radialScale(value); return {"x": center.x + x, "y": center.y - y}; } function angleToTextCoordinate(angle, value){ let x = Math.cos(angle) * radialScale(value); let y = Math.sin(angle) * radialScale(value); if (x < 0){ x -= radialScale(0.15); } return {"x": center.x + x, "y": center.y - y}; } for (var i = 0; i < features.length; i++) { let ft_name = features[i]; let angle = (Math.PI / 2) + (2 * Math.PI * i / features.length); let line_coordinate = angleToCoordinate(angle, 1); let label_coordinate = angleToTextCoordinate(angle, 1.1); //draw axis line svg.append("line") .attr("x1", center.x) .attr("y1", center.y) .attr("x2", line_coordinate.x) .attr("y2", line_coordinate.y) .attr("stroke","black"); //draw axis label svg.append("text") .attr("x", label_coordinate.x) .attr("y", label_coordinate.y) .attr("font-size",10) .text(ft_name); } let line = d3.line() .x(d => d.x) .y(d => d.y); function getPathCoordinates(data_point){ let coordinates = []; for (var i = 0; i < features.length; i++){ let ft_name = features[i]; let angle = (Math.PI / 2) + (2 * Math.PI * i / features.length); coordinates.push(angleToCoordinate(angle, data_point[ft_name])); } return coordinates; } let coordinates = getPathCoordinates(trackData[song]); coordinates.push(coordinates[0]); //draw the path element svg.append("path") .datum(coordinates) .transition() .ease(d3.easeLinear) .duration(200) .attr("d",line) .attr("stroke-width", 3) .attr("stroke", "#0000FF") .attr("fill", "#3333AA") .attr("stroke-opacity", 1) .attr("opacity", 0.5); return svg.node(); }34:[{"id":"43235a3799338549f57939d7ded90db30c7603afa81195a23455e7d6e657bef2b9c4a5139944ed7bf99446803d1faae95ed1b83189325d69dd50b3757dc3f036","href":"https://static.observableusercontent.com/files/43235a3799338549f57939d7ded90db30c7603afa81195a23455e7d6e657bef2b9c4a5139944ed7bf99446803d1faae95ed1b83189325d69dd50b3757dc3f036","name":"track_data_normalized@2.json","type":"application/json","lastModified":1611306680590.251,"size":339684}] 30:{"id":"28105eb866373070","slug":"spotify-songs-comparison","title":"Spotify songs comparison","thumbnail":"0fb00eadcd9e6a6df580a25aff56c84f66ad63b25515fdfc391fb0adbd55466b","access_level":"public","create_time":"$D2021-01-21T17:11:41.185Z","update_time":"$D2021-02-21T17:17:25.916Z","view_time":null,"first_public_time":"$D2021-01-23T14:17:52.531Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"2c154d247198863a","login":"julien-verdun","name":"Julien Verdun","avatar_url":"https://avatars-next.observableusercontent.com/e78a4d1529ce5b1d07975a54fce75fc0fbec7c27f47a9f2e1d20ea59ec9ba0a0","tier":"starter_2024"},"version":273,"publish_version":273,"role":null,"authored":false,"authors":[{"type":"individual","id":"15e24f1f71d36126","login":"julien-verdun","name":"Julien Verdun","avatar_url":"https://avatars-next.observableusercontent.com/e78a4d1529ce5b1d07975a54fce75fc0fbec7c27f47a9f2e1d20ea59ec9ba0a0","tier":null}],"members":[{"type":"individual","id":"15e24f1f71d36126","login":"julien-verdun","name":"Julien Verdun","avatar_url":"https://avatars-next.observableusercontent.com/e78a4d1529ce5b1d07975a54fce75fc0fbec7c27f47a9f2e1d20ea59ec9ba0a0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"ab532cb586f7eddf","slug":"spotifydatavisualizationproject","title":"SpotifyDataVisualizationProject","owner":{"id":"2c154d247198863a","login":"julien-verdun","name":"Julien Verdun"}},"type":"notebook","body":{"titling":"auto","title":"Spotify songs comparison","cells":[{"id":0,"value":"md`# Spotify songs comparison`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"viewof keyz = {\n const form = html`

${Object.assign(html``, {value: \"energy\"})} Color encoding`;\n form.select.onchange = () => (form.value = form.select.value, form.dispatchEvent(new CustomEvent(\"input\")));\n form.select.onchange();\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":224,"value":"legend({color: z, title: keyz})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"viewof movingWindow = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"line = d3.line()\n .defined(([, value]) => value != null)\n .x(([key, value]) => x.get(key)(value))\n .y(([key]) => y(key))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"z = d3.scaleSequential(x.get(keyz).domain(), t => d3.interpolateBrBG(1 - t))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"y = d3.scalePoint(keys, [margin.top, height - margin.bottom])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":187,"value":"x = new Map(Array.from(keys, key => [key, d3.scaleLinear(d3.extent(dataParl, d => d[key]), [margin.left, width - margin.right])]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"dataParl = data.map((value,index)=>{\n value[\"name\"] = songs[index];\n return value;\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":184,"value":"keys = features//.slice(1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"viewof index = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"song = songs[index]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":30,"value":"// features = Object.keys(data[0]);\nfeatures = [\"danceability\",\"energy\",\"loudness\",\"speechiness\",\"acousticness\",\"instrumentalness\",\"liveness\",\"valence\",\"popularity\",\"duration_ms\",\"tempo\"]\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"data = Object.keys(trackData).map(artist=>{\n let datum = trackData[artist];\n return {\n \"danceability\": datum.danceability,\n \"energy\": datum.energy,\n \"loudness\": datum.loudness,\n \"speechiness\":datum.speechiness, \n \"acousticness\":datum.acousticness, \n \"instrumentalness\":datum.instrumentalness, \n \"liveness\":datum.liveness, \n \"valence\":datum.valence, \n \"tempo\":datum.tempo, \n \"duration_ms\":datum.duration_ms, \n \"popularity\":datum.popularity\n };\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"songs = Object.keys(trackData);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"trackData = FileAttachment(\"track_data_normalized@2.json\").json();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"height = 600;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"width = 600;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"margin = ({top: 50, right: 50, bottom: 50, left:50})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"d3 = require(\"d3\");","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":221,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1"}} 31:"$30:body"