2b:null 2c:["$","title",null,{"children":"2021 in music | Sahil Chinoy | Observable"}] 31:T9e0,{ const container = d3.select( html`

` ); const tooltipDiv = container.select(".tooltip"); const svg = container .append("svg") .attr("width", width) .attr("height", height); svg .append("g") .attr("transform", `translate(${margin.left}, 0)`) .call( d3 .axisLeft(y) .ticks(d3.timeMonth.every(1)) .tickFormat(d3.timeFormat("%b")) ) .call((g) => g.select(".domain").remove()) .call((g) => g.selectAll(".tick line").remove()) .call((g) => g .selectAll("text") .style("text-transform", "uppercase") .style("font-weight", 600) .style("font-size", "9px") .style("fill", "#666") ); if (!stack) { const xAxis = d3.axisTop(x); xAxis .tickValues(d3.range(0, 24 * 60 + 1, width < 600 ? 180 : 60)) .tickFormat((d, i) => { if ((d == 0) | (d == 1440)) return "12 AM"; else if (d == 720) return "12 PM"; else return (d / 60) % 12; }); svg .append("g") .attr("transform", `translate(0, ${margin.top - 20})`) .call(xAxis) .call((g) => g.select(".domain").remove()) .call((g) => g.selectAll(".tick line").remove()) .call((g) => g .selectAll("text") .style("text-transform", "uppercase") .style("font-weight", 600) .style("font-size", "9px") .style("fill", "#666") ); } const dots = svg .append("g") .selectAll("g") .data(chartData) .enter() .append("g") .selectAll("circle") .data((d) => d.value) .enter() .append("circle") .attr("cx", (d, i) => (stack ? x(i) : x(d.minutes))) .attr("cy", (d) => y(d.date)) .attr("r", radius) .call(tooltip, tooltipDiv); dots .filter((d) => d.artist == artistHighlight) .classed("highlight-artist", true) .raise(); dots.on("mouseover", function (d) { const thisTrack = d3.select(this).datum(); dots .filter((o) => o.artist == thisTrack.artist) .classed("same-artist", true) .raise() .filter((o) => o.track == thisTrack.track) .classed("same-track", true) .raise(); }); dots.on("mouseout", function (d) { dots .classed("same-track", false) .classed("same-artist", false) .classed("highlight-artist", (d) => d.artist == artistHighlight); }); return container.node(); }32:T81a,// from https://observablehq.com/@clhenrick/tooltip-d3-convention tooltip = (selectionGroup, tooltipDiv) => { // padding between the tooltip and mouse cursor const MOUSE_POS_OFFSET = 8; selectionGroup.each(function () { d3.select(this) .on("mouseover.tooltip", handleMouseover) .on("mousemove.tooltip", handleMousemove) .on("mouseleave.tooltip", handleMouseleave); }); function handleMouseover() { // show/reveal the tooltip, set its contents, // style the element being hovered on showTooltip(); setContents(d3.select(this).datum()); } function handleMousemove(event) { // update the tooltip's position const [mouseX, mouseY] = d3.pointer(event, this); setPosition(mouseX, mouseY); } function handleMouseleave() { hideTooltip(); } function showTooltip() { tooltipDiv.style("display", "block"); } function hideTooltip() { tooltipDiv.style("display", "none"); } function setPosition(mouseX, mouseY) { tooltipDiv .style( "top", mouseY < height / 2 ? `${mouseY + MOUSE_POS_OFFSET}px` : "initial" ) .style( "right", mouseX > width / 2 ? `${width - mouseX + MOUSE_POS_OFFSET}px` : "initial" ) .style( "bottom", mouseY > height / 2 ? `${height - mouseY + MOUSE_POS_OFFSET}px` : "initial" ) .style( "left", mouseX < width / 2 ? `${mouseX + MOUSE_POS_OFFSET}px` : "initial" ) .style("text-align", mouseX < width / 2 ? "left" : "right"); } function setContents(datum) { // customize this function to set the tooltip's contents however you see fit tooltipDiv .select(".tooltip-contents") .html( `

