25:["$","title",null,{"children":"Blocks Search | Davo Galavotti | Observable"}] 4c:T4c7,md`# Blocks Search The project [bl.ocks.org](https://bl.ocks.org) by [@mbostock](https://observablehq.com/@mbostock) was the predecessor of Observable HQ. In the notebook ["10 Years of Open-Source Visualization"](https://observablehq.com/@mbostock/10-years-of-open-source-visualization), Mike Bostock describes the impact and merits of the example principle in helping people produce and consume examples to accelerate learning. Back in 2013, with the talk ["For Example"](https://bost.ocks.org/mike/example/), and in [2014](https://bost.ocks.org/mike/block/), Bostock explained the simplicity of the stack behind bl.ocks.org. While bl.ocks.org as a project was discontinued, the data was captured and curated by [@enjalot](https://observablehq.com/@enjalot) in his project [Blockbuilder](https://blockbuilder.org/). The data is available in his notebook ["Blockbuilder Search Data"](https://observablehq.com/@enjalot/blockbuilder-search-data). Each block now links to the open-source alternative [blocks](https://github.com/chart-code/blocks), maintained and hosted at [blocks.roadtolarissa.com](https://blocks.roadtolarissa.com/) by [@1wheel](https://observablehq.com/@1wheel). **Available blocks: ${TOTAL_ITEMS}** `4d:T6df,### Motivation This notebook was created with the intention of addressing three key areas in data visualization and user experience: 1. **Enhancing UX for Searching Static, Graph-Shaped Data**: The notebook was designed to improve the user experience in searching through static, graph-shaped data. This involves developing intuitive user interfaces and efficient search algorithms to navigate complex data structures, aiming for a more streamlined and user-friendly search process. 2. **Visualizing the Catalog by Terms, APIs, and Colors**: The second objective was to create a visual representation of the catalog categorized by specific terms, APIs, and color schemes. This involves developing a grid system that makes the data more accessible but also allows for an easier understanding of the relationships and categories within the catalog. 3. **Navigating OG d3.js Code Examples**: Finally, the notebook helps explore old d3.js code examples, leveraging the incredible groundwork by [Ian Johnson](https://observablehq.com/@enjalot) in his ["Blockbuilder Search Data"](https://observablehq.com/@enjalot/blockbuilder-search-data) notebook. Organized for user-friendly access, each example is cataloged with API methods, links, and metadata. This categorization connects each gist ID to the open-source [blocks](https://github.com/chart-code/blocks) platform, maintained and hosted at [blocks.roadtolarissa.com](https://blocks.roadtolarissa.com/) by [@1wheel](https://observablehq.com/@1wheel). On a personal note, the notebook served me as an invaluable source of inspiration to explore [past ideas](https://observablehq.com/d/505a0df51bba75fa) or [further explore](https://observablehq.com/d/34af157cdd302ee6) already refactored code on Observable.4e:T5e1,function filterBlocks(query) { const isGeneralAttributeMatch = (d) => { return ( d.description.toLowerCase().includes(query.toLowerCase()) || d.userId.toLowerCase().includes(query.toLowerCase()) || d.id.toLowerCase().includes(query.toLowerCase()) ); }; const isApiMatch = (d) => { if (d.api) { console.log(d.api); return Object.keys(d.api).find((api) => api === query[0]); } return false; }; const isColorMatch = (d) => { if (d.colors) { return Object.keys(d.colors).find( (color) => color.toLowerCase() === query.toLowerCase() ); } return false; }; const hasDescription = (d) => { return d.description ? true : false; }; const isThumbnailMatch = (d) => { return withThumbnails ? !!d.thumbnail : true; }; let filteredBlocks; // mutable currentPage = 1; if (selectedItem === "Description") { filteredBlocks = data.filter( (d) => isThumbnailMatch(d) && hasDescription(d) && isGeneralAttributeMatch(d) ); } else if (selectedItem === "Colors") { filteredBlocks = data.filter((d) => isThumbnailMatch(d) && isColorMatch(d)); } else if (selectedItem === "API") { filteredBlocks = data.filter((d) => isThumbnailMatch(d) && isApiMatch(d)); } else { filteredBlocks = data.filter((d) => isGeneralAttributeMatch(d)); } const startIndex = (currentPage - 1) * ITEMS_PER_PAGE; const endIndex = startIndex + ITEMS_PER_PAGE; return filteredBlocks; }4f:[] 48:{"id":"f4085c2027ecf4fb","slug":"blocks-search","title":"Blocks Search","thumbnail":"5352de00835020a0323f1a76c0c826524a6ad5f766d986d56f351240118e9178","access_level":"public","create_time":"$D2023-09-14T19:49:51.269Z","update_time":"$D2025-12-14T05:20:11.760Z","view_time":null,"first_public_time":"$D2023-12-20T05:19:31.560Z","has_unpublished_edits":null,"fork":{"id":"f067a53f70813de8","slug":"blockbuilder-search-data","title":"Blockbuilder Search Data","owner":{"id":"cce0fa6e063d2bee","login":"enjalot","name":"Ian Johnson"}},"stars":12,"starred":false,"owner":{"type":"team","id":"8a3c54c8b734990d","login":"davo","name":"Davo Galavotti","avatar_url":"https://avatars-next.observableusercontent.com/8009256162b43687ff3ca23b217145f13f6dd99c95f4f9ece0a9e8b7f2ca10d6","tier":"starter_2024","bio":"Experimental UI. 2D/3D. Limited capacity. Work in progress.","followed_by_you":false,"follows_you":false},"version":1051,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3541aee6537ad20c","login":"davo","name":"Davo Galavotti","avatar_url":"https://avatars-next.observableusercontent.com/8009256162b43687ff3ca23b217145f13f6dd99c95f4f9ece0a9e8b7f2ca10d6","tier":null,"bio":"Experimental UI. 2D/3D. Limited capacity. Work in progress.","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"3541aee6537ad20c","login":"davo","name":"Davo Galavotti","avatar_url":"https://avatars-next.observableusercontent.com/8009256162b43687ff3ca23b217145f13f6dd99c95f4f9ece0a9e8b7f2ca10d6","tier":null,"role":"editor"}],"comments":[{"id":"5f1a4cdf6db241cc","reply_to_id":null,"content":"Quoted from https://observablehq.com/@mbostock/10-years-of-open-source-visualization","create_time":"$D2023-09-25T14:24:23.938Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"3541aee6537ad20c","login":"davo","name":"Davo Galavotti","avatar_url":"https://avatars-next.observableusercontent.com/8009256162b43687ff3ca23b217145f13f6dd99c95f4f9ece0a9e8b7f2ca10d6","tier":null}}],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Blocks Search","cells":[{"id":0,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":445,"value":"viewof data = Inputs.radio(new Map(collection), {\n value: blocksMin,\n label: \"Source\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"viewof withThumbnails = Inputs.toggle({\n label: \"Thumbs Only\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1046,"value":"sortedColors.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1048,"value":"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":183,"value":"viewof search = {\n const text = Inputs.text({\n label: \"Search with text\",\n placeholder: placeholder,\n desc: \"Use description, user id, gist id\",\n divStyle: {\n display: \"inline-block\",\n \"text-align\": \"left\",\n \"margin-right\": \"25px\"\n }\n });\n\n const colors = Inputs.color({\n label: \"Search by color\",\n value: \"#4682b4\",\n datalist: sortedColors,\n divStyle: {\n display: \"inline-block\",\n \"text-align\": \"left\",\n \"margin-right\": \"25px\"\n }\n });\n\n console.log(typeof sortedAPIMethods);\n\n const apis = Inputs.select(sortedAPIMethods, {\n label: \"Search by API\",\n value: sortedAPIMethods.find((d) => d.name === \"d3.select\"),\n multiple: 6,\n divStyle: {\n display: \"inline-block\",\n \"text-align\": \"left\",\n \"margin-right\": \"25px\"\n }\n });\n\n if (selectedItem === \"Colors\") {\n return colors;\n } else if (selectedItem === \"API\") {\n return apis;\n } else {\n return text;\n }\n\n return;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"viewof paginator = Inputs.text({\n value: `${currentPage} of ${TOTAL_PAGES}`,\n label: \"Page\",\n disabled: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":959,"value":"viewof pageControl = Inputs.form(\n [\n button(\"prev\", () => mutable currentPage--),\n button(\"next\", () => mutable currentPage++)\n ],\n {\n template: (inputs) =>\n htl.html`

