Complex number division

#Divide one complex number by another

<html>
<head>
	<title>Complex number division</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
	<style type="text/css">

body{
			font-family:sans-serif;
		}

.output{
			display: -webkit-box;
			display: -moz-box;
			display: -ms-flexbox;
			display: -moz-flex;
			display: -webkit-flex;
			display: flex;

-webkit-justify-content: start;
			justify-content: start;
			
			-webkit-align-items: center;
			align-items: center;

-webkit-flex-flow: wrap;
			flex-flow: wrap;
		}

.question{
	    	display: inline-block;
	    	width:130px;
	    }

.numerator{
	    	color: red;
	    	text-align: center;
	    }

#numerator-point{
	    	fill: red;
	    	stroke:#000;
	    	stroke-width:1px;
	    }

.denominator{
	    	color: #ffb000;
	    	border-top: 1px solid #000;
	    	text-align: center;
	    }

#denominator-point{
			fill: #ffb000;
	    	stroke:#000;
	    	stroke-width:1px;
	    }

.answer{
	    	padding-left: 30px;
	    	display: inline-table;
	    }

.axis{
	    	font-size: 10;
	    	stroke-opacity:0.2;
	    	-webkit-touch-callout: none;
		    -webkit-user-select: none;
		    -khtml-user-select: none;
		    -moz-user-select: none;
		    -ms-user-select: none;
		    user-select: none;
	    }

.domain{
			fill:none;
			stroke:#000;
		}
		.tick line{
			stroke:#000;
		}

.in-line{
			stroke:#000;
			stroke-width:1;
			stroke-dasharray:5, 5;
		}

.out-line{
			stroke:#000;
			stroke-width:1;
		}

.moveable{
			stroke-width: 1px;
			stroke:#000;
			cursor: pointer; 
			cursor: hand;
		}
	</style>
</head>
<body>
	<h1>Complex number division</h1>
	<div><p>Drag the red and orange circles around the <a href="https://en.wikipedia.org/wiki/Complex_plane">complex plane</a> to set the numerator/denominator.</p><p>The black circle is the answer.</p></div>
	<div class="content">
		<div class="output">
			<div class="question">
				<div class="numerator">a + bi</div>
				<div class="denominator">c + di</div>
			</div>
			<div class="answer">= <b>q + pi</b>
			</div>
		</div>
		<div class="complex-plane"></div>
		
	</div>
</body>
<script type="text/javascript">

var extent = 50,
	pointNumerator = {r:45,i:0}, 
	pointDenominator = {r:5, i:-5},
	width = 500, height = 500,
	margin = {top:10, left:10, bottom:10, right:10},
	plotWidth = width-(margin.left+margin.right),
	plotHeight = height-(margin.top+margin.bottom);

var drag = d3.behavior.drag()
	.on('drag', dragmove);

var scaleX = d3.scale.linear()
	.domain([-extent, +extent])
	.range([0, plotWidth]);

var scaleY = d3.scale.linear()
	.domain([extent, -extent])
	.range([0, plotWidth]);

var xAxis = d3.svg.axis().scale(scaleX)
				.orient('bottom');
var yAxis = d3.svg.axis().scale(scaleY)
				.orient('left');

var svg = d3.select('.complex-plane').append('svg')
	.attr({
		width:500,
		height:500
	})
	.append('g')
	.attr('transform','translate('+margin.left+','+margin.top+')');

svg.append('g').attr({
		'class':'x axis',
		'transform':'translate(0,'+plotWidth/2+')'
	}).call(xAxis);

svg.append('g').attr({
		'class':'y axis',
		'transform':'translate('+plotHeight/2+',0)'
	}).call(yAxis);

var lines = svg.append('g');
var points = svg.append('g');

update();

function update(){
	pointResult = complexDivision(pointNumerator, pointDenominator);

var pointsData = [
		{ p:pointNumerator, id:'numerator' },
		{ p:pointDenominator, id:'denominator' },
		{ p:pointResult, id:'result' }
	];

lines.selectAll('line').data(pointsData, function(d){return d.id})
		.enter()
			.append('line')
			.attr({
				'x1':scaleX(0),
				'y1':scaleY(0),
				'id': function(d){ return d.id + '-line'; },
				'class':function(d){ 
					if(d.id == 'result'){
						return 'out-line';
					} 
					return 'in-line';
				}
			});

lines.selectAll('line')
		.attr({
			'x2':function(d){ return scaleX(d.p.r); },
			'y2':function(d){ return scaleY(d.p.i); }
		});

points.selectAll('circle').data(pointsData, function(d){return d.id})
		.enter()
			.append('circle')
			.attr({
				'id':function(d){ return d.id + '-point'; },
				'r':7
			}).filter(function(d){
				return d.id != 'result';
			})
			.attr({
				'class':'moveable'
			})
			.call(drag);

points.selectAll('circle')
		.attr({
			'cx':function(d){ return scaleX(d.p.r); },
			'cy':function(d){ return scaleY(d.p.i); }
		});

d3.select('.numerator').text(complexString(pointNumerator));
	d3.select('.denominator').text(complexString(pointDenominator));
	d3.select('.answer').text(' = ' + complexString(pointResult))
}

//complex number stuff

function complexString(complex){
	return d3.round(complex.r, 2) + ' + ' + d3.round(complex.i, 2) + 'i';
}

function complexModulus(complex){ // or magnitude, norm
	return Math.sqrt( complex.i * complex.i + complex.r * complex.r );
}

function complexPhase(complex){ // or argument
	Math.arctan(complex.i / complex.r);
}

d3.select(self.frameElement).style("height", d3.select('.content').node().getBoundingClientRect().height + "px");

</script>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js