index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.line { fill: none; stroke: steelblue; stroke-width: 1.5px; }
</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
function Complex(re, im) { this.re = re; this.im = im; };
Complex.prototype.clone = function(){ return new Complex(this.re,this.im); };
Complex.prototype.add = function(z) { this.re += z.re; this.im += z.im; return this; };
Complex.prototype.sub = function(z) { this.re -= z.re; this.im -= z.im; return this; };
Complex.prototype.mul = function(z)
{
var tmp = this.re;
this.re = this.re*z.re - this.im*z.im;
this.im = tmp*z.im + this.im*z.re;
return this;
};
Complex.prototype.div = function(z)
{
var tmp = this.re,
n = z.re*z.re + z.im*z.im;
this.re = (this.re*z.re + this.im*z.im)/n;
this.im = ( -tmp*z.im + this.im*z.re)/n;
return this;
};
var width = 960, height = 500;
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
var x = d3.scale.linear()
.range( [ 0, width])
.domain([-1, 3]);
var y = d3.scale.linear()
.range( [height, 0])
.domain([ -2, 2]);
var xAxis = d3.svg.axis().scale(x).orient("bottom");
var yAxis = d3.svg.axis().scale(y).orient("left");
var line = d3.svg.line()
.x(function(d) { return x(d.re); })
.y(function(d) { return y(d.im); });
var data = d3.range(0,1,0.02).map(function(r){
return d3.range(-Math.PI,Math.PI,Math.PI/50).map(function(p){
return new Complex(r*Math.cos(p)-0.2,r*Math.sin(p)+0.2);})})
data.forEach(function(d){d.forEach(function(z) {z.add((new Complex(1,0)).div(z));})});
svg.selectAll('path').data(data).enter().append('path').attr('class','line').attr('d',line);
</script>
</body>