${inputs}

`\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":906,"value":"***","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1009,"value":"$4d","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":939,"value":"{\n data;\n mutable currentPage = 1;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"mutable currentPage = 1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":547,"value":"collection = [\n [\"Description\", blocksMin],\n [\"Colors\", blocksColors],\n [\"API\", blocksApi]\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":630,"value":"selectedItem = collection.find(([placeholder, blocks]) => blocks === data)[0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":563,"value":"placeholder = {\n const selectedItem = collection.find(\n ([placeholder, blocks]) => blocks === data\n );\n\n if (!selectedItem) {\n return \"\";\n }\n\n const [placeholder, blocks] = selectedItem;\n return `Search by ${placeholder.toLowerCase()}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":193,"value":"ITEMS_PER_PAGE = 72 + 9 * 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"TOTAL_ITEMS = filtered.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"TOTAL_PAGES = Math.ceil(TOTAL_ITEMS / ITEMS_PER_PAGE)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":815,"value":"mutable filtered = filterBlocks(search)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"currentPageBlocks = {\n const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;\n const endIndex = startIndex + ITEMS_PER_PAGE;\n\n return filtered.slice(startIndex, endIndex);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":295,"value":"function previews(blocks) {\n return htl.html`

${blocks.map(\n (d) => {\n return preview(d);\n }\n )}\n\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":297,"value":"// blocks.roadtolarissa.com\n// gist.github.com\n\nfunction preview({ description, id, userId, thumbnail }) {\n return htl.html`\n (event.currentTarget.firstElementChild.style.borderColor =\n \"#1b1e23\")} onmouseout=${(event) =>\n (event.currentTarget.firstElementChild.style.borderColor = \"#e8e8e8\")}>\n

