Micha Schwab michaschwab

This is an example of how VisConnect's event sharing can be used to easily create a chat application.

Collaborative Dragging

This block demonstrates a minimal example for collaborative interaction on a visualization using VisConnect. The block is based on https://observablehq.com/@d3/circle-dragging-i. This block simply adds VisConnect and replaces Math.random() with vc.random, and d3.drag with vc.drag.

	<svg height="220">
	<g id="first" style="will-change:transform"><rect width=100 height="100" fill=red></rect></g>
	<g style="will-change:transform"><rect y=100 width=100 height="100" fill=blue></rect></g>
	</svg>

	<div style="width:100px; height: 100px; background: #f00; will-change: transform"></div>
	<div style="width:100px; height: 100px; background: #00f; will-change: transform"></div>

	<p>This website contains an SVG with two group elements with a rect element within each, and two div elements.
	It tries to force compositing layers for the two SVG group elements and for the two div elements.

	<style>
	#frame {
	border: 2px solid;
	padding: 20px;
	width: 880px;
	height: 400px;
	resize: both;
	overflow: auto;
	}
	</style>

	<svg width="300" height="300" id="original" style="border: 1px solid #000"><text y="15">Original</text></svg>
	<svg width="300" height="300" id="clustered" style="border: 1px solid #000"><text y="15">Clustered</text></svg><br />

	Neighbor points considered:
	<input id="neighborCount" type="number" value="30" min="1" max="100" onchange="updateClusters()" />
	More is more accurate but slower.<br />

	Gaussian sigma for scoring distances:
	<input id="sigma" type="number" value="50" min="1" max="100" onchange="updateClusters()" />
	At this distance, items get a score of 0.68.<br />

	<!DOCTYPE html>
	<html lang="en-US">
	<head>
	<title>VisConnect Demo</title>
	<script src="https://unpkg.com/peerjs@1.0.4/dist/peerjs.min.js"></script>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://unpkg.com/visconnect@1.0.0/visconnect-bundle.js"></script>
	</head>
	<body>

	<!DOCTYPE html>
	<meta charset="utf-8">

	<body collaboration="live" custom-events="brush-message, label-message" ignore-events="all">
	<script src="https://unpkg.com/peerjs@1.0.4/dist/peerjs.min.js"></script>
	<script src="https://michaschwab.github.io/VisConnect/visconnect-bundle.js"></script>
	<script src="//d3js.org/d3.v4.min.js"></script>
	<h2>VisConnect Brushing</h2>
	<p>
	This VisConnect example is a copy of

	function getParsedData(response) {
	const data = {};

	// [0] is temperature. [1] is U component of wind, [2] is V component of wind.
	for (let i = 1; i < response.length; i++) {
	const dataPart = response[i];

	const startLatitude = Math.min(dataPart.header.la1, dataPart.header.la2);
	const endLatitude = Math.max(dataPart.header.la1, dataPart.header.la2);
	const latitudePoints = endLatitude - startLatitude + 1;