jmharkins/index.html

## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<head>
</head>
<body>
	<div id='chart'>
	</div>
<script src="https://d3js.org/d3.v4.js"></script>
<script type="text/javascript">
	function toDegrees (angle) {
	  return angle * (180 / Math.PI);
	}

	var width = 800
	var height = 500
	var svg = d3.select('#chart')
							.append('svg')
							.attr('width', width)
							.attr('height', height)
	var n_lines = 10
	var line_data = new Array(n_lines)
	var lines = svg.selectAll('.line')
								.data(line_data)
								.enter()
								.append('rect')
								.attr('class','line')
								.attr('y',10)
								.attr('x', function(d,i){
									return (i+1) * (width / (n_lines + 1)) - 2.5
								})
								.attr('width',5)
								.attr('height',100)
	// svg.on('mousemove',function(){
	svg.on('mousemove',function(){
		var mouse_coords = d3.mouse(this)
		// console.log(mouse_coords)
		d3.selectAll('.line')
			// .attr('fill','red')
			.attr('transform',function(d,i){
				var line_vertical = (i+1) * (width / (n_lines + 1)) + 2.5
				var dist_to_mouse = Math.sqrt(
															Math.pow(mouse_coords[0] - line_vertical,2)
															+ Math.pow(mouse_coords[1] + 125 - 60,2)
														)
				var dist_to_vertical = line_vertical - mouse_coords[0]
				var rot_y_origin = 60
				var rot_x_origin = line_vertical
				var rot_angle = toDegrees((Math.asin(dist_to_vertical / dist_to_mouse))).toString()
				// console.log(rot_angle)
				var ftransform = ('rotate(' + rot_angle + ' '
													+ rot_x_origin + ' '
													+ rot_y_origin + ')')
				return ftransform
			})
	})

</script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<head>
	</head>
	<body>
	<div id='chart'>
	</div>
	<script src="https://d3js.org/d3.v4.js"></script>
	<script type="text/javascript">
	function toDegrees (angle) {
	return angle * (180 / Math.PI);
	}

	var width = 800
	var height = 500
	var svg = d3.select('#chart')
	.append('svg')
	.attr('width', width)
	.attr('height', height)
	var n_lines = 10
	var line_data = new Array(n_lines)
	var lines = svg.selectAll('.line')
	.data(line_data)
	.enter()
	.append('rect')
	.attr('class','line')
	.attr('y',10)
	.attr('x', function(d,i){
	return (i+1) * (width / (n_lines + 1)) - 2.5
	})
	.attr('width',5)
	.attr('height',100)
	// svg.on('mousemove',function(){
	svg.on('mousemove',function(){
	var mouse_coords = d3.mouse(this)
	// console.log(mouse_coords)
	d3.selectAll('.line')
	// .attr('fill','red')
	.attr('transform',function(d,i){
	var line_vertical = (i+1) * (width / (n_lines + 1)) + 2.5
	var dist_to_mouse = Math.sqrt(
	Math.pow(mouse_coords[0] - line_vertical,2)
	+ Math.pow(mouse_coords[1] + 125 - 60,2)
	)
	var dist_to_vertical = line_vertical - mouse_coords[0]
	var rot_y_origin = 60
	var rot_x_origin = line_vertical
	var rot_angle = toDegrees((Math.asin(dist_to_vertical / dist_to_mouse))).toString()
	// console.log(rot_angle)
	var ftransform = ('rotate(' + rot_angle + ' '
	+ rot_x_origin + ' '
	+ rot_y_origin + ')')
	return ftransform
	})
	})

	</script>