bhvaleri/index.html

## index.html
<!DOCTYPE html>

<html>
	<head>
		<title>Wall of Clocks 2</title>
		<script src="https://d3js.org/d3.v4.min.js"></script>
	</head>
	<body>
		<script>
			const margin = { top: 0, right: 0, bottom: 0, left: 0 };

			const startingWindowWidth = window.innerWidth,
						startingWindowHeight = window.innerHeight;

			const width = startingWindowWidth - margin.left - margin.right,
						height = startingWindowHeight - margin.top - margin.bottom;

			const svg = d3.select('body').append('svg')
				.attr('width', width + margin.left + margin.right)
				.attr('height', height + margin.top + margin.bottom);

			const clocksGroup = svg.append('g')
					.attr('transform', `translate(${margin.left},${margin.top})`);

			// const radius = width / 4;
			const x1 = 0;
			const y1 = 0;
			const strokeWidth = 4;

			function secondsToLine(seconds, radius) {
				// each second gets 6 degrees
				// force clock wise

				// ask Colin why this works?
				const angle = -((seconds * (2 * Math.PI) / 60) - (Math.PI / 2));

				return {
					x2: Math.cos(angle) * radius,
					y2: -(Math.sin(angle) * radius)
				}
			}

			let clockCounter = 0;

			function addClock(startingSeconds, startingMinutes, radius, translateX, translateY) {
				const clock = clocksGroup.append('g').attr('transform', `translate(${translateX},${translateY})`);

				clock.append('circle')
					.attr('cx', x1)
					.attr('cy', y1)
					.attr('r', radius)
					.style('fill', 'none')
					.style('stroke-width', strokeWidth)
					.style('stroke', 'black');

				const startingSecondsCoordinates = secondsToLine(startingSeconds, radius);

				const secondHandClassName = `second-hand-${clockCounter}`;

				const minuteHandClassName = `minute-hand-${clockCounter}`;

				clockCounter++;

				const secondHand = clock.append('line')
					.attr('class', `second-hand ${secondHandClassName}`)
					.attr('x1', x1)
					.attr('x2', startingSecondsCoordinates.x2)
					.attr('y1', y1)
					.attr('y2', startingSecondsCoordinates.y2)
					.style('stroke', 'black')
					.style('stroke-width', strokeWidth);

				let secondCount = startingSeconds;

				setInterval(() => {
					secondCount = (secondCount + 1) % 60;
					const newCoordinates = secondsToLine(secondCount, radius);

					d3.select(`.${secondHandClassName}`)
						.transition()
						.attr('x2', newCoordinates.x2)
						.attr('y2', newCoordinates.y2);

				}, 100)

				const startingMinutesCoordinates = secondsToLine(startingSeconds, radius);

				const minuteHand = clock.append('line')
					.attr('class', `minute-hand ${minuteHandClassName}`)
					.attr('x1', x1)
					.attr('x2', startingMinutesCoordinates.x2)
					.attr('y1', y1)
					.attr('y2', startingMinutesCoordinates.y2)
					.style('stroke', 'black')
					.style('stroke-width', strokeWidth);

				let minuteCount = startingMinutes;

				setInterval(() => {
					minuteCount = (minuteCount + 1) % 60;
					const newCoordinates = secondsToLine(minuteCount, radius);

					d3.select(`.${minuteHandClassName}`)
						.transition()
						.attr('x2', newCoordinates.x2)
						.attr('y2', newCoordinates.y2);

				}, 300)


			};

			const circleRadius = 50;

			// lets create a grid!

			const gridDimensions = {
				m: Math.floor(width / (circleRadius * 2)),
				n: Math.floor(height / (circleRadius * 2))
			}

			let startingSeconds = 0;
			let startingMinutes = 0;
			for(let i = 0; i < gridDimensions.m; i++) {
				for(let j = 0; j < gridDimensions.n; j++) {
					addClock(startingSeconds++, startingMinutes++, circleRadius, (circleRadius*2*i) + circleRadius, (circleRadius*2*j) + circleRadius);
				}
			}
		</script>
	</body>
