Skip to main content
100%

$WikiTitle | {$Group} / {$Title} $ActionTitle

✓ Published0🌍 Public
UUtopiah
Last edited Mar 12, 2021
Created on Mar 12, 2021

This example turns a web page into a collaborative, multi-user whiteboard and presentation tool. It loads web content as movable cards on a large canvas, where users can drag, snap to a grid, and reposition them. PeerJS enables real-time remote pointers and shared sessions via peer-to-peer connections, while a Jitsi video call can be overlaid for communication. The tool also supports generating a Reveal.js presentation from the arranged cards and toggling a snapping grid for alignment.

AI-generated description

Similar vizzes

Loading thumbnail…

$WikiTitle | {$Group} / {$Title} $ActionTitle

This example presents a collaborative whiteboard and presentation tool that arranges content cards on an open canvas. The interface uses PeerJS for peer-to-peer connections and a JitsiMeetExternalAPI for video calls, allowing remote collaboration. Users can toggle a snapping grid, generate presentations from the layout, and link to external URLs via iframes. The code also references server-side rendering for previews and includes a custom “monetization” meta tag, indicating a broader integration with web-based sharing and streaming workflows.

UUtopiah
95% match
Loading thumbnail…

$WikiTitle | {$Group} / {$Title} $ActionTitle

This visualization turns a wiki page into an interactive flashcard deck, hiding each list item’s answer behind a clickable code element and displaying one question at a time. Users click “Remembered” or “Forgotten” to advance, and the results are saved as JSON to a remote wiki page via the `fetch` API with POST requests. The code uses plain DOM manipulation to toggle visibility and opacity, and reads previous session data from a `PIMVRdata` group using `response.json()`.

UUtopiah
76% match
Loading thumbnail…

llm-wiki

The visualization shows an LLM-maintained knowledge wiki as a dynamic network of interlinked markdown pages, emphasizing how information accumulates into a persistent, cross-referenced structure rather than being re-derived per query. Using D3.js’s `forceSimulation` and `forceLink`, nodes represent entity pages, concepts, and raw sources, with edges mapping wiki cross-references and topic summaries. The layout updates in real time as new sources are ingested, highlighting the wiki’s evolving synthesis. This example illustrates the core architectural pattern where the LLM writes and updates the wiki while the user browses it, contrasting with retrieval-augmented generation’s stateless query-time lookup.

IIoTeacher
55% match
Loading thumbnail…

Gist 7f5cc15d0eae9281c33b735420ae8ee0

This example transforms a PmWiki source page into a searchable interface for code snippets. It fetches the page’s source via the `fetch` API, splits it into lines, and tokenizes text wrapped in `@@` delimiters. Each snippet becomes a clickable link that queries GitHub’s gist search for matches by the user “Utopiah”. The script uses `document.querySelectorAll` to locate existing `<code>` elements in the page and replaces their content with the generated anchor tags, while logging any unmatched snippets. It relies on vanilla DOM manipulation and URL construction, with no external visualization libraries.

UUtopiah
54% match
Loading thumbnail…

wiki preview test

This example demonstrates an interactive Wikipedia link preview in a plain HTML page, where hovering over a linked article title displays its summary in a pop-up. The code uses the Wikipedia REST API to fetch article extracts on mouseover, then dynamically creates and positions a div element via the DOM API. The pop-up is removed on mouseout. While it loads D3 v7 from a CDN, the interaction relies on native JavaScript event listeners and fetch calls, not on D3-specific visualization functions.

Cchristiand416@gmail.com
53% match
Loading thumbnail…

Wiki data, first 10 pages only (force-Directed Graph with Mouseover)

A force-directed graph displays the first ten pages from a wiki dataset, with nodes representing page titles and links showing their target relationships. The visualization uses D3 v3’s `d3.layout.force` to compute positions, while SVG circles and text labels render each node. Mouseover and mouseout events trigger transitions that enlarge or shrink the circles via `transition().attr("r")`. The underlying data comes from an external JavaScript file (`wiki_graph_var.js`) that defines the node dictionary and link arrays.

UUtopiah
53% match
Loading thumbnail…

Wikidata RPC for NetsBlox

This visualization demonstrates how Wikidata can be accessed as a Remote Procedure Call (RPC) service within NetsBlox, a visual programming environment. Built with Vue and rendered on HTML5 Canvas, the project pairs an XML room definition with a markdown guide that explains Wikidata's code-block integration. The example uses WebGL for rendering and focuses on Berlin-related Wikidata queries, showing real-time data retrieval from the live knowledge base directly within NetsBlox's block-based interface. The visualization is accompanied by an animated GIF illustrating the code blocks in action, making it a practical reference for developers working with semantic data in educational or prototyping contexts.

CCliffordAnderson
53% match
Loading thumbnail…

Gist b4bdcd5422cc8c12b97fac3776955cb2

This animated presentation showcases a slide deck within Mozilla Hubs, a virtual reality environment, using Three.js and AFRAME to load and position image-based slides in 3D space. The slides, sourced from Unsplash and Twitter, display content about the author’s work with the European Parliament, UNICEF, and Hubs scripting. A custom `slides` object controls navigation via `nextSlide()`, scaling the active slide, and can auto-advance or drop all content using `startAutoPresent()` and `dropAllContent()`. The `media-loader` and `networked` components handle asset loading and sharing in the scene.

UUtopiah
52% match