mrtriangle/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Tension</title>
		    <style>
    	body {
    font-family: "helvetica";
}

button {
    margin: 0 7px 0 0;
    background-color: #f5f5f5;
    border: 1px solid #dedede;
    border-top: 1px solid #eee;
    border-left: 1px solid #eee;

    font-size: 12px;
    line-height: 130%;
    text-decoration: none;
    font-weight: bold;
    color: #565656;
    cursor: pointer;
}

.single-bar {
    min-height: 1px;
    min-width: 30px;
    background-color: #4682b4;
    margin-right: 1px;
    font-size: 10px;
    color: #f0f8ff;
    text-align: center;
    width: 15px;
    display: inline-block;
}

.baseline {
    height: 1px;
    background-color: black;
}

.axis path, .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
}

.axis text {
    font: 10px sans-serif;
}

.axis .grid-line{
    stroke: black;
    shape-rendering: crispEdges;
    stroke-opacity: .2;
}

.line{
    fill: none;
    stroke: #000;
    stroke-width: 2;
}

.dot {
  fill: #fff;
  stroke: #000;
}

.area {
    stroke: none;
    fill: steelblue;
    fill-opacity: .2;
}

.pie text{
    fill: white;
    font-weight: bold;
}

.bubble{
    fill-opacity: .3;
}

.bar{
    stroke: none;
    fill: steelblue;
}

text {
    font-size: 11px;
    pointer-events: none;
}

text.parent {
    fill: steelblue;
}

circle {
    fill: #ccc;
    stroke: #999;
    pointer-events: all;
}

circle.parent {
    fill: steelblue;
    fill-opacity: .1;
    stroke: steelblue;
}

circle.parent:hover {
    stroke-width: .5px;
}

