Path benchmark

index.html

<div>
	<div class="delta">
		<label>delta</label>
    <input class="delta" type="range" min="1" max="100" value="50" />
		<output></output>
	</div>
	<div class="paths">
		<label>paths</label>
    <input type="range" min="1" max="100" value="10" />
		<output></output>
	</div>
</div>
<style>
.line {
  stroke: rgb(31, 119, 180);
  stroke-width: 2px;
  fill: none;
}
</style>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var width = 960,
		height = 600;

var line = d3.svg.line()
			.interpolate("monotone");


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

var delta = 50;
var paths = 10;

d3.select('.delta input')
	.on('change', function () { delta = this.value; render(); });

d3.select('.paths input')
	.on('change', function () { paths = this.value; render(); });

render();

function render() {
	d3.select('.delta output').text(delta);
	d3.select('.paths output').text(paths);
	renderPaths(createPaths(paths, delta));
}

function renderPaths(points) {
	svg.selectAll('path').remove();

	svg.selectAll('path')
		.data(points)
		.enter()
		.append('path')
		.attr('class', 'line')
		.attr('d', line);
}

function createPaths(count, delta) {
	var result, i, j, path, x, change;
	result = [];
	for (i = 0; i < count; i++) {
		path = [];
		x = Math.random() * height;
		for (j = 0; j < width; j+=10) {
			path.push([j, x]);
			change = Math.random() * delta;
			if (Math.random() > 0.5) {
				change = -change;
			}
			x += change;
			if (x < 0) {
				x = 10;
			} else if (x > height) {
				x = 450;
			}
		}
		result.push(path);
	}
	return result;
}
</script>