Andrew-Reid/funkyline.js

## funkyline.js
(function (global, factory) {
    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('d3')) :
    typeof define === 'function' && define.amd ? define(['exports', 'd3'], factory) :
    (global = global || self, factory(global.d3 = global.d3 || {}, global.d3$1));
}(this, function (exports, d3$1) { 'use strict';

    function funkyLine(context) {
        var referenceMargin = 10;
        var interval = 10;

        function line(context) {
            let custom = d3.curveLinear(context);
            custom._context = context;
            custom.point = function(x, y) {
                x = +x, y = +y;
                switch (this._point) {
                    case 0:
                        this._point = 1;
                        this._line ? this._context.lineTo(x, y) : this._context.moveTo(x, y);
                        this.x0 = x;
                        this.y0 = y;
                        break;
                    case 1:
                        this._point = 2;
                    default:
                        var dx = this.x0 - x;
                        var dy = this.y0 - y;
                        //var interval = 10;//referenceInterval;
                        var margin = referenceMargin;
                        var r = dx * dx + dy * dy;
                        r = Math.sqrt(r);
                        var number = Math.round((r - margin * 2) / interval);
                        if (number % 4 > 0) number -= number % 4;

                        margin = (r - number * interval) / 2;

                        var m = (y - this.y0) / (x - this.x0);
                        m = -1 / m;

                        var start = margin / r;
                        var percentage = (r - margin * 2) / r;

                        for (var i = 0; i < number; i++) {
                            var mag = Math.min(i / number, 1 - i / number) * 50;

                            var x1 = x * (i / number * percentage + start) + this.x0 * (1 - (i / number * percentage + start));
                            var y1 = y * (i / number * percentage + start) + this.y0 * (1 - (i / number * percentage + start));

                            if (m == Infinity || m == -Infinity) {
                                if (i % 2 == 0) this._context.lineTo(x1, y1 + mag);
                                else this._context.lineTo(x1, y1 - mag);
                            } else {
                                var k = mag / Math.sqrt(1 + (m * m));
                                if (i % 2 == 0) this._context.lineTo(x1 + k, y1 + (m * k));
                                else this._context.lineTo(x1 - k, y1 - (m * k));
                            }
                        }

                        var x1 = x * (1 - start) + this.x0 * (start);
                        var y1 = y * (1 - start) + this.y0 * (start);
                        this._context.lineTo(x1, y1);
                        this._context.lineTo(x, y);

                        this.x0 = x;
                        this.y0 = y;
                        break;
                }
            };
            return custom;
        }

        line.interval = function(_) {
            return arguments.length ? (interval = _, line) : interval;
        };
        line.margin = function(_) {
            return arguments.length ? (referenceMargin = _, line) : referenceMargin;
        };

        return line;
    }

    exports.funkyline = funkyLine;

    Object.defineProperty(exports, '__esModule', { value: true });

}));

## index.html
<!DOCTYPE html>
<html>
<body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="funkyline.js"></script>
<canvas width="960" height="500"></canvas>
<script>
var svg = d3.create("svg");

var canvas = d3.select("canvas")
var context = canvas.node().getContext("2d");

var line = d3.line()
  .curve(d3.funkyline().interval(10))
  .context(context);

var data1 = [[100,200],[300,200]];
var data2 = [[100,200],[860,200]];
var data = [data1,data2]

var circles = svg.selectAll(null)
  .data(data1)
  .enter()
  .append("circle")
  .attr("cx", function(d) { return d[0]; })
  .attr("cy", function(d) { return d[1] + 100; })
  .attr("r", 5);


context.beginPath();
line(data1);
context.stroke();

var j = 0;
function transition() {
	j++;
	circles
	  .data(data[j%2])
	  .filter(function(d,i) { return i == 1; })
	  .transition()
	  .attr("cx", function(d) { return d[0]; })
	  .tween("attr.anything", function(d) {
			var that = d3.select(this);
			var interpolate = j%2 ? d3.interpolateNumber(data1[1][0],data2[1][0]) : d3.interpolateNumber(data2[1][0],data1[1][0]);
			return function(t) {
				var datum =  [[100,300],[interpolate(t),300]];
				context.clearRect(0,0,960,500);
				context.beginPath();
				line(datum);
				context.stroke();

			}
	  })
	  .duration(2000)
	  .on("end",transition);
}

