Public
Edited
Apr 6
2 forks
2 stars
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
notebooksHtml = htl.html`<div>
<style>
.notebooksList {
font-size: .8rem;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(25%, 1fr))
}
.notebookItem {
display: flex;
width: 95%;
height: 50%;
margin: 0px 5px 10px 0px;
}
.notebookItem > * {
padding: 0px 5px 5px 0px;
}
.notebookName {
font-weight: bold;
max-height: 5em;
overflow: scroll;
}
.notebookItem > a {
width: 30%;
}
.notebookItem img {
width: 100%;
border-radius: 15%;
box-shadow: 2px 2px 5px 0px #eee;
}
</style>
<div>Showing ${filteredNotebooks2.length} out of ${notebooks.length} notebooks</div>
<div class="notebooksList">
${filteredNotebooks2
.map(
(n) =>
htl.html`<div class="notebookItem">
<a href=${n["Link-href"]}><img src="${n["Thumb-src"]}" alt="${n.Name} notebook thumbnail"></img></a>
<div>
<div class="notebookName"><a href=${n["Link-href"]}>${
n.Name
}</a></div>
<div>${observableHeart()} ${n.Likes}</div>
<div>${fmt(n.parsedTimestamp)}</div>
</div>
</div>`
)}
</div>
</div>`
Insert cell
navio(notebooks)
Insert cell
filteredNotebooks1 = notebooks.filter((d) => visibility.includes(d.Visibility))
Insert cell
filteredNotebooks2 = filteredNotebooks1.filter((d) => d.Likes >= minLikes)
Insert cell
Plot.plot({
height: 380,
width,
marks: [
Plot.dot(notebooks, Plot.dodgeY({x: "parsedTimestamp", r: "Likes"}))
]
})
Insert cell
Pack(notebooks, {
// path: (d) => d.name.replaceAll(".", "/"), // e.g. flare/animate/Easing
path: d => `/${d.Name}` ,
label: (d) => `${d.Name} ${d.Likes}`, // display text
value: (d) => d?.Likes, // area of each circle
width,
height: 720
})
Insert cell
fmt = d3.timeFormat("%b %d %Y")
Insert cell
new Set(notebooks.filter(d => d.Likes_Comment).map(d => typeof d.Likes_Comment))
Insert cell
notebooks.filter(d => typeof d.Likes_Comment === "string")[0].Likes_Comment
Insert cell
notebooks = FileAttachment("Observable_Notebooks_feb_2025@2.csv")
.csv({
typed: true
})
.then((notebooks) => {
return notebooks
.map((d) => {
d.Comments = 0;
if (d.Likes_Comment === null) {
d.Likes = 0;
} else if (typeof d.Likes_Comment === "number") {
d.Likes = d.Likes_Comment; // TODO if a notebook only has comments, this is probably a mistake
} else {
const [l, c] = d.Likes_Comment.split(" ");
d.Likes = +l;
d.Comments = +c;
}
d.Likes = d.Likes_Comment === null ? 0 :
typeof d.Likes_Comment === "number" ? d.Likes_Comment : +d.Likes || 0;
d.parsedTimestamp = new Date(d.timestamp);
return d;
})
.sort((a, b) => d3.descending(a.Likes, b.Likes));
})
Insert cell
observableHeart = () => htl.html`<svg width="16" height="16" viewBox="0 0 16 16" fill="none" class="v-top ml2 moon-gray" style="width: 14px; height: 14px; margin-right: -1px;"><path d="M12.6514 4.65742C12.3827 4.38555 12.0636 4.16989 11.7124 4.02277C11.3612 3.87565 10.9848 3.79995 10.6047 3.79999C9.83662 3.79999 9.10061 4.24307 8.558 4.79183L7.99981 5.35727L7.44162 4.79183C6.31148 3.64889 4.47834 3.51449 3.34821 4.65742C3.0793 4.92926 2.86598 5.25202 2.72045 5.60726C2.57491 5.9625 2.5 6.34326 2.5 6.72778C2.5 7.1123 2.57491 7.49306 2.72045 7.84829C2.86598 8.20353 3.0793 8.52629 3.34821 8.79813L3.9064 9.36172L7.99981 13.8L12.0932 9.36172L12.6514 8.79813C12.9204 8.52635 13.1338 8.20361 13.2794 7.84837C13.4251 7.49312 13.5 7.11234 13.5 6.72778C13.5 6.34322 13.4251 5.96243 13.2794 5.60719C13.1338 5.25194 12.9204 4.9292 12.6514 4.65742Z" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"></path></svg>`
Insert cell
import {beeswarmX} from "@john-guerra/experimental-plot-beeswarm"
Insert cell
import {Pack} from "@d3/pack-component"
Insert cell
import {scentedCheckbox} from "@john-guerra/scented-checkbox"
Insert cell
import {navio} from "@john-guerra/navio"
Insert cell
import {multiAutoSelect} from "@john-guerra/multi-auto-select"
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more