28:null 29:["$","title",null,{"children":"Font Cataloger | dduyg | Observable"}] 2e:Te45,# Font *Cataloger* 2f:T179d,gallery = { const width = 600; const height = 400; const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style( "background", "linear-gradient(90deg, #8EC5FF 0%, #B7C6DB 25%, #C8C4B8 50%, #D6C26F 75%, #D9C300 100%)" ) .style("border", "1px solid black") .style("border-radius", "15px"); const zoomLayer = svg.append("g"); const ui = svg.append("g"); // ========================= // ZOOM (single source of truth) // ========================= const zoom = d3 .zoom() .scaleExtent([0.4, 5]) .on("zoom", (event) => { zoomLayer.attr("transform", event.transform); }) .filter((event) => !event.target.closest?.("foreignObject")); svg.call(zoom); // ========================= // INITIAL ZOOM (safe in Observable) // ========================= requestAnimationFrame(() => { const initialScale = 0.7; const initialTransform = d3.zoomIdentity .translate(width / 2, height / 2) .scale(initialScale) .translate(-width / 2, -height / 2); svg.call(zoom.transform, initialTransform); }); // ========================= // STATE // ========================= let selectedFont = null; // ========================= // BUTTONS // ========================= const uiX = width - 40; function button(y, label, scale) { ui.append("rect") .attr("x", uiX) .attr("y", y) .attr("width", 24) .attr("height", 24) .attr("fill", "transparent") .attr("stroke", "#000") .style("cursor", "pointer") .on("click", () => svg.transition().call(zoom.scaleBy, scale)); ui.append("text") .attr("x", uiX + 12) .attr("y", y + 18) .attr("text-anchor", "middle") .attr("font-size", 16) .text(label) .style("pointer-events", "none"); } button(20, "+", 1.2); button(50, "−", 0.8); // ========================= // PANEL TOGGLE // ========================= ui.append("circle") .attr("cx", uiX + 12) .attr("cy", 107) .attr("r", 14) .attr("fill", "rgba(255,255,255,0.2)") .attr("stroke", "#000") .style("cursor", "pointer") .on("click", () => (mutable panelOpen = !panelOpen)); ui.append("text") .attr("x", uiX + 12) .attr("y", 112) .attr("text-anchor", "middle") .attr("font-size", 16) .text("≡") .style("pointer-events", "none"); // ========================= // GRAPH // ========================= const nodes = filteredFonts.map((d) => ({ ...d, r: 14 + d.weights.length * 2, x: width / 2 + (Math.random() - 0.5) * 100, y: height / 2 + (Math.random() - 0.5) * 100 })); const node = zoomLayer .selectAll("g") .data(nodes, (d) => d.name) .join("g") .style("cursor", "grab") .on("click", (_, d) => { selectedFont = d; updateSelection(); mutable selectedFont = d; }); node .append("image") .attr("href", (d) => categoryGlyphs[d.category]) .attr("width", (d) => d.r * 2) .attr("height", (d) => d.r * 2) .attr("x", (d) => -d.r) .attr("y", (d) => -d.r); function updateSelection() { node .select("image") .style("filter", (d) => selectedFont && selectedFont.name === d.name ? "sepia(100%) saturate(300%) brightness(90%) contrast(120%)" : "none" ); } updateSelection(); d3.forceSimulation(nodes) .force( "x", d3 .forceX((d) => (d.source === "google" ? width * 0.3 : width * 0.7)) .strength(0.25) ) .force("y", d3.forceY(height / 2).strength(0.25)) .force( "collide", d3.forceCollide((d) => d.r + 4) ) .on("tick", () => { node.attr("transform", (d) => `translate(${d.x},${d.y})`); }); // ========================= // PANEL // ========================= const panelWidth = panelOpen ? 260 : 0; const panel = svg .append("foreignObject") .attr("x", width - panelWidth) .attr("y", 0) .attr("width", panelWidth) .attr("height", height); const panelDiv = panel .append("xhtml:div") .style("width", "100%") .style("height", "100%") .style("overflow-y", "auto") .style("background", "rgba(244,245,240,0.95)") .style("border-left", "2px solid black") .style("box-sizing", "border-box") .style("padding", "10px") .style("pointer-events", "auto"); const header = panelDiv .append("div") .style("display", "flex") .style("justify-content", "space-between") .style("align-items", "center"); header .append("div") .style("font-family", "'Lab Mono', monospace") .style("font-size", "12px") .style("opacity", 0.6) .text("List View (A → Z)"); header .append("div") .style("cursor", "pointer") .style("font-size", "20px") .text("×") .on("click", () => (mutable panelOpen = false)); const list = panelDiv .append("div") .style("display", "flex") .style("flex-direction", "column") .style("gap", "6px"); filteredFonts .slice() .sort((a, b) => a.name.localeCompare(b.name)) .forEach((d) => { const item = list .append("div") .style("display", "flex") .style("align-items", "center") .style("gap", "8px") .style("padding", "6px 8px") .style("border", "1px solid rgba(0,0,0,0.25)") .style("border-radius", "8px") .style("cursor", "pointer") .on("click", () => { selectedFont = d; updateSelection(); mutable selectedFont = d; }); item .append("img") .attr("src", categoryGlyphs[d.category]) .style("width", "20px") .style("height", "20px"); item.append("link").attr("rel", "stylesheet").attr("href", d.url); item .append("div") .style("font-family", `"${d.name}", system-ui, sans-serif`) .style("font-size", "14px") .style("flex", "1") .text(d.name); }); return svg.node(); }30:T865,fontDetails = { if (!selectedFont) return html`

