Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active Nov 22, 2016
Embed
What would you like to do?
Line Tension
license: gpl-3.0
x y
0 0.5
0.1111111111111111 0.9546487134128409
0.2222222222222222 0.1215987523460359
0.3333333333333333 0.36029225090053707
0.4444444444444444 0.994679123311691
0.5555555555555556 0.2279894445553151
0.6666666666666666 0.23171354099978253
0.7777777777777778 0.9953036778474351
0.8888888888888888 0.35604834166746735
1 0.12450637661416192
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.axis text {
font: 10px sans-serif;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.line {
fill: none;
stroke-width: 1.5px;
}
.dot {
fill: #fff;
stroke: #000;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 40, right: 40, bottom: 40, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.linear()
.domain([0, 1])
.range([0, width]);
var y = d3.scale.linear()
.domain([0, 1])
.range([height, 0]);
var z = d3.scale.linear()
.domain([2 / 3, 1]) // D3 3.x tension is buggy!
.range(["brown", "steelblue"]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.interpolate("cardinal")
.x(function(d) { return x(d.x); })
.y(function(d) { return y(d.y); });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.tsv("data.tsv", type, function(error, data) {
if (error) throw error;
svg.append("g")
.attr("class", "axis axis--x")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "axis axis--y")
.call(yAxis);
svg.selectAll(".line")
.data(z.ticks(6))
.enter().append("path")
.attr("class", "line")
.attr("d", function(d) { return line.tension(d)(data); })
.style("stroke", z);
svg.selectAll(".dot")
.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", 3.5);
});
function type(d) {
d.x = +d.x;
d.y = +d.y;
return d;
}
</script>
@pembeci
Copy link

pembeci commented Jan 5, 2016

The corresponding block is not working. Either I am missing something or data.tsv is missing.

@iblind
Copy link

iblind commented Jan 18, 2016

Nope, pretty sure data.tsv is missing on this one

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment