import Scene, Renderer, ModuleManager from 'js-visg-m-s'; Visit the official GitHub releases page and download visgms.zip . Extract it and include visgms.js and visgms.css (for default tooltips and overlays) in your project. 2.4 Basic Boilerplate <!DOCTYPE html> <html> <head> <title>JS-VISG-M-S Demo</title> <style>body margin: 0; overflow: hidden; </style> </head> <body> <canvas id="visg-canvas"></canvas> <script> const canvas = document.getElementById('visg-canvas'); const scene = new JSVisgMS.Scene(canvas); scene.background(0x111122); const cube = scene.addPrimitive('cube', size: 1, color: 0xff6600 ); scene.render(); </script> </body> </html> Chapter 3: Core Concepts & Architecture Before diving into commands, understand the three pillars of JS-VISG-M-S: 3.1 Scene Graph Every object in JS-VISG-M-S is a node in a hierarchical tree. Transformations (position, rotation, scale) propagate from parent to child. Example:
| Property | Type | Default | Description | |----------|------|---------|-------------| | renderer | string | 'webgl' | 'webgl' , 'webgpu' , 'canvas2d' | | antialias | boolean | true | Enable MSAA | | pixelRatio | number | window.devicePixelRatio | For retina displays | | fpsLimit | number | 60 | Throttle render frames | | modules | array | [] | List of module names to load | | shaders | object | {} | Custom vertex/fragment shaders | const config = renderer: 'webgpu', antialias: false, fpsLimit: 30, modules: ['TooltipModule', 'DataStreamModule'], shaders: vertex: 'custom.vert', fragment: 'custom.frag' ; const app = new JSVisgMS.Application(config); Chapter 5: Working with Modules Modules are the "M" in JS-VISG-M-S and dramatically extend functionality. 5.1 Loading a Module import TimelineModule from 'js-visg-m-s/modules/timeline'; scene.registerModule(TimelineModule, position: 'bottom' ); 5.2 Creating Your Own Module class LoggingModule extends JSVisgMS.BaseModule onRender(glContext) console.log('Frame rendered at', performance.now()); js-visg-m-s manual
Introduction In the rapidly evolving landscape of data visualization and graphical simulation on the web, the JS-VISG-M-S (JavaScript Visual Graphics Module System) has emerged as a powerful, open-source toolkit for developers, data scientists, and engineers. Whether you are building interactive dashboards, real-time network topologies, or scientific simulations, the JS-VISG-M-S library offers a modular architecture designed for performance and scalability. Whether you are building interactive dashboards
Now go build something visual and extraordinary. Last updated: October 2025. This manual is community-maintained and not affiliated with the core JS-VISG-M-S team. For corrections, please submit a pull request on GitHub. real-time network topologies
scene.use(new LoggingModule()); This module accepts JSON streams over WebSocket:
We’ve been on the front lines and we know what’s at stake. We are aviation professionals, engineers, corporate and government leaders, organizational scientists, program managers, executive coaches, and more.
We understand your environment, and partner with you to solve the toughest challenges and get results.
We improve programs and performance to ensure safety and efficiency. We know what works and how to get it done in your world.
Learn more about how we can help
We are committed to investing and building our communities. We believe our contributions to the broader community will have longer and sustained impact beyond our day-to-day business.
Our mission is ensuring the safety and security of millions of people in the air and on the ground around the world.
We hope to inspire that same sense of mission with our contributions to our community.
Learn more about our corporate social responsibility program