30: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(); }31: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 }

` ); } }32:[{"id":"c95803afbe6d7949e2d88cf6ca1a49813e12aa9dd506415cb0d804e86e4bc1fa9409281fc47c7f883d65f9bd088bc8b184d0216408fa752e4e167247a0e19c41","href":"https://static.observableusercontent.com/files/c95803afbe6d7949e2d88cf6ca1a49813e12aa9dd506415cb0d804e86e4bc1fa9409281fc47c7f883d65f9bd088bc8b184d0216408fa752e4e167247a0e19c41","name":"history@4.csv","type":"text/csv","lastModified":1641602976249.723,"size":1632819}] 2e:{"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"},{"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"},{"id":613,"value":"viewof stack = checkbox({\n options: [{ value: true, label: \"Stack dots\" }]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":561,"value":"viewof artistHighlight = autoSelect({\n options: [...artistCounts.keys()],\n placeholder: \"Search for an artist . . .\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":584,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":663,"value":"Tooltip is from [@clhenrick](https://observablehq.com/@clhenrick/tooltip-d3-convention).","pinned":false,"hidden":false,"mode":"md"},{"id":107,"value":"viewof base = Inputs.color({ label: \"Base\", value: \"#e5e2dc\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":115,"value":"viewof sameArtist = Inputs.color({ label: \"Same artist\", value: \"#e6ab02\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":122,"value":"viewof sameTrack = Inputs.color({ label: \"Same track\", value: \"#e7298a\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":515,"value":"viewof highlightArtist = Inputs.color({\n label: \"Highlight artist\",\n value: \"#7570b3\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":473,"value":"html`\n