31: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(); }32: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(); }33:[{"id":"43235a3799338549f57939d7ded90db30c7603afa81195a23455e7d6e657bef2b9c4a5139944ed7bf99446803d1faae95ed1b83189325d69dd50b3757dc3f036","href":"https://static.observableusercontent.com/files/43235a3799338549f57939d7ded90db30c7603afa81195a23455e7d6e657bef2b9c4a5139944ed7bf99446803d1faae95ed1b83189325d69dd50b3757dc3f036","name":"track_data_normalized@2.json","type":"application/json","lastModified":1611306680590.251,"size":339684}] 2f:{"title":"Spotify songs comparison","cells":[{"id":0,"value":"md`# Spotify songs comparison`","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":224,"value":"legend({color: z, title: keyz})","pinned":false,"hidden":false,"mode":"ojs"},{"id":263,"value":"viewof movingWindow = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":190,"value":"z = d3.scaleSequential(x.get(keyz).domain(), t => d3.interpolateBrBG(1 - t))","pinned":false,"hidden":false,"mode":"ojs"},{"id":189,"value":"y = d3.scalePoint(keys, [margin.top, height - margin.bottom])","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"id":199,"value":"dataParl = data.map((value,index)=>{\n value[\"name\"] = songs[index];\n return value;\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"keys = features//.slice(1)","pinned":false,"hidden":false,"mode":"ojs"},{"id":79,"value":"viewof index = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"value":"song = songs[index]","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":17,"value":"songs = Object.keys(trackData);","pinned":false,"hidden":false,"mode":"ojs"},{"id":9,"value":"trackData = FileAttachment(\"track_data_normalized@2.json\").json();","pinned":false,"hidden":false,"mode":"ojs"},{"id":32,"value":"height = 600;","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"width = 600;","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"margin = ({top: 50, right: 50, bottom: 50, left:50})","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"d3 = require(\"d3\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":221,"value":"import {legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}