Click a glyph to see details...
    

`; const d = selectedFont; const category = fontCategories.find((c) => c.name === d.category); const fontFace = d.source === "google" ? html`` : html``; return html` ${fontFace}

⌯⌲ ${d.name}

Source: ${d.source}
Category: ${d.category}
Weights: ${d.weights.join(", ")}
Tags: ${d.tags?.join(", ") || "—"}
Variable: ${d.variable}
Scripts: ${d.scripts.join(", ")}

Open font source →

${category.name}

Characteristics:
${category.characteristics}

Best for:
${category.bestFor}

Avoid when:
${category.avoidWhen}

`; }31:T6ec,fontCategories = [ { name: "serif", color: "#D36072", characteristics: "Decorative strokes (serifs) at the ends of letters; traditional, structured, and highly readable in print.", bestFor: "Books, newspapers, magazines, academic writing, and elegant or formal designs.", avoidWhen: "Very small screen sizes, low-resolution displays, or ultra-modern branding." }, { name: "sans-serif", color: "#D4707D", characteristics: "Clean letterforms with no serifs; modern, minimal, and screen-optimized.", bestFor: "Websites, mobile apps, interfaces, presentations, and modern brands.", avoidWhen: "Strictly traditional, historical, or highly formal content." }, { name: "monospace", color: "#9A9087", characteristics: "Equal-width characters; mechanical, precise, and typewriter-like appearance.", bestFor: "Code editors, terminals, technical documentation, and data tables.", avoidWhen: "Long-form reading or design-focused branding." }, { name: "cursive", color: "#C09685", characteristics: "Handwritten or script-style fonts with flowing, connected strokes; expressive and decorative.", bestFor: "Logos, invitations, headlines, posters, and accent text.", avoidWhen: "Body text, small font sizes, professional documents, or accessibility-focused designs." }, { name: "fantasy", color: "#30A68E", characteristics: "Highly decorative and imaginative letterforms, often themed or genre-specific.", bestFor: "Game titles, movie posters, book covers, logos, and fantasy or sci-fi themed designs.", avoidWhen: "Body text, user interfaces, professional layouts, or content-heavy reading." } ]32:T44b,function makeCustomSelect(options, defaultVal, label) { const wrap = html`

`; const trigger = html`

${defaultVal}

`; const dropdown = html``; wrap.append(trigger, dropdown); wrap.value = defaultVal; options.forEach((opt) => { const el = html`

${opt}

`; el.addEventListener("mousedown", (e) => { e.preventDefault(); dropdown .querySelectorAll(".fc-select-option") .forEach((o) => o.classList.remove("selected")); el.classList.add("selected"); trigger.childNodes[0].textContent = opt; dropdown.classList.remove("open"); wrap.value = opt; wrap.dispatchEvent(new Event("input")); }); dropdown.append(el); }); trigger.addEventListener("click", (e) => { e.stopPropagation(); dropdown.classList.toggle("open"); }); document.addEventListener("click", () => dropdown.classList.remove("open")); return wrap; }33:Tb08,viewof searchText = { const allTags = [...new Set(fonts.flatMap((d) => d.tags || []))].sort(); const allNames = [...new Set(fonts.map((d) => d.name))].sort(); const container = html`

`; const input = html``; const suggestions = html`

`; container.append(input, suggestions); let activeIdx = -1; let flatItems = []; // tracks all clickable items for keyboard nav function getSuggestions(q) { if (!q.trim()) return { names: [], tags: [] }; const lower = q.toLowerCase(); return { names: allNames.filter((n) => n.toLowerCase().includes(lower)), tags: allTags.filter((t) => t.toLowerCase().includes(lower)) }; } function renderSuggestions({ names, tags }) { suggestions.innerHTML = ""; activeIdx = -1; flatItems = []; if (!names.length && !tags.length) { suggestions.classList.remove("open"); return; } function addSection(items, sectionLabel) { if (!items.length) return; const header = html`

${sectionLabel}

`; suggestions.append(header); items.forEach((val) => { const el = html`

${val}

