28:null 29:["$","title",null,{"children":"Entry 4 - Relationship between preferred music choices? | Keval Parekh | Observable"}] 2e:[{"id":"a2a052937df698c74a270d5a55cf516c32f70d8e9d83be3765a4d6715dbaa1d5038655556d2af6eae77fee3797fa967a13e9f6d234ac298fafb46c998b9ef998","href":"https://static.observableusercontent.com/files/a2a052937df698c74a270d5a55cf516c32f70d8e9d83be3765a4d6715dbaa1d5038655556d2af6eae77fee3797fa967a13e9f6d234ac298fafb46c998b9ef998","name":"image@1.png","type":"image/png","lastModified":1682204060900.289,"size":6489847},{"id":"6abe62767fe9a54e8f251755d2607df2650563eb57e1b727af0fa6960e9e1c4659bbbd23eeb8e6f722e3355c850bf593238e2bfa9933a109590b7e9d1a39358c","href":"https://static.observableusercontent.com/files/6abe62767fe9a54e8f251755d2607df2650563eb57e1b727af0fa6960e9e1c4659bbbd23eeb8e6f722e3355c850bf593238e2bfa9933a109590b7e9d1a39358c","name":"Music tracking data - Genre Wordcloud.csv","type":"text/csv","lastModified":1682204752791.556,"size":1011}] 2c:{"id":"a67ccd195328ffd5","slug":null,"title":"Entry 4 - Relationship between preferred music choices?","thumbnail":"9aa0b63c3346f3be145064759372408f94e47394488420d118dc974a31da1921","access_level":"public","create_time":"$D2023-04-22T22:54:20.900Z","update_time":"$D2023-04-22T23:12:52.435Z","view_time":null,"first_public_time":"$D2023-04-22T22:54:20.900Z","has_unpublished_edits":null,"fork":{"id":"a1055800ff6d5140","slug":"relationship-music-choices","title":"Entry 4 - Relationship between preferred music choices?","owner":{"id":"c13ce79fb895c9f0","login":"kepa","name":"Keval Parekh"}},"stars":0,"starred":false,"owner":{"type":"team","id":"c13ce79fb895c9f0","login":"kepa","name":"Keval Parekh","avatar_url":"https://avatars-next.observableusercontent.com/e31a2357c656070894ec980152d78bc1b9f52d2d352f117622056297dd13ec89","tier":"starter_2024"},"version":248,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1f1c0408c5c585a9","login":"kepa","name":"Keval Parekh","avatar_url":"https://avatars-next.observableusercontent.com/e31a2357c656070894ec980152d78bc1b9f52d2d352f117622056297dd13ec89","tier":null}],"members":[{"type":"individual","id":"1f1c0408c5c585a9","login":"kepa","name":"Keval Parekh","avatar_url":"https://avatars-next.observableusercontent.com/e31a2357c656070894ec980152d78bc1b9f52d2d352f117622056297dd13ec89","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Entry 4 - Relationship between preferred music choices?","cells":[{"id":0,"value":"# Entry 4 - Relationship between preferred music choices?\n#### Is there any familiarity between each of my music choices? ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"\n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"---\n### Visualizing personal music choices based on different parameters","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"Every song or piece of music emits a certain mood. There is a reason why someone listens to a particular song - be it rainy days, because they're feeling happy, because they're celebrating, because they're meditating, or because it helps them fall asleep peacefully. As part of my self-reflection exercise, I want to visualize my music choices based on mood, weather, purpose and occasion. I am doing this through a self-created dataset where I am tagging each and every song individually to - ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"1. **Mood** - My state of mind when I listen to that song or genre of music as well as the feelings or emotions it emits and hence, affects my mood\n2. **Purpose** - Why I listen to that song, artist, album or genre\n3. **Weather** - How does a particular weather influences my listening choices\n\nThis would involve a lot of manual data creation. I came across tsne.js and for the time being, I am using that to visualize familiarity within my music library. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"### Using tsne.js\nI am experimenting with tsne.js on my Apple Music data to see familiarity within my music library - how are each songs (individual data points) connected to each other in some way? ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":147,"value":"#### Preparing the data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":222,"value":"musicTrackingDataGenreWordcloud = await FileAttachment(\"Music tracking data - Genre Wordcloud.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"musicTrackingDataGenreWordcloud","database":"$undefined"},{"id":151,"value":"musicData = musicTrackingDataGenreWordcloud.map((d) => ({\n genre: d[\"genre\"],\n songsinLibrary: d[\"songsInLibrary\"],\n playedSongs: d[\"playedSongs\"],\n timePlayed: d[\"timePlayed\"],\n sharePercent: d[\"sharePercent\"]\n}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":164,"value":"Now that I have cleaned the data, I want to turn it into a dataset that could be go into tsne.js. For that I would create an array whose elements are arrays with three elements within them - \n1. Duration value\n2. Time (duration) since last played value\n3. Total play time (duration)\nas ratios to the individual values of the maximum data point.\n\nFirst, I am going to grab the data point which has the highest of these values from the array. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":175,"value":"minDuration = d3.min(musicData, (d) => d.songsinLibrary)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":169,"value":"maxDuration = d3.max(musicData, (d) => d.songsinLibrary)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"minSinceLastPlayed = d3.min(musicData, (d) => d.playedSongs)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":201,"value":"maxSinceLastPlayed = d3.max(musicData, (d) => d.playedSongs)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"minPlayDuration = d3.min(musicData, (d) => d.timePlayed)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"maxPlayDuration = d3.max(musicData, (d) => d.timePlayed)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"durationCal = {\n const newData = [];\n for (let i = 0; i < musicData.length; i++) {\n newData.push([\n musicData[i].songsinLibrary / maxDuration,\n musicData[i].playedSongs / maxSinceLastPlayed < 0\n ? 0\n : musicData[i].playedSongs / maxSinceLastPlayed,\n musicData[i].songsinLibrary / maxDuration\n ]);\n }\n return newData;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"meta = durationCal","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"viewof N = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"viewof perplexity = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"model = new tsnejs.tSNE({\n dim: 2,\n perplexity: perplexity\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":119,"value":"tsnejs = require(\"https://raw.githack.com/karpathy/tsnejs/master/tsne.js\").then(\n null,\n (_) => window.tsnejs\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"viewof context = {\n const context = DOM.context2d(width, height),\n canvas = context.canvas;\n canvas.value = context;\n return canvas;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"draw = {\n context.fillStyle = \"rgba(255,255,255,0.4)\"; // a cheap blur effect\n context.fillRect(0, 0, width, height);\n const X = d3\n .scaleLinear()\n .domain(d3.extent(solution, (d) => d[dimX]))\n .range([20, width - 20]);\n const Y = d3\n .scaleLinear()\n .domain(d3.extent(solution, (d) => d[dimY]))\n .range([20, (width * 2) / 3 - 20]);\n const radius = 150 / Math.sqrt(10 + solution.length);\n solution.forEach((point, i) => {\n let k = meta[i];\n context.beginPath();\n context.arc(X(point[dimX]), Y(point[dimY]), radius, 0, 2 * Math.PI);\n context.fillStyle = d3.hsl(k[0] * 360, 0.3 + 0.5 * k[1], 0.3 + 0.5 * k[2]);\n // (`rgb(${k[0]*256 | 0}, ${k[1]*256 | 0}, ${k[2]*256 | 0})`);\n context.fill();\n });\n return md`A simple loop: we draw a circle for each of the points, its color informed by the points array, its position informed by the solution array.`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"// genre = [\"r&b\", \"techno\", \"techno\", \"rock\"]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":89,"value":"// music = d3.range(1000).map((d) => ({\n// id: d,\n// duration: Math.random() * 180 + 30,\n// genre: randomChoice(genre)\n// }))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"// randomChoice = (arr) => {\n// return arr[Math.floor(Math.random() * arr.length)];\n// }","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"// one could probably use the more accurate model of color distances given in\n// https://beta.observablehq.com/@mbostock/measuring-color-difference\nfunction distanceHSL(a, b) {\n let d = 0,\n s = 0;\n let i = 0;\n s = Math.sin(Math.PI * (a[i] - b[i]));\n d += s * s;\n i = 1;\n s = a[i] - b[i];\n d += (s * s) / 2;\n i = 2;\n s = a[i] - b[i];\n d += (s * s) / 2;\n return Math.sqrt(d);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":127,"value":"dists = meta.map((a) => meta.map((b) => distanceHSL(a, b)))\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"solution = {\n model.initDataDist(dists);\n var cost = 100,\n cost0 = 0;\n while (Math.abs(cost - cost0) > 1e-6) {\n cost = cost0;\n cost0 = cost * 0.9 + 0.1 * model.step();\n // yield [cost, cost0];\n yield model.getSolution();\n }\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"dimX = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"dimY = 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"height = width * 0.66","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2e","stdlib":"1"}} 2d:"$2c:body"