2f:T74a,data = await d3 .json( "https://raw.githubusercontent.com/chekos/my-recently-played-tracks/main/tracks.json" ) .then((data) => data.map((d) => { const playedAt = new Date(d.played_at); const tzdate = Temporal.Instant.from(d.played_at).toZonedDateTimeISO( "America/Los_Angeles" ); // date in localized timezone const date = new Date(tzdate.epochMilliseconds); // Javascript Date object, stores date in browser's local timezone const time = new Date( (tzdate.epochMilliseconds - 8 * 60 * 60 * 1000) % (24 * 60 * 60 * 1000) ); // "Truncate" year, month, day const hour = tzdate.hour; const minute = tzdate.minute; const dayOfMonth = tzdate.day; const day = weekdays[tzdate.dayOfWeek + -1]; const weekend = tzdate.dayOfWeek > 5 ? "Weekend" : "Weekday"; const week = tzdate.weekOfYear; const month = months[tzdate.month - 1]; const quarter = tzdate.month < 4 ? "Q1: Jan - Mar" : tzdate.month < 7 ? "Q2: Apr - Jun" : tzdate.month < 10 ? "Q3: Jul - Sep" : "Q4: Oct - Dec"; const timeOfDay = tzdate.hour < 5 ? "Late night" : tzdate.hour < 10 ? "Early morning" : tzdate.hour < 13 ? "Morning" : tzdate.hour < 17 ? "Afternoon" : tzdate.hour < 20 ? "Late afternoon" : "Evening"; const context = d.context; const track = d.track; const artistsNames = d.track.artists.map((v) => v.name); return { date, time, hour, minute, day, weekend, week, month, quarter, dayOfMonth, timeOfDay, track, playedAt, context, artistsNames }; }) )30:T759,top5Data = await d3 .json( "https://raw.githubusercontent.com/chekos/my-recently-played-tracks/main/top5ArtistsTracks.json" ) .then((data) => data.map((d) => { const playedAt = new Date(d.played_at); const tzdate = Temporal.Instant.from(d.played_at).toZonedDateTimeISO( "America/Los_Angeles" ); // date in localized timezone const date = new Date(tzdate.epochMilliseconds); // Javascript Date object, stores date in browser's local timezone const time = new Date( (tzdate.epochMilliseconds - 8 * 60 * 60 * 1000) % (24 * 60 * 60 * 1000) ); // "Truncate" year, month, day const hour = tzdate.hour; const minute = tzdate.minute; const dayOfMonth = tzdate.day; const day = weekdays[tzdate.dayOfWeek + -1]; const weekend = tzdate.dayOfWeek > 5 ? "Weekend" : "Weekday"; const week = tzdate.weekOfYear; const month = months[tzdate.month - 1]; const quarter = tzdate.month < 4 ? "Q1: Jan - Mar" : tzdate.month < 7 ? "Q2: Apr - Jun" : tzdate.month < 10 ? "Q3: Jul - Sep" : "Q4: Oct - Dec"; const timeOfDay = tzdate.hour < 5 ? "Late night" : tzdate.hour < 10 ? "Early morning" : tzdate.hour < 13 ? "Morning" : tzdate.hour < 17 ? "Afternoon" : tzdate.hour < 20 ? "Late afternoon" : "Evening"; const context = d.context; const track = d.track; const artistsNames = d.track.artists.map((v) => v.name); return { date, time, hour, minute, day, weekend, week, month, quarter, dayOfMonth, timeOfDay, track, playedAt, context, artistsNames }; }) )31:[] 2d:{"title":"Analyzing my spotify streaming history","cells":[{"id":0,"value":"# Analyzing my spotify streaming history\n\nThis is a sandbox notebook for what i'll publish on my [personal blog](https://chekos.dev/) later later","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":579,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"artistData = data.filter((d) => d.artistsNames.includes(top5Artist))","pinned":false,"hidden":false,"mode":"ojs"},{"id":82,"value":"Plot.plot({\n height: 400,\n width,\n axis: null,\n x: {\n axis: \"top\"\n },\n y: {\n axis: null,\n domain: [0, 20]\n },\n fy: {\n axis: \"right\",\n label: null,\n domain: domains.day,\n padding: 0.05\n },\n facet: {\n data: data,\n y: \"day\",\n marginRight: 140\n },\n marks: [\n Plot.areaY(\n data,\n Plot.binX(\n { y: \"count\" },\n {\n x: \"time\",\n fillOpacity: 0.2,\n thresholds: d3.timeMinute.every(15),\n curve: \"basis\"\n }\n )\n ),\n Plot.lineY(\n data,\n Plot.binX(\n { y: \"count\" },\n {\n x: \"time\",\n strokeWidth: 1,\n thresholds: d3.timeMinute.every(15),\n curve: \"basis\"\n }\n )\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":122,"value":"Plot.plot({\n width,\n y: { domain: domains.day, label: \"\" },\n x: { ticks: 3 },\n facet: { data: data, x: \"month\" },\n fx: { domain: domains.month.slice(7), label: \"\" },\n marginLeft: 100,\n marks: [\n Plot.frame(),\n Plot.tickX(data, {\n x: \"time\",\n y: \"day\",\n strokeOpacity: 0.1\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":171,"value":"Plot.plot({\n width,\n y: { domain: domains.month.slice(7), label: \"\" },\n x: { ticks: 1 },\n facet: { data: data, x: \"weekend\" },\n fx: { label: \"\" },\n marginLeft: 100,\n marks: [\n Plot.frame(),\n Plot.tickX(data, {\n x: \"time\",\n y: \"month\",\n strokeOpacity: 0.1\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":350,"value":"Plot.plot({\n width,\n padding: 0,\n marks: [\n Plot.frame(),\n Plot.tickX(\n data,\n Plot.binX(\n { strokeOpacity: \"count\" },\n {\n x: \"time\",\n thresholds: d3.timeMinute\n }\n )\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":352,"value":"Plot.plot({\n width,\n padding: 0,\n x: { label: \"\" },\n marks: [\n Plot.frame(),\n Plot.tickX(\n data,\n Plot.binX(\n { strokeOpacity: \"count\" },\n {\n x: \"playedAt\",\n thresholds: d3.timeMinute\n }\n )\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":184,"value":"Plot.plot({\n width,\n x: { ticks: 2, line: true },\n facet: { data: data, x: \"day\" },\n fx: { domain: domains.day, label: \"\", line: true },\n padding: 0,\n marks: [\n Plot.frame(),\n Plot.tickX(data, {\n x: \"time\",\n strokeOpacity: 0.1\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":101,"value":"viewof top5Artist = Inputs.select(top5, { unique: true, sort: true })","pinned":false,"hidden":false,"mode":"ojs"},{"id":204,"value":"`For ${top5Artist}`","pinned":false,"hidden":false,"mode":"md"},{"id":201,"value":"Plot.plot({\n width,\n padding: 0,\n marks: [\n Plot.frame(),\n Plot.tickX(\n artistData,\n Plot.binX(\n { strokeOpacity: \"count\" },\n {\n x: \"time\",\n thresholds: d3.timeMinute\n }\n )\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":220,"value":"Plot.plot({\n width,\n x: { ticks: 2, line: true },\n facet: { data: artistData, x: \"day\" },\n fx: { domain: domains.day, label: \"\", line: true },\n padding: 0,\n marks: [\n Plot.frame(),\n Plot.tickX(\n artistData,\n Plot.binX(\n { strokeOpacity: \"count\" },\n {\n x: \"time\",\n thresholds: d3.timeMinute\n // stroke: \"timeOfDay\"\n }\n )\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":362,"value":"Plot.plot({\n width,\n padding: 0,\n marks: [\n Plot.frame(),\n Plot.tickX(\n artistData,\n Plot.binX(\n { strokeOpacity: \"count\" },\n {\n x: \"playedAt\",\n thresholds: d3.timeMinute\n }\n )\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":256,"value":"Plot.plot({\n width,\n x: { label: \"\" },\n // r: { range: [1, 10] },\n marks: [\n Plot.dot(\n artistData,\n Plot.binX(\n { r: \"count\" },\n {\n x: \"time\",\n thresholds: d3.timeMinute.every(5),\n stroke: \"purple\",\n strokeOpacity: 0.3\n }\n )\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":272,"value":"Plot.plot({\n width,\n x: { ticks: 2 },\n facet: { data: artistData, x: \"day\" },\n fx: { domain: domains.day, label: \"\" },\n padding: 0,\n marks: [\n Plot.dot(\n artistData,\n Plot.binX(\n { r: \"count\" },\n {\n x: \"time\",\n thresholds: d3.timeMinute.every(30),\n stroke: \"purple\",\n strokeOpacity: 0.3\n // stroke: \"timeOfDay\"\n }\n )\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":240,"value":"Plot.plot({\n width,\n x: { label: \"\" },\n marks: [\n Plot.dot(\n artistData,\n Plot.binX(\n { r: \"count\" },\n {\n x: \"playedAt\",\n thresholds: d3.timeHour,\n stroke: \"purple\",\n strokeOpacity: 0.3\n }\n )\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":288,"value":"Plot.plot({\n width,\n x: { label: \"\" },\n marks: [\n Plot.dot(\n artistData,\n Plot.bin(\n { r: \"count\" },\n {\n x: \"playedAt\",\n y: \"time\",\n thresholds: d3.timeMinute.every(15),\n stroke: \"purple\",\n strokeOpacity: 0.5\n }\n )\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":298,"value":"Plot.plot({\n facet: { data: artistData, y: \"timeOfDay\", marginLeft: 100 },\n fy: { domain: domains.timeOfDay, label: \"\" },\n x: { label: \"\" },\n marks: [\n Plot.dot(\n artistData,\n Plot.binX(\n { r: \"count\" },\n {\n x: \"playedAt\",\n thresholds: d3.timeHour,\n strokeOpacity: 0.4,\n stroke: \"purple\"\n }\n )\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":307,"value":"Plot.plot({\n width,\n x: { label: \"\", ticks: 3 },\n facet: { data: artistData, x: \"month\" },\n fx: { label: \"\", domain: domains.month.slice(7) },\n padding: 0,\n marks: [\n Plot.dot(\n artistData,\n Plot.binY(\n { r: \"count\" },\n {\n y: \"time\",\n x: \"dayOfMonth\",\n thresholds: d3.timeMinute.every(30),\n stroke: \"purple\",\n strokeOpacity: 0.5\n }\n )\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":339,"value":"Plot.plot({\n width,\n y: { domain: domains.day, label: \"\" },\n x: { ticks: 2, round: true },\n facet: { data: data, x: \"month\" },\n fx: { domain: domains.month.slice(7), label: \"\" },\n marginLeft: 100,\n marks: [\n Plot.frame(),\n Plot.dotX(\n data,\n Plot.binX(\n { r: \"count\" },\n {\n x: \"time\",\n y: \"day\",\n strokeOpacity: 0.4,\n thresholds: d3.timeMinute.every(20)\n }\n )\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":374,"value":"Plot.plot({\n width,\n x: { label: \"\", inset: 20 },\n y: { ticks: false },\n marginLeft: 120,\n marks: [\n Plot.dot(\n artistData.filter((d) => d.track.album.album_type == \"album\"),\n Plot.binX(\n { r: \"count\" },\n {\n x: \"time\",\n y: (d) => d.track.album.name,\n thresholds: d3.timeMinute.every(10),\n stroke: \"purple\",\n strokeOpacity: 0.5,\n sort: { y: \"r\", reverse: true, limit: 10 }\n }\n )\n ),\n Plot.image(artistData, {\n x: 1,\n y: (d) => d.track.album.name,\n src: (d) => d.track.album.images[0].url,\n dx: -20\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":387,"value":"Plot.plot({\n width,\n x: { label: \"\", ticks: 3, inset: 20 },\n marginLeft: 125,\n marks: [\n Plot.dot(\n artistData,\n Plot.binX(\n { r: \"count\" },\n {\n x: \"time\",\n y: (d) => d.track.name,\n thresholds: d3.timeMinute.every(10),\n stroke: \"purple\",\n strokeOpacity: 0.5,\n sort: { y: \"r\", reverse: true, limit: 10 }\n }\n )\n ),\n Plot.image(artistData, {\n x: 1,\n y: (d) => d.track.name,\n src: (d) => d.track.album.images[0].url,\n dx: -20\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":398,"value":"Plot.plot({\n width,\n x: { label: \"\", ticks: 3, inset: 20 },\n marginLeft: 125,\n marks: [\n Plot.dot(\n artistData,\n Plot.binX(\n { r: \"count\" },\n {\n x: \"playedAt\",\n y: (d) => d.track.album.name,\n thresholds: d3.timeDay,\n stroke: \"purple\",\n strokeOpacity: 0.5,\n sort: { y: \"r\", reverse: true, limit: 10 }\n }\n )\n ),\n Plot.ruleX(monthRules, { strokeOpacity: 0.4 }),\n Plot.image(artistData, {\n x: d3.min(artistData.map((d) => d.date)),\n y: (d) => d.track.album.name,\n src: (d) => d.track.album.images[0].url,\n dx: -20\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":393,"value":"Plot.plot({\n width,\n x: { label: \"\", ticks: 3, inset: 20 },\n marginLeft: 125,\n marks: [\n Plot.dot(\n artistData,\n Plot.binX(\n { r: \"count\" },\n {\n x: \"playedAt\",\n y: (d) => d.track.name,\n z: (d) => d.track.album.name,\n thresholds: d3.timeDay,\n stroke: \"purple\",\n strokeOpacity: 0.5,\n sort: { y: \"r\", reverse: true, limit: 10 }\n }\n )\n ),\n Plot.ruleX(monthRules, {\n strokeOpacity: 0.4\n }),\n Plot.image(artistData, {\n x: d3.min(artistData.map((d) => d.date)),\n y: (d) => d.track.name,\n src: (d) => d.track.album.images[0].url,\n dx: -20\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":584,"value":"***\n### top 5","pinned":false,"hidden":false,"mode":"md"},{"id":586,"value":"Plot.plot({\n width,\n marginLeft: 100,\n y: { domain: top5 },\n padding: 0,\n marks: [\n Plot.frame(),\n Plot.tickX(\n top5Data,\n Plot.binX(\n { strokeOpacity: \"count\" },\n {\n x: \"time\",\n y: (d) => d.track.artists[0].name,\n thresholds: d3.timeMinute\n }\n )\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":616,"value":"Plot.plot({\n width,\n x: { ticks: 2, line: true },\n facet: { data: top5Data, x: \"day\" },\n fx: { domain: domains.day, label: \"\", line: true },\n y: { domain: top5 },\n marginLeft: 100,\n padding: 0,\n marks: [\n Plot.frame(),\n Plot.tickX(\n top5Data,\n Plot.binX(\n { strokeOpacity: \"count\" },\n {\n x: \"time\",\n y: (d) => d.track.artists[0].name,\n thresholds: d3.timeMinute\n // stroke: \"timeOfDay\"\n }\n )\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":621,"value":"Plot.plot({\n width,\n padding: 0,\n y: { domain: top5 },\n marginLeft: 100,\n marks: [\n Plot.frame(),\n Plot.tickX(\n top5Data,\n Plot.binX(\n { strokeOpacity: \"count\" },\n {\n x: \"playedAt\",\n y: (d) => d.track.artists[0].name,\n thresholds: d3.timeMinute\n }\n )\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":624,"value":"Plot.plot({\n width,\n y: { domain: domains.day, label: \"\" },\n x: { ticks: 3, round: true },\n facet: {\n data: top5Data,\n x: \"month\",\n y: (d) => d.track.artists[0].name,\n marginRight: 100,\n marginLeft: 100\n },\n fy: { domain: top5, marginRight: 100 },\n fx: { domain: domains.month.slice(7), label: \"\" },\n marks: [\n Plot.frame(),\n Plot.dotX(\n top5Data,\n Plot.binX(\n { r: \"count\" },\n {\n x: \"time\",\n y: \"day\",\n strokeOpacity: 0.4,\n thresholds: d3.timeMinute.every(20)\n }\n )\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":639,"value":"allSongsChart = Plot.plot({\n width,\n x: { label: \"\", ticks: 3, inset: 20, axis: \"top\" },\n marginLeft: 175,\n marks: [\n Plot.dot(\n top5Data,\n Plot.binX(\n { r: \"count\" },\n {\n x: \"playedAt\",\n y: (d) => d.track.name,\n thresholds: d3.timeDay,\n stroke: \"purple\",\n strokeOpacity: 0.5,\n sort: { y: \"r\", reverse: true, limit: 50 }\n }\n )\n ),\n Plot.ruleX(monthRules, {\n strokeOpacity: 0.4\n }),\n Plot.image(top5Data, {\n x: d3.min(top5Data.map((d) => d.date)),\n y: (d) => d.track.name,\n src: (d) => d.track.album.images[0].url,\n dx: -20\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":658,"value":"Plot.plot({\n width,\n x: { label: \"\", ticks: 3 },\n y: { ticks: 6 },\n facet: {\n data: top5Data,\n x: \"month\",\n y: (d) => d.track.artists[0].name,\n marginRight: 100,\n marginLeft: 100\n },\n fy: { domain: top5 },\n fx: { label: \"\", domain: domains.month.slice(7) },\n padding: 0.1,\n marks: [\n Plot.frame(),\n Plot.dot(\n top5Data,\n Plot.binY(\n { r: \"count\" },\n {\n y: \"time\",\n x: \"dayOfMonth\",\n thresholds: d3.timeMinute.every(30),\n // stroke: \"purple\",\n strokeOpacity: 0.5\n }\n )\n )\n // Plot.ruleX([15, 30])\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":683,"value":"Plot.plot({\n width,\n x: { label: \"\" },\n y: { ticks: 7 },\n facet: {\n data: top5Data,\n y: (d) => d.track.artists[0].name,\n marginLeft: 100,\n marginRight: 100\n },\n fy: { domain: top5 },\n marks: [\n Plot.frame(),\n Plot.dot(\n top5Data,\n Plot.bin(\n { r: \"count\" },\n {\n x: \"playedAt\",\n y: \"time\",\n thresholds: d3.timeMinute.every(15),\n // stroke: \"purple\",\n strokeOpacity: 0.5\n }\n )\n ),\n Plot.ruleX(monthRules, { strokeOpacity: 0.3 })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":73,"value":"***\n## Previous charts","pinned":false,"hidden":false,"mode":"md"},{"id":37,"value":"Plot.plot({\n marks: [\n Plot.tickX(data, {\n x: \"playedAt\",\n strokeOpacity: 0.1\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"Plot.plot({\n marks: [\n Plot.tickX(data, {\n x: \"time\",\n strokeOpacity: 0.1\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":40,"value":"Plot.plot({\n marginLeft: 100,\n y: { label: \"\", domain: weekdays, line: true },\n x: { label: \"\", line: true, ticks: false },\n color: { scheme: \"purples\" },\n marks: [\n Plot.cell(data, Plot.group({ fill: \"count\" }, { x: \"hour\", y: \"day\" })),\n Plot.text(data, Plot.group({ text: \"count\" }, { x: \"hour\", y: \"day\" }))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"Plot.plot({\n facet: { data: data, y: \"month\", marginLeft: 100, marginRight: 100 },\n fy: { label: \"\", domain: months.slice(7) },\n marginLeft: 100,\n y: { label: \"\", domain: weekdays },\n x: { label: \"\" },\n color: { scheme: \"purples\" },\n marks: [\n Plot.frame(),\n Plot.cell(data, Plot.group({ fill: \"count\" }, { x: \"hour\", y: \"day\" })),\n Plot.text(data, Plot.group({ text: \"count\" }, { x: \"hour\", y: \"day\" }))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"Plot.plot({\n y: { label: \"\", domain: months.slice(7), line: true },\n x: { label: \"Day of Month\", line: true },\n marginLeft: 80,\n color: { scheme: \"purples\" },\n marks: [\n Plot.cell(\n data,\n Plot.group({ fill: \"count\" }, { x: \"dayOfMonth\", y: \"month\" })\n ),\n Plot.text(\n data,\n Plot.group({ text: \"count\" }, { x: \"dayOfMonth\", y: \"month\" })\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":46,"value":"Plot.plot({\n facet: { data: data, y: \"day\", marginLeft: 80 },\n fy: { label: \"\", line: true, domain: domains.day },\n x: { label: \"Time of Day\", line: true, domain: domains.timeOfDay },\n marginLeft: 80,\n color: { scheme: \"purples\" },\n padding: 0.05,\n marks: [\n Plot.cell(data, Plot.groupX({ fill: \"proportion\" }, { x: \"timeOfDay\" })),\n Plot.text(\n data,\n Plot.groupX({ text: \"proportion-facet\" }, { x: \"timeOfDay\" })\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":48,"value":"Plot.plot({\n facet: { data: data, y: \"timeOfDay\", marginLeft: 100 },\n fy: { domain: domains.timeOfDay, label: \"\" },\n marks: [\n Plot.dot(\n data,\n Plot.binX(\n { r: \"count\" },\n {\n x: \"playedAt\",\n thresholds: d3.timeHour,\n strokeOpacity: 0.4,\n stroke: \"timeOfDay\"\n }\n )\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":50,"value":"Plot.tickX(data, { x: \"playedAt\", strokeOpacity: 0.1 }).plot({\n facet: {\n data: data,\n x: \"hour\",\n y: \"day\",\n marginLeft: 100\n },\n fy: {\n //domain: domains.month.slice(7),\n domain: domains.day,\n label: \"\"\n },\n width,\n fx: { label: \"\" },\n marks: [\n Plot.frame(),\n Plot.rect(\n data,\n Plot.groupZ({ fill: \"count\" }, { fill: \"playedAt\", fillOpacity: 0.6 })\n )\n ],\n color: {\n scheme: \"purples\"\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"## Per Artist","pinned":false,"hidden":false,"mode":"md"},{"id":28,"value":"filtered_data = data.filter((d) => d.artistsNames.includes(selected_artist))","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"viewof selected_artist = Inputs.select(top5, { unique: true, sort: true })","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"Plot.plot({\n x: { domain: domains.hour },\n color: { scheme: \"purples\" },\n padding: 0,\n marks: [\n Plot.frame(),\n Plot.cell(\n filtered_data,\n Plot.groupX({ fill: \"count\" }, { x: \"hour\", stroke: \"black\" })\n ),\n Plot.text(filtered_data, Plot.groupX({ text: \"count\" }, { x: \"hour\" }))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"Plot.plot({\n marks: [\n Plot.dot(\n filtered_data,\n Plot.binX(\n { r: \"count\" },\n {\n x: \"playedAt\",\n thresholds: d3.timeHour,\n stroke: \"purple\",\n strokeOpacity: 0.3\n }\n )\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"Plot.plot({\n x: { domain: domains.day, label: \"\" },\n color: { scheme: \"purples\" },\n padding: 0.05,\n marks: [\n Plot.cell(\n filtered_data,\n Plot.groupX(\n { fill: \"count\" },\n {\n x: \"day\"\n }\n )\n ),\n Plot.text(\n filtered_data,\n Plot.groupX(\n { text: \"proportion\" },\n {\n x: \"day\"\n }\n )\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":66,"value":"Plot.tickX(filtered_data, { x: \"playedAt\", strokeOpacity: 0.3 }).plot({\n facet: {\n data: filtered_data,\n x: \"hour\",\n y: \"day\",\n marginLeft: 80\n },\n fy: {\n domain: domains.day,\n label: \"\"\n },\n width,\n fx: { label: \"\" },\n marks: [\n Plot.frame(),\n Plot.rect(\n filtered_data,\n Plot.groupZ(\n { fill: \"count\" },\n { fill: \"playedAt\", fillOpacity: 0.6, thresholds: d3.timeHour }\n )\n )\n ],\n color: {\n scheme: \"purples\"\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":68,"value":"Plot.plot({\n facet: { data: filtered_data, y: \"timeOfDay\", marginLeft: 100 },\n fy: { domain: domains.timeOfDay, label: \"\" },\n marks: [\n Plot.dot(\n filtered_data,\n Plot.binX(\n { r: \"count\" },\n {\n x: \"playedAt\",\n thresholds: d3.timeHour,\n strokeOpacity: 0.4,\n stroke: \"timeOfDay\"\n }\n )\n )\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":12,"value":"weekdays = [\n \"Monday\",\n \"Tuesday\",\n \"Wednesday\",\n \"Thursday\",\n \"Friday\",\n \"Saturday\",\n \"Sunday\"\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":14,"value":"months = [\"January\", \"February\", \"March\", \"April\", \"May\", \"June\", \"July\", \"August\", \"September\", \"October\", \"November\", \"December\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":15,"value":"timeOfDay = [\n \"Late night\",\n \"Early morning\",\n \"Morning\",\n \"Afternoon\",\n \"Late afternoon\",\n \"Evening\"\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":17,"value":"hours = [...Array(24).keys()]","pinned":true,"hidden":false,"mode":"ojs"},{"id":19,"value":"// Load the Temporal API using a Polyfill\nTemporal = {\n const TemporalLib = await require(\"@js-temporal/polyfill@0.3.0\");\n return TemporalLib.Temporal;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":21,"value":"domains = ({\n month: months,\n day: weekdays,\n timeOfDay: timeOfDay,\n hour: hours\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"artists = data.flatMap((d) => d.artistsNames)","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"top5 = [\"La Plebada\", \"La Banda Baston\", \"Fntxy\", \"Yoga Fire\", \"Aleman\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":540,"value":"monthRules = d3.timeWeek\n .range(\n d3.min(artistData.map((d) => d.date)),\n d3.max(artistData.map((d) => d.date))\n )\n .map((d) => new Date(d.setUTCHours(0)))","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}