${\n description || id\n }

\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":829,"value":"button = (label, callback, options) => {\n return Inputs.button(label, {\n ...(options || {}),\n reduce: callback\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":639,"value":"sortedColors = {\n const colorCount = new Map();\n blocksColors.forEach(item => {\n if (item.colors) {\n Object.keys(item.colors).forEach(color => {\n if (colorCount.has(color)) {\n colorCount.set(color, colorCount.get(color) + 1);\n } else {\n colorCount.set(color, 1);\n }\n });\n }\n });\n \n const sortedColors = Array.from(colorCount.entries());\n sortedColors.sort((a, b) => b[1] - a[1]);\n \n return sortedColors.map(([color, _]) => color); // returns only the colors\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":652,"value":"sortedAPIMethods = {\n const methodCount = new Map();\n blocksApi.forEach((item) => {\n if (item.api) {\n Object.keys(item.api).forEach((method) => {\n if (methodCount.has(method)) {\n methodCount.set(method, methodCount.get(method) + 1);\n } else {\n methodCount.set(method, 1);\n }\n });\n }\n });\n\n let sortedAPIMethods = Array.from(methodCount.entries());\n sortedAPIMethods.sort((a, b) => b[1] - a[1]);\n \n sortedAPIMethods = sortedAPIMethods.map(item => item[0]); // return only the method name\n return sortedAPIMethods;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"blocksMin = fetch(\"https://storage.googleapis.com/bb-search-data/parsed/blocks-min.json?\").then(response => {\n if (!response.ok) throw new Error(response.status);\n return response.json();\n}).catch(error => {return error;})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"blocksColors = fetch(\"https://storage.googleapis.com/bb-search-data/parsed/blocks-colors.json?\").then(response => {\n if (!response.ok) throw new Error(response.status);\n return response.json();\n}).catch(error => {return error;})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":102,"value":"blocksApi = fetch(\"https://storage.googleapis.com/bb-search-data/parsed/blocks-api.json?\").then(response => {\n if (!response.ok) throw new Error(response.status);\n return response.json();\n}).catch(error => {return error;})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":167,"value":"files = d3.csv(\"https://storage.googleapis.com/bb-search-data/parsed/files-light.csv\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":173,"value":"filesByGist = {\n const group = d3.group(blocksFiles, d => d.gistId);\n const sortedEntries = Array.from(group.entries()).sort((a, b) => b[1].length - a[1].length);\n return new Map(sortedEntries);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":442,"value":"blocksFiles = fetch(\n \"https://storage.googleapis.com/bb-search-data/parsed/files-blocks.json\"\n)\n .then((response) => {\n if (!response.ok) throw new Error(response.status);\n return response.json();\n })\n .catch((error) => {\n return error;\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":124,"value":"num = d3.format(\",d\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4f","stdlib":"1"}} 24:null