${ datum.track } – ${ datum.artist }

${ d3.timeFormat("%b %d ")(datum.date) + datum.time }

` ); } }33:[{"id":"c95803afbe6d7949e2d88cf6ca1a49813e12aa9dd506415cb0d804e86e4bc1fa9409281fc47c7f883d65f9bd088bc8b184d0216408fa752e4e167247a0e19c41","href":"https://static.observableusercontent.com/files/c95803afbe6d7949e2d88cf6ca1a49813e12aa9dd506415cb0d804e86e4bc1fa9409281fc47c7f883d65f9bd088bc8b184d0216408fa752e4e167247a0e19c41","name":"history@4.csv","type":"text/csv","lastModified":1641602976249.723,"size":1632819}] 2f:{"id":"dd13f5f50c031290","slug":"2021-in-music","title":"2021 in music","thumbnail":"d799eb2dd97df203c44e41904a854593722ee4119f94ddfc3086f116cf5571b7","access_level":"public","create_time":"$D2022-01-07T22:51:25.564Z","update_time":"$D2022-01-08T17:52:06.575Z","view_time":null,"first_public_time":"$D2022-01-08T17:45:56.429Z","fork":false,"stars":16,"starred":false,"owner":{"type":"team","id":"fa42d4b5bae30469","login":"sahilchinoy","name":"Sahil Chinoy","avatar_url":"https://avatars-next.observableusercontent.com/97370b11dad642a58468652ed8f11e5301d85511b2aeb670e2ae3e20346378f3","tier":"starter_2024"},"version":676,"publish_version":676,"role":null,"authored":false,"authors":[{"type":"individual","id":"31dca4840d5abd61","login":"sahilchinoy","name":"Sahil Chinoy","avatar_url":"https://avatars-next.observableusercontent.com/97370b11dad642a58468652ed8f11e5301d85511b2aeb670e2ae3e20346378f3","tier":null}],"members":[{"type":"individual","id":"31dca4840d5abd61","login":"sahilchinoy","name":"Sahil Chinoy","avatar_url":"https://avatars-next.observableusercontent.com/97370b11dad642a58468652ed8f11e5301d85511b2aeb670e2ae3e20346378f3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":10,"collection":null,"type":"notebook","body":{"title":"2021 in music","cells":[{"id":0,"value":"# 2021 in music\n\nThis works way better on a big screen (sorry). Request your data from Spotify [here](https://support.spotify.com/us/article/data-rights-and-privacy-settings/).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":168,"value":"html`Each dot is one play. Mouse over to highlight the same track and the same artist. Times are in EST.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":613,"value":"viewof stack = checkbox({\n options: [{ value: true, label: \"Stack dots\" }]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":561,"value":"viewof artistHighlight = autoSelect({\n options: [...artistCounts.keys()],\n placeholder: \"Search for an artist . . .\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":584,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":663,"value":"Tooltip is from [@clhenrick](https://observablehq.com/@clhenrick/tooltip-d3-convention).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":107,"value":"viewof base = Inputs.color({ label: \"Base\", value: \"#e5e2dc\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":115,"value":"viewof sameArtist = Inputs.color({ label: \"Same artist\", value: \"#e6ab02\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":122,"value":"viewof sameTrack = Inputs.color({ label: \"Same track\", value: \"#e7298a\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":515,"value":"viewof highlightArtist = Inputs.color({\n label: \"Highlight artist\",\n value: \"#7570b3\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":395,"value":"artistCounts = {\n return new Map(\n d3\n .flatRollup(\n data,\n (v) => v.length,\n (d) => d.artist\n )\n .sort((a, b) => b[1] - a[1])\n .map((d, i) => [d[0], [d[1], i + 1]])\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":399,"value":"trackCounts = {\n return new Map(\n d3\n .flatRollup(\n data,\n (v) => v.length,\n (d) => d.track + d.artist\n )\n .sort((a, b) => b[1] - a[1])\n .map((d, i) => [d[0], [d[1], i + 1]])\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":473,"value":"html`\n