circle.child {
    pointer-events: none;
}
    </style>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    </head>
    <body>
		<script type="text/javascript">
		    var width = 500,
		        height = 375,
		        margin = 30,
		        duration = 500,
		        x = d3.scale.linear()
		            .domain([0, 10])
		            .range([margin, width - margin]),
		        y = d3.scale.linear()
		            .domain([0, 1])
		            .range([height - margin, margin]);

		    var data = d3.range(10).map(function(i){
		            return {x: i, y: (Math.sin(i * 3) + 1) / 2};
		        });

		    var svg = d3.select("body").append("svg");

		    svg.attr("height", height)
		        .attr("width", width);

		    renderAxes(svg);

		    render([1]);

		    function render(tension){
		        var line = d3.svg.line()
		                .interpolate("cardinal")
		                .x(function(d){return x(d.x);})
		                .y(function(d){return y(d.y);});

		        svg.selectAll("path.line")
		                .data(tension)
		            .enter()
		                .append("path")
		                .attr("class", "line");

		        svg.selectAll("path.line")
		                .data(tension) // <-A
		            .transition().duration(duration).ease("linear") // <-B
		            .attr("d", function(d){
		                return line.tension(d)(data); // <-C
		            });

		        svg.selectAll("circle")
		            .data(data)
		          .enter().append("circle")
		            .attr("class", "dot")
		            .attr("cx", function(d) { return x(d.x); })
		            .attr("cy", function(d) { return y(d.y); })
		            .attr("r", 4.5);
		    }

		    function renderAxes(svg){
		        var xAxis = d3.svg.axis()
		                .scale(d3.scale.linear().domain([0, 10]).range([0, quadrantWidth()]))
		                .orient("bottom");

		        var yAxis = d3.svg.axis()
		                .scale(d3.scale.linear().domain([0, 1]).range([quadrantHeight(), 0]))
		                .orient("left");

		        svg.append("g")
		            .attr("class", "axis")
		            .attr("transform", function(){
		                return "translate(" + xStart() + "," + yStart() + ")";
		            })
		            .call(xAxis);

		        svg.append("g")
		            .attr("class", "axis")
		            .attr("transform", function(){
		                return "translate(" + xStart() + "," + yEnd() + ")";
		            })
		            .call(yAxis);
		    }

		    function xStart(){
		        return margin;
		    }

		    function yStart(){
		        return height - margin;
		    }

		    function xEnd(){
		        return width - margin;
		    }

		    function yEnd(){
		        return margin;
		    }

		    function quadrantWidth(){
		        return width - 2 * margin;
		    }

		    function quadrantHeight(){
		        return height - 2 * margin;
		    }
		</script>

		<h4>Line Tension:</h4>
		<div class="control-group">
		    <button onclick="render([0])">0</button>
		    <button onclick="render([0.2])">0.2</button>
		    <button onclick="render([0.4])">0.4</button>
		    <button onclick="render([0.6])">0.6</button>
		    <button onclick="render([0.8])">0.8</button>
		    <button onclick="render([1])">1</button>
		</div>

		</body>

		</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Tension</title>
	<style>
	body {
	font-family: "helvetica";
	}

	button {
	margin: 0 7px 0 0;
	background-color: #f5f5f5;
	border: 1px solid #dedede;
	border-top: 1px solid #eee;
	border-left: 1px solid #eee;

	font-size: 12px;
	line-height: 130%;
	text-decoration: none;
	font-weight: bold;
	color: #565656;
	cursor: pointer;
	}

	.single-bar {
	min-height: 1px;
	min-width: 30px;
	background-color: #4682b4;
	margin-right: 1px;
	font-size: 10px;
	color: #f0f8ff;
	text-align: center;
	width: 15px;
	display: inline-block;
	}

	.baseline {
	height: 1px;
	background-color: black;
	}

	.axis path, .axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.axis text {
	font: 10px sans-serif;
	}

	.axis .grid-line{
	stroke: black;
	shape-rendering: crispEdges;
	stroke-opacity: .2;
	}

	.line{
	fill: none;
	stroke: #000;
	stroke-width: 2;
	}

	.dot {
	fill: #fff;
	stroke: #000;
	}

	.area {
	stroke: none;
	fill: steelblue;
	fill-opacity: .2;
	}

	.pie text{
	fill: white;
	font-weight: bold;
	}

	.bubble{
	fill-opacity: .3;
	}

	.bar{
	stroke: none;
	fill: steelblue;
	}

	text {
	font-size: 11px;
	pointer-events: none;
	}

	text.parent {
	fill: steelblue;
	}

	circle {
	fill: #ccc;
	stroke: #999;
	pointer-events: all;
	}

	circle.parent {
	fill: steelblue;
	fill-opacity: .1;
	stroke: steelblue;
	}

	circle.parent:hover {
	stroke-width: .5px;
	}

	circle.child {
	pointer-events: none;
	}
	</style>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	</head>
	<body>
	<script type="text/javascript">
	var width = 500,
	height = 375,
	margin = 30,
	duration = 500,
	x = d3.scale.linear()
	.domain([0, 10])
	.range([margin, width - margin]),
	y = d3.scale.linear()
	.domain([0, 1])
	.range([height - margin, margin]);

	var data = d3.range(10).map(function(i){
	return {x: i, y: (Math.sin(i * 3) + 1) / 2};
	});

	var svg = d3.select("body").append("svg");

	svg.attr("height", height)
	.attr("width", width);

	renderAxes(svg);

	render([1]);

	function render(tension){
	var line = d3.svg.line()
	.interpolate("cardinal")
	.x(function(d){return x(d.x);})
	.y(function(d){return y(d.y);});

	svg.selectAll("path.line")
	.data(tension)
	.enter()
	.append("path")
	.attr("class", "line");

	svg.selectAll("path.line")
	.data(tension) // <-A
	.transition().duration(duration).ease("linear") // <-B
	.attr("d", function(d){
	return line.tension(d)(data); // <-C
	});

	svg.selectAll("circle")
	.data(data)
	.enter().append("circle")
	.attr("class", "dot")
	.attr("cx", function(d) { return x(d.x); })
	.attr("cy", function(d) { return y(d.y); })
	.attr("r", 4.5);
	}

	function renderAxes(svg){
	var xAxis = d3.svg.axis()
	.scale(d3.scale.linear().domain([0, 10]).range([0, quadrantWidth()]))
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(d3.scale.linear().domain([0, 1]).range([quadrantHeight(), 0]))
	.orient("left");

	svg.append("g")
	.attr("class", "axis")
	.attr("transform", function(){
	return "translate(" + xStart() + "," + yStart() + ")";
	})
	.call(xAxis);

	svg.append("g")
	.attr("class", "axis")
	.attr("transform", function(){
	return "translate(" + xStart() + "," + yEnd() + ")";
	})
	.call(yAxis);
	}

	function xStart(){
	return margin;
	}

	function yStart(){
	return height - margin;
	}

	function xEnd(){
	return width - margin;
	}

	function yEnd(){
	return margin;
	}

	function quadrantWidth(){
	return width - 2 * margin;
	}

	function quadrantHeight(){
	return height - 2 * margin;
	}
	</script>

	<h4>Line Tension:</h4>
	<div class="control-group">
	<button onclick="render([0])">0</button>
	<button onclick="render([0.2])">0.2</button>
	<button onclick="render([0.4])">0.4</button>
	<button onclick="render([0.6])">0.6</button>
	<button onclick="render([0.8])">0.8</button>
	<button onclick="render([1])">1</button>
	</div>

	</body>

	</html>