D3 curve explorer

D3 curve explorer.

forked from d3indepth's block: D3 curve explorer

<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <title>D3 Curve Explorer</title>
</head>

<div class="sidebar">
  	<div class="header">D3 CURVE EXPLORER</div>
	  <div class="menu"></div>
	  <div class="info">
	  	<span class="default">The JavaScript library <a href="https://d3js.org">D3</a> provides a number of <a href="https://github.com/d3/d3-shape#curves">curve types</a> to interpolate (or approximate) a set of points. Toggle each of the curve types using the buttons above. You can also add/remove/drag the points to change the shape of the curve.</span>
  		<span class="text"></span>
	  </div>
	</div>

var lineGenerator = d3.line();

var categoryScale = d3.scaleOrdinal(d3.schemeCategory10);
function colorScale(d) {return d === 0 ? '#777' : categoryScale(d);}

var points = [ [50, 330], [75, 200], [280, 75], [300, 75], [475, 300], [600, 200] ];
var numActivePoints = points.length;

var drag = d3.drag()
	.on('drag', function(d, i) {
		points[i][0] = d3.event.x;
		points[i][1] = d3.event.y;
		update();
	});

function updateInfo(info) {
	d3.select('.info .default').style('display', info ? 'none' : 'inline');
	d3.select('.info .text').text(info);
}

function updateMenu() {
	var u = d3.select('.menu')
		.selectAll('div.item')
		.data(curveTypes);

u.enter()
		.append('div')
		.classed('item', true)
		.style('clear', function(d) { return d.clear ? 'left' : 'none'; })
		.text(function(d) { return d.name; })
		.on('click', function(d) {
			d.active = !d.active;
			update();
		})
		.on('mouseover', function(d) { updateInfo(d.info); })
		.on('mouseout', function() { updateInfo(''); })
		.merge(u)
		.style('background-color', function(d, i) { return d.active ? colorScale(i) : '#fff'; })
		.style('color', function(d, i) { return d.active ? 'white' : '#444'; });
}

function updatePointsMenu() {
	d3.select('.remove-point')
		.classed('active', numActivePoints > 2)
		.on('click', function() {
			if(numActivePoints <= 2) return;
			numActivePoints--;
			update();
		});

d3.select('.add-point')
		.classed('active', numActivePoints < points.length)
		.on('click', function() {
			if(numActivePoints >= points.length) return;
			numActivePoints++;
			update();
		});
}

function updateLines() {
	curveTypes.forEach(function(d) {
		if(!d.active) return;
		lineGenerator.curve(d.curve);
		d.lineString = lineGenerator(points.slice(0, numActivePoints));
	});

var u = d3.select('svg g')
		.selectAll('path')
		.data(curveTypes);

u.enter()
		.append('path')
		.merge(u)
		.style('stroke', function(d, i) { return colorScale(i); })
		.attr('d', function(d) { return d.lineString;	})
		.style('display', function(d) { return d.active ? 'inline' : 'none'; });
}

function updatePoints() {
	var u = d3.select('g')
		.selectAll('circle')
		.data(points.slice(0, numActivePoints));

u.enter()
		.append('circle')
		.attr('r', 4)
		.call(drag)
		.merge(u)
		.attr('cx', function(d) { return d[0];})
		.attr('cy', function(d) { return d[1];});

u.exit().remove();
}

function update() {
	updateMenu();
	updatePointsMenu();
	updateLines();
	updatePoints();
}

update();
  </script>
</body>
</html>

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