transition();

</script>
</body>
</html>
	(function (global, factory) {
	typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('d3')) :
	typeof define === 'function' && define.amd ? define(['exports', 'd3'], factory) :
	(global = global \|\| self, factory(global.d3 = global.d3 \|\| {}, global.d3$1));
	}(this, function (exports, d3$1) { 'use strict';

	function funkyLine(context) {
	var referenceMargin = 10;
	var interval = 10;

	function line(context) {
	let custom = d3.curveLinear(context);
	custom._context = context;
	custom.point = function(x, y) {
	x = +x, y = +y;
	switch (this._point) {
	case 0:
	this._point = 1;
	this._line ? this._context.lineTo(x, y) : this._context.moveTo(x, y);
	this.x0 = x;
	this.y0 = y;
	break;
	case 1:
	this._point = 2;
	default:
	var dx = this.x0 - x;
	var dy = this.y0 - y;
	//var interval = 10;//referenceInterval;
	var margin = referenceMargin;
	var r = dx * dx + dy * dy;
	r = Math.sqrt(r);
	var number = Math.round((r - margin * 2) / interval);
	if (number % 4 > 0) number -= number % 4;

	margin = (r - number * interval) / 2;

	var m = (y - this.y0) / (x - this.x0);
	m = -1 / m;

	var start = margin / r;
	var percentage = (r - margin * 2) / r;

	for (var i = 0; i < number; i++) {
	var mag = Math.min(i / number, 1 - i / number) * 50;

	var x1 = x * (i / number * percentage + start) + this.x0 * (1 - (i / number * percentage + start));
	var y1 = y * (i / number * percentage + start) + this.y0 * (1 - (i / number * percentage + start));

	if (m == Infinity \|\| m == -Infinity) {
	if (i % 2 == 0) this._context.lineTo(x1, y1 + mag);
	else this._context.lineTo(x1, y1 - mag);
	} else {
	var k = mag / Math.sqrt(1 + (m * m));
	if (i % 2 == 0) this._context.lineTo(x1 + k, y1 + (m * k));
	else this._context.lineTo(x1 - k, y1 - (m * k));
	}
	}

	var x1 = x * (1 - start) + this.x0 * (start);
	var y1 = y * (1 - start) + this.y0 * (start);
	this._context.lineTo(x1, y1);
	this._context.lineTo(x, y);

	this.x0 = x;
	this.y0 = y;
	break;
	}
	};
	return custom;
	}

	line.interval = function(_) {
	return arguments.length ? (interval = _, line) : interval;
	};
	line.margin = function(_) {
	return arguments.length ? (referenceMargin = _, line) : referenceMargin;
	};

	return line;
	}

	exports.funkyline = funkyLine;

	Object.defineProperty(exports, '__esModule', { value: true });

	}));
	<!DOCTYPE html>
	<html>
	<body>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
	<script src="funkyline.js"></script>
	<canvas width="960" height="500"></canvas>
	<script>
	var svg = d3.create("svg");

	var canvas = d3.select("canvas")
	var context = canvas.node().getContext("2d");

	var line = d3.line()
	.curve(d3.funkyline().interval(10))
	.context(context);

	var data1 = [[100,200],[300,200]];
	var data2 = [[100,200],[860,200]];
	var data = [data1,data2]

	var circles = svg.selectAll(null)
	.data(data1)
	.enter()
	.append("circle")
	.attr("cx", function(d) { return d[0]; })
	.attr("cy", function(d) { return d[1] + 100; })
	.attr("r", 5);


	context.beginPath();
	line(data1);
	context.stroke();

	var j = 0;
	function transition() {
	j++;
	circles
	.data(data[j%2])
	.filter(function(d,i) { return i == 1; })
	.transition()
	.attr("cx", function(d) { return d[0]; })
	.tween("attr.anything", function(d) {
	var that = d3.select(this);
	var interpolate = j%2 ? d3.interpolateNumber(data1[1][0],data2[1][0]) : d3.interpolateNumber(data2[1][0],data1[1][0]);
	return function(t) {
	var datum = [[100,300],[interpolate(t),300]];
	context.clearRect(0,0,960,500);
	context.beginPath();
	line(datum);
	context.stroke();

	}
	})
	.duration(2000)
	.on("end",transition);
	}

	transition();

	</script>
	</body>
	</html>