2b:null 2c:["$","title",null,{"children":"My Observable Notebooks | Kasi Viswanath | Observable"}] 31:T815,beeswarmPlotNotebooks = { let target = this || Plot.plot({ height: 320, tooltip: true, width, title: htl.html`

${ notebooks.length } Observable notebooks for a total ${d3.sum( notebooks, (d) => d.Likes )} ${observableHeart()}s

`, color: { type: "sequential", scheme: "BuRd" }, r: { range: [0, width / 30] }, x: { nice: true }, marks: [ beeswarmX(notebooks, { x: (d) => d.parsedTimestamp, r: (d, i) => d.Likes + 1, fill: (d) => d.parsedTimestamp, yStrength: 0.3, gap: 0.5, ticks: 2, dynamic: true, title: (d) => d.Name }) ] }); let prevNotebooks = this?.prevNotebooks || new Set(); let colorMap = this?.colorMap || new Map(); function swapColor(items) { for (let item of items) { item = notebooks.length - item - 1; let circle = target.querySelector(`circle[id='${item}']`); let currColor = d3.select(circle)?.attr("fill"); let swapColor = "grey"; if (currColor === "grey") { swapColor = colorMap.get(item); } d3.select(circle).attr("fill", swapColor); } } function filterNotebooks() { let filteredNotebooks = notebooks .filter((d) => d.Likes < minLikes) .map((d, i) => i); swapColor(filteredNotebooks.filter((x) => !prevNotebooks.has(x))); swapColor([...prevNotebooks].filter((x) => !filteredNotebooks.includes(x))); prevNotebooks = new Set(filteredNotebooks); target.prevNotebooks = prevNotebooks; } function storeColor() { if (colorMap.size === 0) { for (let notebookId of notebooks.map((_, i) => i)) { let circle = target.querySelector(`circle[id='${notebookId}']`); colorMap.set(notebookId, d3.select(circle)?.attr("fill")); } } } storeColor(); filterNotebooks(); target.prevNotebooks = prevNotebooks; target.colorMap = colorMap; return target; }32:T6fe,// Rather than updating the notebooks based on the directly filter event, we can check what notebooks to be added and what notebooks to be deleted and update only those elements displayNotebooks = { let notebookContainer = this?.notebookContainer || htl.html`

`; let target = this || htl.html`

${minLikes}

${notebookContainer}

`; console.log({ prev: this?.prevNotebooks }); let prevNotebooks = this?.prevNotebooks || new Set(); function addNotebooks(items) { for (let item of items) { let n = notebooks[item]; let notebookDiv = htl.html`

${ n.Name }

${observableHeart()} ${n.Likes}

${fmt(n.parsedTimestamp)}

`; notebookContainer.appendChild(notebookDiv); } console.log("Add Notebooks", items); } function removeNotebooks(items) { for (let item of items) { notebookContainer.querySelector(`div[id='${item}']`).remove(); } console.log("remove Notebooks", items); } function filterNotebooks() { let filteredNotebooks = notebooks .filter((d) => d.Likes >= minLikes) .map((d, i) => i); addNotebooks(filteredNotebooks.filter((x) => !prevNotebooks.has(x))); removeNotebooks( [...prevNotebooks].filter((x) => !filteredNotebooks.includes(x)) ); prevNotebooks = new Set(filteredNotebooks); target.prevNotebooks = prevNotebooks; } filterNotebooks(); target.notebookContainer = notebookContainer; return target; }33:[{"id":"c7d862db2d6cf93da30abdb2c07bbe2b70d7d721e9c4315cc7d744c13baccdf1aad53c7440d2ad8899324449297db17251a3bea3cc102ace9cd4a32e61b56411","href":"https://static.observableusercontent.com/files/c7d862db2d6cf93da30abdb2c07bbe2b70d7d721e9c4315cc7d744c13baccdf1aad53c7440d2ad8899324449297db17251a3bea3cc102ace9cd4a32e61b56411","name":"John_Guerra_Observable_Notebooks_Sept_2023.csv","type":"text/csv","lastModified":1696102452024.171,"size":134565}] 2f:{"id":"7fac6d221a2c6b92","slug":null,"title":"My Observable Notebooks","thumbnail":"0e26b9f9bac1d7efd9220a85032c6e98f6706be644baf8079833128104715f28","access_level":"public","create_time":"$D2023-09-30T19:34:12.024Z","update_time":"$D2023-10-02T21:12:08.576Z","view_time":null,"first_public_time":"$D2023-09-30T19:34:12.024Z","has_unpublished_edits":null,"fork":{"id":"9100bf61cda8a54f","slug":"my-observable-notebooks","title":"My Observable Notebooks","owner":{"id":"cd3c1e49fc84d010","login":"john-guerra","name":"John Alexis Guerra Gómez"}},"stars":0,"starred":false,"owner":{"type":"team","id":"b760ea566a896d7d","login":"kasivisu4","name":"Kasi Viswanath","avatar_url":"https://avatars-next.observableusercontent.com/48e36723913e7e5b18b906e1d7cde12fad4146715e78bbf74d3db7969a248b56","tier":"starter_2024"},"version":469,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"fcd94e1c1ca12ae9","login":"kasivisu4","name":"Kasi Viswanath","avatar_url":"https://avatars-next.observableusercontent.com/48e36723913e7e5b18b906e1d7cde12fad4146715e78bbf74d3db7969a248b56","tier":null}],"members":[{"type":"individual","id":"fcd94e1c1ca12ae9","login":"kasivisu4","name":"Kasi Viswanath","avatar_url":"https://avatars-next.observableusercontent.com/48e36723913e7e5b18b906e1d7cde12fad4146715e78bbf74d3db7969a248b56","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"My Observable Notebooks","cells":[{"id":0,"value":"# My Observable Notebooks\n\n[Base version](https://observablehq.com/d/7fac6d221a2c6b92@321#displayNotebooks)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":111,"value":"viewof minLikes = Inputs.range([0, d3.max(notebooks, d => d.Likes)] ,{label: \"Min Likes\", step: 1, value: 10})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":269,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":298,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":234,"value":"filteredNotebooks = notebooks.filter((d) => d.Likes >= minLikes)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"Plot.plot({\n height: 380,\n width,\n marks: [\n Plot.dot(notebooks, Plot.dodgeY({x: \"parsedTimestamp\", r: \"Likes\"}))\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"Pack(notebooks, {\n // path: (d) => d.name.replaceAll(\".\", \"/\"), // e.g. flare/animate/Easing\n path: d => `/${d.Name}` ,\n label: (d) => `${d.Name} ${d.Likes}`, // display text\n value: (d) => d?.Likes, // area of each circle\n width,\n height: 720\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"fmt = d3.timeFormat(\"%b %d %Y\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"notebooks = FileAttachment(\"John_Guerra_Observable_Notebooks_Sept_2023.csv\")\n .csv({\n typed: true\n })\n .then((notebooks) => {\n return notebooks\n .map((d) => {\n d.Likes = d.Likes || 0;\n d.parsedTimestamp = new Date(d.timestamp);\n return d;\n })\n .sort((a, b) => d3.descending(a.Likes, b.Likes));\n })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"observableHeart = () => htl.html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":192,"value":"import { beeswarmX } from \"9986bd7d96d72b48\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"import {Pack} from \"@d3/pack-component\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"