Lior Ben-David LiorB-D

## script.js
const socket = io('/') // Create our socket
const videoGrid = document.getElementById('video-grid') // Find the Video-Grid element

const myPeer = new Peer() // Creating a peer element which represents the current user
const myVideo = document.createElement('video') // Create a new video tag to show our video
myVideo.muted = true // Mute ourselves on our end so there is no feedback loop

// Access the user's video and audio
navigator.mediaDevices.getUserMedia({
    video: true,

## Video Chat - server.js
//Create our express and socket.io servers
const express = require('express')
const app = express()
const server = require('http').Server(app)
const io = require('socket.io')(server)
const {v4: uuidV4} = require('uuid')

app.set('view engine', 'ejs') // Tell Express we are using EJS
app.use(express.static('public')) // Tell express to pull the client script from the public folder

## room.ejs
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Set the ROOM_ID variable to the roomId that is passed in by server.js -->
    <script>
        const ROOM_ID = "<%= roomId %>"
    </script>
    <!-- CDN in the peerJS and socket.io libraries -->

## server.js
var express = require('express'); // Require the Express NPM package
var app = express(); // Initialize our app
var path = require('path'); // Library neccesary for locating the path of our HTML

app.get('/', function(req, res) { // When someone enters our site
    res.sendFile(path.join(__dirname + '/index.html')); //Serve them the index.html file
});

app.listen(3000); //Run this server on port 3000

## index.html
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js" integrity="sha512-WIklPM6qPCIp6d3fSSr90j+1unQHUOoWDS4sdTiR8gxUTnyZ8S2Mr8e10sKKJ/bhJgpAa/qG068RDkg6fIlNFA==" crossorigin="anonymous"></script>
    <script>
      const screenDim = 600 // Our dimensions for the canvas
      let corners = [{x: 300, y: 100}, {x: 100, y: 450}, {x: 500, y: 450}] // The three corners of our triangle
      let pts = [{x: corners[0].x, y: (corners[0].y + corners[1].y) / 2}] // An array for all the points we iterate through, initialize with our starting point
      let num = 10 // Number of iterations
      let numField, numLbl // Declare our label and textfield to change the numbers
      function setup() {
          createCanvas(screenDim,screenDim); // Create our canvas for p5 to draw on

## main.py
#Imports
from bokeh.plotting import figure
from bokeh.io import curdoc

#Bokeh's Line Chart requires two arrays for the X and Y values
x = [1,2,3,4,5]
y = [4,6,2,4,3]

# Create a Figure - Bokeh's name for a basic plot ready to be graphed on
p = figure(

## App.js
import './App.css';
import * as d3 from 'd3' // Import D3
import {useEffect} from 'react'

function App() {

  useEffect(() => {
      /*
        This is going to run once when the App is first rendered.
        All of our D3 code, which will edit the elements on our DOM, will be put here.

## App.js
import './App.css';
import * as d3 from 'd3'
import {useEffect, useState} from 'react'

function App() {

  useEffect(() => {

      // Create a dataset of pets and the amount of people that own them
      let dataSet = [

## App.css
#BarChart {
  display: flex;
  flex-direction: row; /* Arrange the Bars Horizontally using FlexBox  */
  align-items: flex-end; /* Have the bars start at the bottom and go up */
  justify-content: center; /* Center the bars in the middle of the screen */
  margin: 50px;
}

.bar {
  background-color: #3aa70f; /* Have each bar be a nice green */

## App.js
import './App.css';
import * as d3 from 'd3'
import {useEffect, useState} from 'react'

function App() {

  useEffect(() => {

      // Create a dataset of pets and the amount of people that own them
      let dataSet = [
	const socket = io('/') // Create our socket
	const videoGrid = document.getElementById('video-grid') // Find the Video-Grid element

	const myPeer = new Peer() // Creating a peer element which represents the current user
	const myVideo = document.createElement('video') // Create a new video tag to show our video
	myVideo.muted = true // Mute ourselves on our end so there is no feedback loop

	// Access the user's video and audio
	navigator.mediaDevices.getUserMedia({
	video: true,
	//Create our express and socket.io servers
	const express = require('express')
	const app = express()
	const server = require('http').Server(app)
	const io = require('socket.io')(server)
	const {v4: uuidV4} = require('uuid')

	app.set('view engine', 'ejs') // Tell Express we are using EJS
	app.use(express.static('public')) // Tell express to pull the client script from the public folder
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- Set the ROOM_ID variable to the roomId that is passed in by server.js -->
	<script>
	const ROOM_ID = "<%= roomId %>"
	</script>
	<!-- CDN in the peerJS and socket.io libraries -->
	var express = require('express'); // Require the Express NPM package
	var app = express(); // Initialize our app
	var path = require('path'); // Library neccesary for locating the path of our HTML

	app.get('/', function(req, res) { // When someone enters our site
	res.sendFile(path.join(__dirname + '/index.html')); //Serve them the index.html file
	});

	app.listen(3000); //Run this server on port 3000
	<head>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js" integrity="sha512-WIklPM6qPCIp6d3fSSr90j+1unQHUOoWDS4sdTiR8gxUTnyZ8S2Mr8e10sKKJ/bhJgpAa/qG068RDkg6fIlNFA==" crossorigin="anonymous"></script>
	<script>
	const screenDim = 600 // Our dimensions for the canvas
	let corners = [{x: 300, y: 100}, {x: 100, y: 450}, {x: 500, y: 450}] // The three corners of our triangle
	let pts = [{x: corners[0].x, y: (corners[0].y + corners[1].y) / 2}] // An array for all the points we iterate through, initialize with our starting point
	let num = 10 // Number of iterations
	let numField, numLbl // Declare our label and textfield to change the numbers
	function setup() {
	createCanvas(screenDim,screenDim); // Create our canvas for p5 to draw on
	#Imports
	from bokeh.plotting import figure
	from bokeh.io import curdoc

	#Bokeh's Line Chart requires two arrays for the X and Y values
	x = [1,2,3,4,5]
	y = [4,6,2,4,3]

	# Create a Figure - Bokeh's name for a basic plot ready to be graphed on
	p = figure(
	import './App.css';
	import * as d3 from 'd3' // Import D3
	import {useEffect} from 'react'

	function App() {

	useEffect(() => {
	/*
	This is going to run once when the App is first rendered.
	All of our D3 code, which will edit the elements on our DOM, will be put here.
	import './App.css';
	import * as d3 from 'd3'
	import {useEffect, useState} from 'react'

	function App() {

	useEffect(() => {

	// Create a dataset of pets and the amount of people that own them
	let dataSet = [
	#BarChart {
	display: flex;
	flex-direction: row; /* Arrange the Bars Horizontally using FlexBox */
	align-items: flex-end; /* Have the bars start at the bottom and go up */
	justify-content: center; /* Center the bars in the middle of the screen */
	margin: 50px;
	}

	.bar {
	background-color: #3aa70f; /* Have each bar be a nice green */