dsaffo/README.md

## README.md

      
    Raw
  

              README.md
            
          
     VisConnect UI

  
    This VisConnect example is adapted from
    demo.
    The only changes are adding the PeerJS and VisConnect script tags, and adding the collaboration attribute to the HTML body. Click the visconnect logo on the bottom right and send the coppied URL to a friend. Once they open the link all your interactions will be synchronized!
  

## index.html
<!DOCTYPE html>
<!-- How to create Mouse Events for D3 -->
<html>

<head>

  <!-- Load VisConnect and PeerJS-->
  <script src="https://unpkg.com/peerjs@1.0.4/dist/peerjs.min.js"></script>
  <script src="https://unpkg.com/visconnect@latest/visconnect-bundle.js"></script>


  <!-- Load D3 from site -->
  <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>


</head>

<body collaboration="live">


<form>
  What color do you prefer?<br>
  <input type="radio" name="colors" id="red">Red<br>
  <input type="radio" name="colors" id="blue">Blue
</form>

<button onclick="check()">Check "Red"</button>
<button onclick="uncheck()">Uncheck "Red"</button>

<script>
function check() {
  document.getElementById("red").checked = true;
}
function uncheck() {
  document.getElementById("red").checked = false;
}
</script>


</body>

</html>
	<!DOCTYPE html>
	<!-- How to create Mouse Events for D3 -->
	<html>

	<head>

	<!-- Load VisConnect and PeerJS-->
	<script src="https://unpkg.com/peerjs@1.0.4/dist/peerjs.min.js"></script>
	<script src="https://unpkg.com/visconnect@latest/visconnect-bundle.js"></script>


	<!-- Load D3 from site -->
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>


	</head>

	<body collaboration="live">




	<form>
	What color do you prefer?<br>
	<input type="radio" name="colors" id="red">Red<br>
	<input type="radio" name="colors" id="blue">Blue
	</form>

	<button onclick="check()">Check "Red"</button>
	<button onclick="uncheck()">Uncheck "Red"</button>

	<script>
	function check() {
	document.getElementById("red").checked = true;
	}
	function uncheck() {
	document.getElementById("red").checked = false;
	}
	</script>




	</body>

	</html>