Max Barrass

@wildone·8 public vizzes

Fork of OS-Threat UI v2

This interactive cybersecurity data visualisation presents a threat analysis dashboard where users explore hierarchical data structures in an index tree view and modify a two-level network graph in a working pane. The interface offers dataslice radio buttons to switch among threat categories (sighting, event, impact, etc.) and theme toggles for light or dark modes. The tree view uses D3.js `tree()` layouts with animated expand/collapse transitions, while the working pane leverages `d3.zoom()` and `d3.forceSimulation` to support drag, pan, and context-menu interactions on the force-directed graph. Data is loaded from local JSON files containing STIX 2.1 objects and relationships, rendered as SVG elements with dynamic node icons and labels.

Jul 1, 2024

Loading thumbnail…

Typerefinery.ai Widget

This example demonstrates a simple widget interface that enables communication between an embedded iframe and its parent page. It shows three buttons—Identity, Address, and Contact—that trigger custom events when clicked, sending structured JSON payloads through the browser's `postMessage` API or `CustomEvent` dispatch. The implementation uses Bootstrap 5.3 for button styling, jQuery for DOM manipulation, and native JavaScript event handling to raise actions like `OPEN_ITEM` with configurable parameters. The page listens for incoming parent messages and logs all interactions to the console, illustrating a basic pattern for cross-frame interaction in a visualization dashboard context.

May 23, 2024

Loading thumbnail…

Parent and iFrame

This example demonstrates two-way communication between a parent window and a child iframe using the postMessage API. The parent sends user-typed messages to the iframe, while the iframe sends messages back that appear in the parent’s message area. It uses standard browser APIs, including `window.postMessage` and event listeners for the `message` event. The parent embeds a fully functional VizHub visualization as the iframe, sourced from a separate URL.

May 23, 2024

Loading thumbnail…

iFrame

This example demonstrates bidirectional communication between an embedded iframe and its parent page using the HTML5 `postMessage` API and the `window.addEventListener('message')` event. It shows how a child document can display messages sent from the parent, and how a user can type text into an input field and send it back to the parent via `window.parent.postMessage`. The page is a minimal HTML document with inline CSS styling and vanilla JavaScript, requiring no external libraries or frameworks. It serves as a bare-bones template for cross-origin messaging patterns in web visualization contexts.

May 23, 2024

Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This minimal example demonstrates a large "Hello World!" message rendered inside a container with configurable font size. The code directly sets the container’s HTML content using an inline style, with the `fontSize` variable (217) controlling the text scale. It leverages a simple DOM manipulation API via `container.innerHTML` to update the visualization, making it straightforward to modify and hot-reload in a browser environment.

May 21, 2024

Loading thumbnail…

Fork of OS-Threat UI

A fork of the OS-Threat UI renders STIX 2.1 threat intelligence data as a collapsible indent tree in a left panel, with a separate working panel for graph exploration. The tree uses d3.tree, d3.hierarchy, and custom SVG icons to display entities like sightings, indicators, and identities, while a context menu (d3.event.preventDefault) offers node actions. The working panel applies d3.zoom for panning and scaling, and button controls switch between data categories loaded from JSON files.

Apr 3, 2024

Loading thumbnail…

Fork of Circles with D3

This fork of the Circles with D3 example displays seven semi-transparent colored circles against a pale green background. The visualization demonstrates the D3 General Update Pattern using `select`, `data`, and `join` to bind circle elements to an array of position, radius, and color values. The code uses method chaining with `.attr` to set `cx`, `cy`, `r`, `fill`, and `opacity` properties, adapting the SVG dimensions to the container's client width and height. The example serves as a tutorial for data-driven rendering with D3.js.

Apr 3, 2024

Loading thumbnail…

Typerefinery.ai Embed Component

This example demonstrates a minimal "Hello World" visualization that renders text directly into a provided container using the VizHub V3 Runtime Environment. It shows how a simple, static text element can be displayed with a large, adjustable font size, serving as a blank starting point for interactive widget development. The code exports a `main` function that receives the container and an options object, then sets the container’s inner HTML with inline styles, relying on the container’s measured dimensions for layout. No external libraries are used; it leverages plain JavaScript and the runtime’s state management for future interactivity.

Mar 1, 2024