KKostya · December 20, 2015 00:18
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>
 svg { font: 10px sans-serif; }
 .brsh .extent { fill: steelblue; stroke: grey; stroke-width: 0.5px; fill-opacity: .125;}
 .brsh .back   { fill: none; stroke: black; stroke-width: 1px;}
 .line         { fill: none; stroke: black; stroke-width: 1px; }
 .axis         { fill: none; stroke: black; }
 </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);

    svg.append("clipPath")
       .attr("id","clip")
       .append("rect")
            .attr("x",0).attr("y",0)
            .attr("width",width/2).attr("height",height);


    var mapd = svg.append("g").attr("class","mapd").attr("clip-path","url(#clip)");

    var brsh = svg.append("g").attr("class","brsh")
                              .attr("transform","translate("+width/2+")");

    var brsb = brsh.append("g");
 
    var x1 = d3.scale.linear().range([0, width/2]).domain([-3, 3]);
    var y1 = d3.scale.linear().range([ height, 0]).domain([-3, 3]);
    var x2 = d3.scale.linear().range([0, width/2]).domain([-3, 3]);
    var y2 = d3.scale.linear().range([ height, 0]).domain([-3, 3]);

    mapd.append("g").attr("class","axis")
        .attr("transform","translate(0,"+height/2+")")
        .call(d3.svg.axis().scale(x1).orient("bottom"));

    mapd.append("g").attr("class","axis")
        .attr("transform","translate("+width/4+")")
        .call(d3.svg.axis().scale(y1).orient("left")); 

    brsh.append("g").attr("class","axis")
        .attr("transform","translate(0,"+height/2+")")
        .call(d3.svg.axis().scale(x2).orient("bottom"));

    brsh.append("g").attr("class","axis")
        .attr("transform","translate("+width/4+")")
        .call(d3.svg.axis().scale(y2).orient("left"));

    var line1 = d3.svg.line()
                      .x(function(d) { return x1(d.re); })
                      .y(function(d) { return y1(d.im); });

    var line2 = d3.svg.line()
                      .x(function(d) { return x2(d.re); })
                      .y(function(d) { return y2(d.im); });

    var brush = d3.svg.brush().x(x2).y(y2).on("brush", plot);    

    brsh.append("rect").attr("class","back")
                       .attr("width",width/2)
                       .attr("height",height);

    brsh.call(brush);

    function plines(sel,data, f)
    {
        var paths = sel.selectAll('.line').data(data);
        paths.enter().append('path').attr('class','line');
        paths.attr('d',f);
        paths.exit().remove();
    }


    function f(z) { return z.add((new Complex(1,0)).div(z)) }

    function resample(func,eps)
    {

        function dist(z0,z,z1)
        {
            var dx10 = z1.re-z0.re, dy10 = z1.im-z0.im;
            var dx0  =  z.re-z0.re,  dy0 =  z.im-z0.im;
            return Math.pow(dx10*dy0-dy10*dx0,2)/(dx0*dx0+dy0*dy0);
        }

        var ps = d3.range(-Math.PI,Math.PI,Math.PI/8);

        function refStep(dat)
        {
            for(var i = 0; i < dat.length; i++)
            {
                var p0 = dat[i], p1 = dat[i+1<dat.length?i+1:0];
                var newp = (p0+p1)/2;
                if( p1-p0 >= Math.PI || p1-p0 <= -Math.PI ) newp += Math.PI;
                if(dist(func(p0),func(newp),func(p1)) > eps) dat.splice(++i,0,newp);
            }
        }

        refStep(ps);
        refStep(ps);
        refStep(ps);
        refStep(ps);
        refStep(ps);

        return ps.map(func);
    }

    function plot()
    { 
        if(brush.empty()) return;
        ext = brush.extent();
        
        var x0 = (ext[1][0] + ext[0][0])/2;
        var y0 = (ext[1][1] + ext[0][1])/2;
        var dx = (ext[1][0] - ext[0][0])/2;
        var dy = (ext[1][1] - ext[0][1])/2;
        
        var data = d3.range(1/20,1,1/20).map(function(r){
            var parametric = function(t){return f(new Complex(x0+r*dx*Math.cos(t),y0+r*dy*Math.sin(t)));}
            return resample(parametric,0.0001);});

        plines(brsb, 
               d3.range(1/20,1,1/20).map(function(r){ 
                    return d3.range(-Math.PI,Math.PI,Math.PI/20).map(function(p){
                        return new Complex(x0+r*dx*Math.cos(p),y0+r*dy*Math.sin(p))})}),
        function(d){return line2(d)+'Z';});

        plines(mapd,data,function(d){return line1(d)+'Z';});
    }

 </script>
 </body>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>
	svg { font: 10px sans-serif; }
	.brsh .extent { fill: steelblue; stroke: grey; stroke-width: 0.5px; fill-opacity: .125;}
	.brsh .back { fill: none; stroke: black; stroke-width: 1px;}
	.line { fill: none; stroke: black; stroke-width: 1px; }
	.axis { fill: none; stroke: black; }
	</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.rez.re - this.imz.im;
	this.im = tmpz.im + this.imz.re;
	return this;
	};

	Complex.prototype.div = function(z)
	{
	var tmp = this.re,
	n = z.rez.re + z.imz.im;
	this.re = (this.rez.re + this.imz.im)/n;
	this.im = ( -tmpz.im + this.imz.re)/n;
	return this;
	};



	var width = 960, height = 500;


	var svg = d3.select("body")
	.append("svg")
	.attr("width", width)
	.attr("height", height);

	svg.append("clipPath")
	.attr("id","clip")
	.append("rect")
	.attr("x",0).attr("y",0)
	.attr("width",width/2).attr("height",height);


	var mapd = svg.append("g").attr("class","mapd").attr("clip-path","url(#clip)");

	var brsh = svg.append("g").attr("class","brsh")
	.attr("transform","translate("+width/2+")");

	var brsb = brsh.append("g");

	var x1 = d3.scale.linear().range([0, width/2]).domain([-3, 3]);
	var y1 = d3.scale.linear().range([ height, 0]).domain([-3, 3]);
	var x2 = d3.scale.linear().range([0, width/2]).domain([-3, 3]);
	var y2 = d3.scale.linear().range([ height, 0]).domain([-3, 3]);

	mapd.append("g").attr("class","axis")
	.attr("transform","translate(0,"+height/2+")")
	.call(d3.svg.axis().scale(x1).orient("bottom"));

	mapd.append("g").attr("class","axis")
	.attr("transform","translate("+width/4+")")
	.call(d3.svg.axis().scale(y1).orient("left"));

	brsh.append("g").attr("class","axis")
	.attr("transform","translate(0,"+height/2+")")
	.call(d3.svg.axis().scale(x2).orient("bottom"));

	brsh.append("g").attr("class","axis")
	.attr("transform","translate("+width/4+")")
	.call(d3.svg.axis().scale(y2).orient("left"));

	var line1 = d3.svg.line()
	.x(function(d) { return x1(d.re); })
	.y(function(d) { return y1(d.im); });

	var line2 = d3.svg.line()
	.x(function(d) { return x2(d.re); })
	.y(function(d) { return y2(d.im); });

	var brush = d3.svg.brush().x(x2).y(y2).on("brush", plot);

	brsh.append("rect").attr("class","back")
	.attr("width",width/2)
	.attr("height",height);

	brsh.call(brush);

	function plines(sel,data, f)
	{
	var paths = sel.selectAll('.line').data(data);
	paths.enter().append('path').attr('class','line');
	paths.attr('d',f);
	paths.exit().remove();
	}


	function f(z) { return z.add((new Complex(1,0)).div(z)) }

	function resample(func,eps)
	{

	function dist(z0,z,z1)
	{
	var dx10 = z1.re-z0.re, dy10 = z1.im-z0.im;
	var dx0 = z.re-z0.re, dy0 = z.im-z0.im;
	return Math.pow(dx10dy0-dy10dx0,2)/(dx0dx0+dy0dy0);
	}

	var ps = d3.range(-Math.PI,Math.PI,Math.PI/8);

	function refStep(dat)
	{
	for(var i = 0; i < dat.length; i++)
	{
	var p0 = dat[i], p1 = dat[i+1<dat.length?i+1:0];
	var newp = (p0+p1)/2;
	if( p1-p0 >= Math.PI \|\| p1-p0 <= -Math.PI ) newp += Math.PI;
	if(dist(func(p0),func(newp),func(p1)) > eps) dat.splice(++i,0,newp);
	}
	}

	refStep(ps);
	refStep(ps);
	refStep(ps);
	refStep(ps);
	refStep(ps);

	return ps.map(func);
	}

	function plot()
	{
	if(brush.empty()) return;
	ext = brush.extent();

	var x0 = (ext[1][0] + ext[0][0])/2;
	var y0 = (ext[1][1] + ext[0][1])/2;
	var dx = (ext[1][0] - ext[0][0])/2;
	var dy = (ext[1][1] - ext[0][1])/2;

	var data = d3.range(1/20,1,1/20).map(function(r){
	var parametric = function(t){return f(new Complex(x0+rdxMath.cos(t),y0+rdyMath.sin(t)));}
	return resample(parametric,0.0001);});

	plines(brsb,
	d3.range(1/20,1,1/20).map(function(r){
	return d3.range(-Math.PI,Math.PI,Math.PI/20).map(function(p){
	return new Complex(x0+rdxMath.cos(p),y0+rdyMath.sin(p))})}),
	function(d){return line2(d)+'Z';});

	plines(mapd,data,function(d){return line1(d)+'Z';});
	}

	</script>
	</body>