2d:null 2e:["$","title",null,{"children":"Spotify Listening History Physicalization | Abdelaziz Sbaai | Observable"}] 33:[] 31:{"id":"09bc18d348874b8f","slug":"3d-viz-spotify-data","title":"Spotify Listening History Physicalization","thumbnail":"b28ac5546d147efbaeef2a28149e287b9d9f2ba67dceffb21080e9b606e4d227","access_level":"public","create_time":"$D2021-04-08T13:02:06.275Z","update_time":"$D2021-06-19T11:37:07.079Z","view_time":null,"first_public_time":"$D2021-04-09T14:08:24.806Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"5cb6ba29e114a2ab","login":"pillowinacoma","name":"Abdelaziz Sbaai","avatar_url":"https://avatars-next.observableusercontent.com/55b39439fbe7fd95502bd0377e4ccf95979ce07681a74f5076ba5a3d33d163c7","tier":"starter_2024"},"version":1068,"publish_version":1068,"role":null,"authored":false,"authors":[{"type":"individual","id":"071a5ed7a94b9ece","login":"pillowinacoma","name":"Abdelaziz Sbaai","avatar_url":"https://avatars-next.observableusercontent.com/55b39439fbe7fd95502bd0377e4ccf95979ce07681a74f5076ba5a3d33d163c7","tier":null}],"members":[{"type":"individual","id":"071a5ed7a94b9ece","login":"pillowinacoma","name":"Abdelaziz Sbaai","avatar_url":"https://avatars-next.observableusercontent.com/55b39439fbe7fd95502bd0377e4ccf95979ce07681a74f5076ba5a3d33d163c7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"Spotify Listening History Physicalization","cells":[{"id":0,"value":"md`# Spotify Listening History Physicalization`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"viewof month = slider({\n min: 0, \n max: months.length - 1, \n step: 1, \n value: 0, \n title: \"Month\", \n description: \"Select a month from your streaming history\",\n display: val => `${months[val].month + 1}/${months[val].year}`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":"viewof chartType = Radio(\n new Map(\n chartList.reduce((acc, curr, idx) => {\n acc.push([curr.title, idx]);\n return acc;\n }, [])\n ),\n {\n label: \"Chart\",\n value: 0\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"viewof filesToUpload","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":523,"value":"viewof myExporter(a_scene.object3D);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":376,"value":"mutable a_scene = {\n return html`\n \n ${draw()}\n `\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":592,"value":"md `## Bracelet settings`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":561,"value":"viewof thicc = slider({\n min: 0, \n max: 10,\n step: .1, \n value: .5, \n title: \"Thickness\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":566,"value":"viewof diameter = slider({\n min: 0, \n max: 20,\n step: 1, \n value: 5, \n title: \"Diameter\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":571,"value":"viewof baseWidth = slider({\n min: 0,\n max: 10,\n step: 1,\n value: 1,\n title: \"Base width\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":581,"value":"viewof bumpUnit = slider({\n min: 1,\n max: 20,\n step: 1,\n value: 1,\n title: \"Tooth unit Size\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":598,"value":"md `## Bar chart settings`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":603,"value":"viewof barCoeff = slider({\n min: 1,\n max: 20,\n step: .2,\n value: 1,\n title: \"Bar Height\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":665,"value":"viewof barWidth = slider({\n min: 1,\n max: 10,\n step: .2,\n value: 1,\n title: \"Bar width\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":685,"value":"viewof barDepth = slider({\n min: 1,\n max: 10,\n step: .2,\n value: 1,\n title: \"Bar depth (thickness)\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"md `# Draw`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"function draw() {\n return chartList[chartType].draw();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"function drawCircles() {\n return (\n `` +\n days\n .map((streamingDay, i, values) => {\n const far = diameter;\n const num = values.length;\n let width = streamingDay\n ? baseWidth + (streamingDay.msPlayed * 0.000001 * bumpUnit) / 60\n : baseWidth;\n let depth = ((far + width) * 2 * Math.PI) / num;\n let height = thicc;\n let pos1 = (far + width / 2) * Math.cos(((2 * Math.PI) / num) * i);\n let pos2 = (far + width / 2) * Math.sin(((2 * Math.PI) / num) * i);\n\n return ``;\n })\n .join(\"\")\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":513,"value":"monthDataToDays","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"function drawCubes() {\n return days\n .map((streamingDay, index, values) => {\n const height = (streamingDay.msPlayed * 0.0001 * barCoeff) / 60;\n return `\n \n \n`;\n })\n .join(\"\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"chartList = [\n {\n title: \"Bracelet\",\n draw: drawCircles,\n description:\n \"creates a 3d circuler bar chart (bracelet) of each month's streaming history\"\n },\n {\n title: \"Bar Chart\",\n draw: drawCubes,\n description: \"creates a 3d bar chart of each month's streaming history\"\n }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":32,"value":"md`# Data Treatement`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":78,"value":"function getRefinedData(streamingData){\n return streamingData.map((x)=>{\n let r = {endTime : strToDate(x.endTime), msPlayed : x.msPlayed};\n return r;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":946,"value":"refinedData = getRefinedData(streamingData())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":996,"value":"filteredStreams = refinedData.filter(\n x =>\n x.endTime.getMonth() === months[month].month &&\n x.endTime.getFullYear() === months[month].year\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1003,"value":"days = filteredStreams.reduce(monthDataToDays, [])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":57,"value":"function getMonthsAndYears(deez){\n return deez.reduce((acc, curr) =>{\n let month = curr.endTime.getMonth();\n let year = curr.endTime.getFullYear();\n let item = {month : month, year : year};\n let yIndex = acc.findIndex(x => x.year === item.year)\n let mIndex = acc.findIndex(x => x.month === item.month)\n \n \n if(yIndex == -1 || mIndex == -1 ){\n acc.push({month : month, year : year})\n } \n \n return acc;\n }, [])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"mutable months = getMonthsAndYears(refinedData)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"monthDataToDays = (acc, curr) => {\n let day = curr.endTime.getDate() - 1;\n acc[day] = {\n day: day,\n msPlayed:\n acc[day] == undefined ? curr.msPlayed : acc[day].msPlayed + curr.msPlayed\n };\n\n return acc;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"md `# Appendix`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"function verifyIsStreamingHistory(shd){\n return Array.isArray(shd) ;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"function verifyStreamingElement(curr) {\n return (\n 'endTime' in curr &&\n 'artistName' in curr &&\n 'trackName' in curr &&\n 'msPlayed' in curr\n );\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":72,"value":"function strToDate(str){\n str.replace(\" \", \"T\");\n return new Date(str + \"Z\");\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"import {viewof filesToUpload, streamingData} from \"@pillowinacoma/upload-json-spotify-streaming-history\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"import {slider} from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"aframe = require(\"https://aframe.io/releases/0.8.2/aframe.min.js\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":615,"value":"import {Radio} from '@observablehq/inputs'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"import {viewof myExporter} from \"@pillowinacoma/three-js-mesh-to-stl-exporter\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 32:"$31:body"