`; el.addEventListener("mousedown", (e) => { e.preventDefault(); input.value = val; suggestions.classList.remove("open"); container.value = val; container.dispatchEvent(new Event("input")); }); suggestions.append(el); flatItems.push(el); }); } addSection(names, "fonts"); addSection(tags, "tags"); suggestions.classList.add("open"); } input.addEventListener("input", () => { renderSuggestions(getSuggestions(input.value)); container.value = input.value; container.dispatchEvent(new Event("input")); }); input.addEventListener("keydown", (e) => { if (e.key === "ArrowDown") { activeIdx = Math.min(activeIdx + 1, flatItems.length - 1); } else if (e.key === "ArrowUp") { activeIdx = Math.max(activeIdx - 1, -1); } else if (e.key === "Enter" && activeIdx >= 0) { input.value = flatItems[activeIdx].textContent; suggestions.classList.remove("open"); container.value = input.value; container.dispatchEvent(new Event("input")); e.preventDefault(); return; } else if (e.key === "Escape") { suggestions.classList.remove("open"); return; } flatItems.forEach((el, i) => el.classList.toggle("active", i === activeIdx) ); }); document.addEventListener("click", (e) => { if (!container.contains(e.target)) suggestions.classList.remove("open"); }); container.value = ""; return container; }34:[] 2c:{"id":"a46ae0169c3fe9e8","slug":"font-cataloger","title":"Font Cataloger","thumbnail":"4337873fadd6d418c5f51c592c0b708db186cff38ed9ec9355b801d18f63e491","access_level":"public","create_time":"$D2026-01-19T12:04:57.946Z","update_time":"$D2026-06-14T08:05:18.921Z","view_time":null,"first_public_time":"$D2026-01-19T12:34:49.205Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"1fa0c77b14fd90d0","login":"dduyg","name":"","avatar_url":"https://avatars-next.observableusercontent.com/8922701a2d973be0158565df96ce0b2fe9ffd55df053350d59973a811bac06af","tier":"starter_2024"},"version":395,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"248f116c85e550e3","login":"dduyg","name":"Duygu Dağdelen","avatar_url":"https://avatars-next.observableusercontent.com/ca098eb30fb37c129368c39d70e98a9a8444cfaa7496c72781905ac410af8cad","tier":null}],"members":[{"type":"individual","id":"248f116c85e550e3","login":"dduyg","name":"Duygu Dağdelen","avatar_url":"https://avatars-next.observableusercontent.com/ca098eb30fb37c129368c39d70e98a9a8444cfaa7496c72781905ac410af8cad","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Font Cataloger","cells":[{"id":179,"value":"$2e","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"filtersRow = html`\n

Search fonts by name or tag:

\n ${viewof searchText}\n

Filter by category:

\n ${viewof categoryFilter}\n

Filter by source:

\n ${viewof sourceFilter}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":49,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"

\n\n---\n\n##### /dependencies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"fonts = await fetch(\n `https://cdn.jsdelivr.net/gh/dduyg/LiminalLoop@main/catalog.fonts.json?v=${Date.now()}`\n).then((r) => r.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":20,"value":"categoryGlyphs = ({\n \"sans-serif\":\n \"https://cdn.jsdelivr.net/gh/dduyg/glyph-data-library@main/glyphs/9f7164_5a352b_75e8e806.png\",\n serif:\n \"https://cdn.jsdelivr.net/gh/dduyg/glyph-data-library@main/glyphs/c6908c_ad506a_af45dfa4.png\",\n monospace:\n \"https://cdn.jsdelivr.net/gh/dduyg/glyph-data-library@main/glyphs/2a2b26_736e69_90d32170.png\",\n cursive:\n \"https://cdn.jsdelivr.net/gh/dduyg/glyph-data-library@main/glyphs/d6aa92_deb39b_32ab55c8.png\",\n fantasy:\n \"https://cdn.jsdelivr.net/gh/dduyg/glyph-data-library@main/glyphs/45a18b_0b4536_e4a51e6b.png\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"filteredFonts = {\n const q = String(searchText || \"\")\n .toLowerCase()\n .trim();\n\n return fonts.filter((d) => {\n const matchSearch =\n !q ||\n d.name.toLowerCase().includes(q) ||\n (d.tags && d.tags.some((t) => t.toLowerCase().includes(q)));\n\n const matchCategory =\n categoryFilter === \"all\" || d.category === categoryFilter;\n\n const matchSource = sourceFilter === \"all\" || d.source === sourceFilter;\n\n return matchSearch && matchCategory && matchSource;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"mutable selectedFont = null","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"mutable panelOpen = false","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":379,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":255,"value":"viewof categoryFilter = {\n const options = [\"all\", ...new Set(fonts.map((d) => d.category))];\n return makeCustomSelect(options, \"all\", \"Filter by category:\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"viewof sourceFilter = {\n const options = [\"all\", ...new Set(fonts.map((d) => d.source))];\n return makeCustomSelect(options, \"all\", \"Filter by source:\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 2d:"$2c:body"