25:["$","title",null,{"children":"Spotify Top Charts – Wachert-Rabl, Kohr | FHOÖ Information Visualization | Observable"}] 49:T451,Willkommen zur Data Visualisierung des weltweiten Musikhörverhaltens auf Spotify von 2019 bis 2022! Hier können wir die Veränderungen und Trends in der Musiklandschaft während dieser Jahre erkunden und dabei insbesondere die Auswirkungen von Covid-19 betrachten. Diese einzigartige Visualisierung nutzt Waffle Charts, um die Top 36 jedes Jahres zu präsentieren. Du wirst begeistert sein, wie diese kleinen Quadrate uns große Einblicke in das Musikhörverhalten geben können. Während wir uns durch die Jahre bewegen, können wir mögliche Verschiebungen in den Hörgewohnheiten der Spotify-Nutzer erkennen. Vielleicht sehen wir einen Anstieg bestimmter Genres, die zur Bewältigung der Pandemie beigetragen haben, oder einen Rückgang von energetischen Tracks aufgrund der weltweiten Veranstaltungsbeschränkungen. Die Auswirkungen von Covid-19 auf die Musikbranche sind vielfältig, und diese Visualisierung ermöglicht es uns, diese Veränderungen in Echtzeit zu erkunden. Sei gespannt auf die faszinierenden Veränderungen und die Auswirkungen der Pandemie auf unsere musikalische Landschaft!4a:T1958,html`

${Plot.plot({ padding: 0, width: 400, height: 400, x: { label: "", axis: "" }, y: { label: "", axis: "" }, color: { type: "linear", legend: false, scheme: valueParameter === "Energy" ? "blues" : valueParameter === "Danceability" ? "greens" : valueParameter === "Tempo" ? "greys" : valueParameter === "Speechiness" ? "oranges" : valueParameter === "Speechiness" ? "purples" : "reds", domain: valueParameter === "Energy" || valueParameter === "Danceability" || valueParameter === "Acousticness" || valueParameter === "Liveness" || valueParameter === "Speechiness" ? [0, 100] : undefined, }, marks: [ Plot.cell(chartData.filter((d) => d.Year === 2019), { x: "Col", y: "Row", fill: valueParameter, inset: 1.2, title: (index) => { return `${"Artist:"} ${index.Artist}\n${"Track"}: ${index.Track}\n${valueParameter}: ${index[valueParameter]}`; }, fit: "auto" } ), ], })}

2019

Average ${valueParameter}: ${calculateAverage(chartData.filter((d) => d.Year === 2019), valueParameter)}

${Plot.plot({ padding: 0, width: 400, height: 400, x: { label: "", axis: "" }, y: { label: "", axis: "" }, color: { type: "linear", legend: false, scheme: valueParameter === "Energy" ? "blues" : valueParameter === "Danceability" ? "greens" : valueParameter === "Tempo" ? "greys" : valueParameter === "Speechiness" ? "oranges" : valueParameter === "Speechiness" ? "purples" : "reds", domain: valueParameter === "Energy" || valueParameter === "Danceability" || valueParameter === "Acousticness" || valueParameter === "Liveness" || valueParameter === "Speechiness" ? [0, 100] : undefined, }, marks: [ Plot.cell(chartData.filter((d) => d.Year === 2020), { x: "Col", y: "Row", fill: valueParameter, inset: 1.2, title: (index) => { return `${"Artist:"} ${index.Artist}\n${"Track"}: ${index.Track}\n${valueParameter}: ${index[valueParameter]}`; }, tip: true, fit: "auto" } ), ], })}

2020

Average ${valueParameter}: ${calculateAverage(chartData.filter((d) => d.Year === 2020), valueParameter)}

${Plot.plot({ padding: 0, width: 400, height: 400, x: { label: "", axis: "" }, y: { label: "", axis: "" }, color: { type: "linear", legend: false, scheme: valueParameter === "Energy" ? "blues" : valueParameter === "Danceability" ? "greens" : valueParameter === "Tempo" ? "greys" : valueParameter === "Speechiness" ? "oranges" : valueParameter === "Speechiness" ? "purples" : "reds", domain: valueParameter === "Energy" || valueParameter === "Danceability" || valueParameter === "Acousticness" || valueParameter === "Liveness" || valueParameter === "Speechiness" ? [0, 100] : undefined, }, marks: [ Plot.cell(chartData.filter((d) => d.Year === 2021), { x: "Col", y: "Row", fill: valueParameter, inset: 1.2, title: (index) => { return `${"Artist:"} ${index.Artist}\n${"Track"}: ${index.Track}\n${valueParameter}: ${index[valueParameter]}`; }, tip: true, fit: "auto" } ), ], })}

2021

Average ${valueParameter}: ${calculateAverage(chartData.filter((d) => d.Year === 2021), valueParameter)}

${Plot.plot({ padding: 0, width: 400, height: 400, x: { label: "", axis: "" }, y: { label: "", axis: "" }, color: { type: "linear", legend: false, scheme: valueParameter === "Energy" ? "blues" : valueParameter === "Danceability" ? "greens" : valueParameter === "Tempo" ? "greys" : valueParameter === "Speechiness" ? "oranges" : valueParameter === "Speechiness" ? "purples" : "reds", domain: valueParameter === "Energy" || valueParameter === "Danceability" || valueParameter === "Acousticness" || valueParameter === "Liveness" || valueParameter === "Speechiness" ? [0, 100] : undefined, }, marks: [ Plot.cell(chartData.filter((d) => d.Year === 2022), { x: "Col", y: "Row", fill: valueParameter, inset: 1.2, title: (index) => { return `${"Artist:"} ${index.Artist}\n${"Track"}: ${index.Track}\n${valueParameter}: ${index[valueParameter]}`; }, tip: true, fit: "auto" } ), ], })}

2022

Average ${valueParameter}: ${calculateAverage(chartData.filter((d) => d.Year === 2022), valueParameter)}

`4b:T664,Plot.plot({ padding: 0, width: 400, height: 400, x: { label: "", axis: "" }, y: { label: "", axis: "" }, color: { type: "linear", legend: true, label: "", width: 400, scheme: valueParameter1 === "Energy" ? "blues" : valueParameter1 === "Danceability" ? "greens" : valueParameter1 === "Tempo" ? "greys" : valueParameter1 === "Speechiness" ? "oranges" : valueParameter1 === "Speechiness" ? "purples" : "reds", domain: valueParameter1 === "Energy" || valueParameter1 === "Danceability" || valueParameter1 === "Acousticness" || valueParameter1 === "Liveness" || valueParameter1 === "Speechiness" ? [0, 100] : undefined, }, marks: [ Plot.cell(filteredData, { x: "Col", y: "Row", //fx: "Top 36 - " + yearParameter, fill: valueParameter1, inset: 0.8, title: (index) => { return `${"Artist:"} ${index.Artist}\n${"Track"}: ${index.Track}\n${valueParameter}: ${index[valueParameter]}`; }, tip: true, fit: "auto" } ), Plot.text(filteredData, { x: "Col", y: "Row", text: (index, i) => ("#" + (i + 1)).toString(), fill: "white", opacity: 0.95, align: "center", baseline: "middle", fontFamily: "system-ui", fontStyle: "normal", fontSize: 16, fontWeight: 600, monospace: true, stroke: "#000000", strokeWidth: 2, strokeOpacity: 0.5 }), ], });4c:T567,## Technische Dokumentaion Für die Erstellung dieses großartigen Dashboards haben wir verschiedene Techniken und Tools kombiniert. Um die Daten zu bereinigen und auf die Spotify API zuzugreifen, haben wir Python verwendet. Dadurch konnten wir sicherstellen, dass die Daten qualitativ hochwertig und aktuell sind. Für das persönliche Dashboard und die interaktive Weltkarte haben wir Tableau eingesetzt. Mit Tableau konnten wir ansprechende Visualisierungen erstellen und das Dashboard nach unseren Vorstellungen anpassen. Um diese Visualisierungen nahtlos in unsere Anwendung einzubinden, haben wir iFrames in Observable verwendet. Die Waffle Charts, die das Herzstück unseres Dashboards bilden, wurden mit JavaScript in Observable erstellt. Diese interaktiven Charts ermöglichen es uns, die Top Hits des Jahres auf eine visuell ansprechende und informative Weise darzustellen. Durch die Kombination all dieser verschiedenen Techniken und Werkzeuge konnten wir das Beste aus jedem Bereich herausholen und ein beeindruckendes Dashboard erstellen. Wir sind stolz darauf, dass wir die Möglichkeiten von Python, Tableau, Observable und JavaScript nutzen konnten, um eine einzigartige und bereichernde Erfahrung zu schaffen. Wir hoffen, dass dir das Ergebnis gefällt und du Spaß dabei hast, das Dashboard zu erkunden und die faszinierenden Datenvisualisierungen zu entdecken.4d:[{"id":"f99152d9b21813011572a8f68ca0ffd5d83287d9f4b7401263d343089a92ba082004392033c61a5e03f08c86046fefc0ea722294beb98a3f145d32e1160484d7","href":"https://static.observableusercontent.com/files/f99152d9b21813011572a8f68ca0ffd5d83287d9f4b7401263d343089a92ba082004392033c61a5e03f08c86046fefc0ea722294beb98a3f145d32e1160484d7","name":"ImageSpotify_03.jpeg","type":"image/jpeg","lastModified":1688115347554.989,"size":892622},{"id":"a659a053a993a90561c121693a007a93e93a70affb7ae73de37dafab31107cc5cd8bbebcfb7d0b844d70e6b1f0f8a514e61b29fb2823d53ae1189732bbe50f36","href":"https://static.observableusercontent.com/files/a659a053a993a90561c121693a007a93e93a70affb7ae73de37dafab31107cc5cd8bbebcfb7d0b844d70e6b1f0f8a514e61b29fb2823d53ae1189732bbe50f36","name":"charts.csv","type":"text/csv","lastModified":1687888349797.987,"size":21653}] 29:{"id":"c6e1dca835fd6875","slug":null,"title":"Spotify Top Charts – Wachert-Rabl, Kohr","thumbnail":"2b60277a6a5d863951d83c12873b465bed603626c3de2caf13d2fc0ed05c2cdc","access_level":"unlisted","create_time":"$D2023-06-27T17:45:43.035Z","update_time":"$D2023-06-30T18:02:01.296Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"4fbb25fe821f18db","login":"fhooe-infovis","name":"FHOÖ Information Visualization","avatar_url":"https://avatars-next.observableusercontent.com/ed8c4512a4de73fcd51f2a548db547555258287f869eea03112d4859ccbac5c3","tier":"education_2026","bio":"","followed_by_you":false,"follows_you":false},"version":119,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"64ee5163d65ed604","login":"juliankohr","name":"Julian Kohr","avatar_url":"https://avatars-next.observableusercontent.com/81bb4928126178c2be44b76daee9447a4b35d97df0d1c2ef50fae3daccbc27a2","tier":null,"bio":"","followed_by_you":false,"follows_you":false},{"type":"individual","id":"e52a1796713f7607","login":"michael-wachert","name":"Michael","avatar_url":"https://avatars-next.observableusercontent.com/e0e219e5a24555d070eda8c01daccafe52b56cbf4f0fc4e27ffc595c4005aa30","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"team","id":"4fbb25fe821f18db","login":"fhooe-infovis","name":"FHOÖ Information Visualization","avatar_url":"https://avatars-next.observableusercontent.com/ed8c4512a4de73fcd51f2a548db547555258287f869eea03112d4859ccbac5c3","tier":"education_2026","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"1ebb802d2c8d0ab4","slug":"hcc-infovis-prototypes","title":"HCC-InfoVis Prototypes","owner":{"id":"4fbb25fe821f18db","login":"fhooe-infovis","name":"FHOÖ Information Visualization"}},"type":"notebook","body":{"titling":"auto","title":"Spotify Top Charts – Wachert-Rabl, Kohr","cells":[{"id":0,"value":"# Spotify Top Charts – Wachert-Rabl, Kohr","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":108,"value":"$49","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"## Top 36 Charts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"### All Years Overview - ${valueParameter}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"viewof valueParameter = Inputs.select([\"Energy\", \"Danceability\", \"Tempo\", \"Acousticness\", \"Liveness\", \"Speechiness\"], {label: \"Parameter:\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"Plot.legend({\n padding: 0,\n width: 281,\n color: {\n type: \"linear\",\n legend: true,\n scheme:\n valueParameter === \"Energy\"\n ? \"blues\"\n : valueParameter === \"Danceability\"\n ? \"greens\"\n : valueParameter === \"Tempo\"\n ? \"greys\"\n : valueParameter === \"Speechiness\"\n ? \"oranges\"\n : valueParameter === \"Speechiness\"\n ? \"purples\"\n : \"reds\",\n domain: valueParameter === \"Energy\" ||\n valueParameter === \"Danceability\" ||\n valueParameter === \"Acousticness\" ||\n valueParameter === \"Liveness\" ||\n valueParameter === \"Speechiness\"\n ? [0, 100]\n : [0, 186],\n }})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":75,"value":"
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":112,"value":"## Wafflechart","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":110,"value":"Unser Wafflechart bietet eine visuell ansprechende Darstellung der beliebtesten Hits des Jahres. Die einzelnen Quadrate repräsentieren die Songs, und je dunkler das Quadrat, desto ausschlagender war der jeweilige Parameter.\n\nDu kannst das Jahr deiner Wahl auswählen und den gewünschten Musikparameter festlegen.\n\nAber damit nicht genug! Mit der Preview-Funktion kannst du in jeden Song hineinhören, um dir einen Eindruck von der Musik zu verschaffen. So kannst du leicht entscheiden, welche Songs du weiter erkunden möchtest.\n\nTauche ein in die Welt der Top Hits und entdecke die musikalischen Highlights eines Jahres mit unserem interaktiven Wafflechart. Viel Spaß beim Stöbern und beim Entdecken neuer Lieblingssongs!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"## ${yearParameter} - ${valueParameter1}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":17,"value":"viewof yearParameter = Inputs.select([\"2019\", \"2020\", \"2021\", \"2022\"], {label: \"Year:\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"viewof valueParameter1 = Inputs.select([\"Energy\", \"Danceability\", \"Tempo\", \"Acousticness\", \"Liveness\", \"Speechiness\"], {label: \"Parameter:\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"
","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"#### Listen","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"viewof songNumber = Inputs.number([1, 36], {step: 1, label: \"Input Song #\", placeholder: \"1\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"track(selectedUri)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"## World View","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":98,"value":"Willkommen zum \"Worldwide Spotify Streaming\" Dashboard! Hier entdeckst du das Hörverhalten auf Spotify weltweit. Finde heraus, wie sich der Musikgeschmack zwischen Ländern und Regionen unterscheidet.\n\nErkunde die Vorlieben für Genres, Künstler und Songs rund um den Globus. Filtere die Daten in Echtzeit und verfolge die Trends im Laufe der Zeit.\n\nVergleiche Länder direkt miteinander und entdecke kulturelle Unterschiede im Musikgeschmack. Erlebe die faszinierende Vielfalt der globalen Musik.\n\nTauche ein in das \"Worldwide Spotify Streaming\" Dashboard und lass dich von der weltweiten Musik inspirieren! Viel Spaß beim Entdecken!\n\n**Hint:** Nutze die Music Preview und reise durch die Welt der Musik...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":79,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":81,"value":"## Personal View","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":101,"value":"\nKennst du das auch? Das Gefühl der Enttäuschung, wenn der jährliche Spotify Jahresrückblick endlich verfügbar ist, aber kaum nützliche Informationen bietet? Es kann wirklich frustrierend sein, wenn wir uns auf detaillierte Einblicke in unser Hörverhalten freuen, nur um festzustellen, dass die Informationen begrenzt und oberflächlich sind.\n\nNicht nur das, es ist auch ärgerlich, dass der Jahresrückblick nur am Ende des Jahres zur Verfügung steht. Wir sind so daran gewöhnt, jederzeit auf unsere Lieblingsmusik zugreifen zu können, aber wenn es darum geht, tiefergehende Einblicke in unsere Hörgewohnheiten zu erhalten, müssen wir geduldig auf den Jahresrückblick warten.\n\nEs wäre großartig, wenn Spotify mehr Informationen und Statistiken in den Jahresrückblick integrieren würde. Vielleicht könnten sie uns Einblicke in unsere Top-Genres, meistgestreamten Künstler oder sogar detaillierte Daten über unsere Musikgeschmacksentwicklung im Laufe des Jahres geben.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":105,"value":"## The boring Spotify Wrapped Review","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":93,"value":"imagespotify_03 = FileAttachment(\"ImageSpotify_03.jpeg\").image()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"\n**Gute Neuigkeiten!** Wir haben eine Lösung für das Problem gefunden. Durch unseren eigenen Spotify Entwickler Account und die Nutzung der Spotify API können wir nun tiefgreifende Datenvisualisierungen zu unserem Hörverhalten erstellen - und das zu jeder Zeit!\n\nMit unserem personalisierten Dashboard haben wir die Möglichkeit, detaillierte Einblicke in unsere Top-Genres, meistgestreamten Künstler und sogar unsere Musikgeschmacksentwicklung im Laufe der Zeit zu erhalten. Wir können die Daten filtern, anpassen und in Echtzeit verfolgen.\n\nKein Warten mehr auf den Jahresrückblick am Ende des Jahres!\n\nEs ist aufregend zu sehen, wie wir unser Spotify-Erlebnis durch tiefgreifende Datenvisualisierungen bereichern können. Also, lasst uns eintauchen und die Faszination der Musikdaten erkunden, wann immer wir wollen!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":94,"value":"## Personal Spotify API View","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":96,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":114,"value":"$4c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":33,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":35,"value":"#### Imports and Variables","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":37,"value":"chartData = {\n const data = d3.csvParse(await FileAttachment(\"charts.csv\").text(), d3.autoType);\n return data.map(d => ({\n Index: d.index,\n Row: Math.floor((d.index / 6) - 0.1) + 1,\n Col: ((d.index - 1) % 6) + 1,\n Artist: d.artist_names,\n Track: d.track_name,\n Energy: parseFloat((d.energy * 100).toFixed(2)),\n Danceability: parseFloat((d.danceability * 100).toFixed(2)),\n Tempo: parseFloat((d.tempo).toFixed(2)),\n Acousticness: parseFloat((d.acousticness * 100).toFixed(2)),\n Liveness: parseFloat((d.liveness * 100).toFixed(2)),\n Speechiness: parseFloat((d.speechiness * 100).toFixed(2)),\n Year: d.year,\n Uri: d.uri.replace(\"spotify:track:\", \"\")\n })); \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"filteredData = chartData.filter((d) =>\n yearParameter === \"All (2019 - 2022)\" ? true : d.Year === parseInt(yearParameter)\n);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"function calculateAverage(data, parameter) {\n const sum = data.reduce((acc, d) => acc + d[parameter], 0);\n const average = sum / data.length;\n return average.toFixed(2);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"selectedUri = filteredData[songNumber - 1].Uri;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"function spotify(id, width = 400, height = 80) {\n if (id.indexOf('/') < 0) id = `album/${id}`;\n return html``;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"function track(id, w, h) {\n return spotify(`track/${id}`, w, h);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 24:null