{"id":13692278,"url":"https://github.com/michaschwab/VisConnect","last_synced_at":"2025-05-02T19:31:55.412Z","repository":{"id":46906229,"uuid":"221800293","full_name":"michaschwab/VisConnect","owner":"michaschwab","description":null,"archived":false,"fork":false,"pushed_at":"2023-01-05T17:16:20.000Z","size":12269,"stargazers_count":22,"open_issues_count":5,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-20T05:34:25.258Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/michaschwab.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-11-14T22:48:22.000Z","updated_at":"2022-08-10T10:06:11.000Z","dependencies_parsed_at":"2023-02-04T08:32:04.249Z","dependency_job_id":null,"html_url":"https://github.com/michaschwab/VisConnect","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaschwab%2FVisConnect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaschwab%2FVisConnect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaschwab%2FVisConnect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/michaschwab%2FVisConnect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/michaschwab","download_url":"https://codeload.github.com/michaschwab/VisConnect/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252095291,"owners_count":21693895,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-02T17:00:55.658Z","updated_at":"2025-05-02T19:31:52.564Z","avatar_url":"https://github.com/michaschwab.png","language":"JavaScript","readme":"# VisConnect \n\n### Live collaboration for web based visualizations. Events, such as clicking, are synchronized across collaborators. For more information check out the website at [visconnect.us](https://visconnect.us).\n\n\n----\n\n## Installation\n\nTo use VisConnect, simply include the the script tag for VisConnect. \n\n```\u003cscript src=\"https://unpkg.com/visconnect@latest/visconnect-bundle.js\"\u003e\u003c/script\u003e```\n\n## Basic Usage\n\nAfter including the script tags in your HTML, VisConnect will automatically inject the collaboration interface. To start collaborating click the VisConnect logo on the bottom right and a custom link will be copied to your clipboard. Send this link to anyone you want and wait for them to join. Once connected all your interaction events one SVG elements should be synchronized! \n\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://i.imgur.com/LfjnzeO.gif\"/\u003e\n\u003c/p\u003e\n\n\n## Advanced Usage\n\nTo enable VisConnect to work with as many use cases as possible we’ve included a number of optional settings and methods for developers to leverage.\n\n### UI Synchronization \nTo synchronize events on non-SVG (e.g. HTML UI) include the `collaboration` attribute in your Body tag.\n\n```\u003cbody collaboration\u003e```\n\n[Example](https://visconnect.us/ff0f1abebb0a72520411940bf82cbedf/)\n\n### Lock System Bypass\nVisConnect uses a [distributed lock manager](https://en.wikipedia.org/wiki/Distributed_lock_manager) to ensure DOM elements can only be manipulated by one client at a time. To disable the lock manager, and allow all events to be synchronized as soon as they happen, set the `collaboration` attribute to `live`.\n\n```\u003cbody collaboration='live'\u003e```\n\n### Ignoring Events \nBy default, Visconnect listens to all standard JavaScript events. If you want to ignore particular events you can list them in the Body tag with the `ignore-events` attribute.\n\n```\u003cbody ignore-events='mousedown, mouseup, mousemove'\u003e```\n\n### Custom Events \nVisConnect can even synchronize your custom events! Custom events can even send a payload over the network. To sync custom events add them to the Body tag with the `custom-events` attribute. \n\n```\u003cbody custom-events='myEvent'\u003e```\n\n```\nconst myEvent = new CustomEvent ('myEvent', { payload: data });\n\ndocument.body.addEventListener('myEvent', (e) =\u003e { console.log(e.payload) });\n```\n\n[Example](https://visconnect.us/d29cd8bb5b596697d92f5da2e6d5c49c/)\n\n### Collaborative Methods\nCommonly used visualiation methods are not made with collaboration in mind and do not work well with VisConnect. VisConnect provides drop in replacements for several of these methods to improve compatibility. \n\n1. `vc.random()`: Seeded drop in replacement for Math.random() \n1. `vc.drag()`: Drop in replacement for d3.drag() [Example](https://visconnect.us/9129f44cea5aabd962b54e93b523e632/)\n2. `vc.brush()`: Drop in replacement for d3.brush() [Example](https://visconnect.us/b2d66e94bf90016cb285ebc9515ebc0a/)\n3. `vc.lasso()`: Custom lasso implmentation for VisConnect [Example](https://visconnect.us/994a1ab12de6fb4bf21ee5c7a2461466/)\n\n\n\n","funding_links":[],"categories":["[↑](#contents) Collaborative"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichaschwab%2FVisConnect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmichaschwab%2FVisConnect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmichaschwab%2FVisConnect/lists"}