</html>
	<!DOCTYPE html>

	<html>
	<head>
	<title>Wall of Clocks 2</title>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	</head>
	<body>
	<script>
	const margin = { top: 0, right: 0, bottom: 0, left: 0 };

	const startingWindowWidth = window.innerWidth,
	startingWindowHeight = window.innerHeight;

	const width = startingWindowWidth - margin.left - margin.right,
	height = startingWindowHeight - margin.top - margin.bottom;

	const svg = d3.select('body').append('svg')
	.attr('width', width + margin.left + margin.right)
	.attr('height', height + margin.top + margin.bottom);

	const clocksGroup = svg.append('g')
	.attr('transform', `translate(${margin.left},${margin.top})`);

	// const radius = width / 4;
	const x1 = 0;
	const y1 = 0;
	const strokeWidth = 4;

	function secondsToLine(seconds, radius) {
	// each second gets 6 degrees
	// force clock wise

	// ask Colin why this works?
	const angle = -((seconds * (2 * Math.PI) / 60) - (Math.PI / 2));

	return {
	x2: Math.cos(angle) * radius,
	y2: -(Math.sin(angle) * radius)
	}
	}

	let clockCounter = 0;

	function addClock(startingSeconds, startingMinutes, radius, translateX, translateY) {
	const clock = clocksGroup.append('g').attr('transform', `translate(${translateX},${translateY})`);

	clock.append('circle')
	.attr('cx', x1)
	.attr('cy', y1)
	.attr('r', radius)
	.style('fill', 'none')
	.style('stroke-width', strokeWidth)
	.style('stroke', 'black');

	const startingSecondsCoordinates = secondsToLine(startingSeconds, radius);

	const secondHandClassName = `second-hand-${clockCounter}`;

	const minuteHandClassName = `minute-hand-${clockCounter}`;

	clockCounter++;

	const secondHand = clock.append('line')
	.attr('class', `second-hand ${secondHandClassName}`)
	.attr('x1', x1)
	.attr('x2', startingSecondsCoordinates.x2)
	.attr('y1', y1)
	.attr('y2', startingSecondsCoordinates.y2)
	.style('stroke', 'black')
	.style('stroke-width', strokeWidth);

	let secondCount = startingSeconds;

	setInterval(() => {
	secondCount = (secondCount + 1) % 60;
	const newCoordinates = secondsToLine(secondCount, radius);

	d3.select(`.${secondHandClassName}`)
	.transition()
	.attr('x2', newCoordinates.x2)
	.attr('y2', newCoordinates.y2);

	}, 100)

	const startingMinutesCoordinates = secondsToLine(startingSeconds, radius);

	const minuteHand = clock.append('line')
	.attr('class', `minute-hand ${minuteHandClassName}`)
	.attr('x1', x1)
	.attr('x2', startingMinutesCoordinates.x2)
	.attr('y1', y1)
	.attr('y2', startingMinutesCoordinates.y2)
	.style('stroke', 'black')
	.style('stroke-width', strokeWidth);

	let minuteCount = startingMinutes;

	setInterval(() => {
	minuteCount = (minuteCount + 1) % 60;
	const newCoordinates = secondsToLine(minuteCount, radius);

	d3.select(`.${minuteHandClassName}`)
	.transition()
	.attr('x2', newCoordinates.x2)
	.attr('y2', newCoordinates.y2);

	}, 300)


	};

	const circleRadius = 50;

	// lets create a grid!

	const gridDimensions = {
	m: Math.floor(width / (circleRadius * 2)),
	n: Math.floor(height / (circleRadius * 2))
	}

	let startingSeconds = 0;
	let startingMinutes = 0;
	for(let i = 0; i < gridDimensions.m; i++) {
	for(let j = 0; j < gridDimensions.n; j++) {
	addClock(startingSeconds++, startingMinutes++, circleRadius, (circleRadius2i) + circleRadius, (circleRadius2j) + circleRadius);
	}
	}
	</script>
	</body>
	</html>