Skip to content

Instantly share code, notes, and snippets.

@emmasaunders emmasaunders/index.html
Last active Aug 6, 2016

Embed
What would you like to do?
d3 interpolate (v3)

##Explanation If viewing on gist, graphic is available as a d3 block on interpolate. Each chart plots the same data array. Datapoints are shown by circles. Different d3 interpolation methods are applied to the paths (line).

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Interpolation methods in d3.js</title>
<script type="text/javascript" src="https://d3js.org/d3.v2.js"></script>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
g.group0 circle {
fill: red;
}
g.group1 circle {
fill: blue;
}
g.group2 circle {
fill: orange;
}
g.group3 circle {
fill: purple;
}
g.group4 circle {
fill: aqua;
}
g.group5 circle {
fill: brown;
}
g.group6 circle {
fill: green;
}
g.group7 circle {
fill: darksalmon;
}
g.group8 circle {
fill: fuchsia;
}
g.group9 circle {
fill: gold;
}
g.group10 circle {
fill: greenyellow;
}
</style>
</head>
<body>
<script type="text/javascript" src="interpolate.js"></script>
</body>
</html>
var dataArray = [{x:5, y:5},{x:10, y:15},{x:20, y:7},{x:30, y:18},{x:40, y:10}];
var svg = d3.select("body").append("svg").attr("height","100%").attr("width","100%");
var interpolateTypes = ['linear','step-before','step-after','basis','basis-open','basis-closed','bundle','cardinal','cardinal-open','cardinal-closed','monotone'];
var line0 = d3.svg.line()
.x(function(d) { return newX + (d.x * 5); })
.y(function(d) { return newY + baselineY - (d.y * 5); })
.interpolate(interpolateTypes[0]);
var line1 = d3.svg.line()
.x(function(d) { return newX + (d.x * 5); })
.y(function(d) { return newY + baselineY - (d.y * 5); })
.interpolate(interpolateTypes[1]);
var line2 = d3.svg.line()
.x(function(d) { return newX + (d.x * 5); })
.y(function(d) { return newY + baselineY - (d.y * 5); })
.interpolate(interpolateTypes[2]);
var line3 = d3.svg.line()
.x(function(d) { return newX + (d.x * 5); })
.y(function(d) { return newY + baselineY - (d.y * 5); })
.interpolate(interpolateTypes[3]);
var line4 = d3.svg.line()
.x(function(d) { return newX + (d.x * 5); })
.y(function(d) { return newY + baselineY - (d.y * 5); })
.interpolate(interpolateTypes[4]);
var line5 = d3.svg.line()
.x(function(d) { return newX + (d.x * 5); })
.y(function(d) { return newY + baselineY - (d.y * 5); })
.interpolate(interpolateTypes[5]);
var line6 = d3.svg.line()
.x(function(d) { return newX + (d.x * 5); })
.y(function(d) { return newY + baselineY - (d.y * 5); })
.interpolate(interpolateTypes[6]);
var line7 = d3.svg.line()
.x(function(d) { return newX + (d.x * 5); })
.y(function(d) { return newY + baselineY - (d.y * 5); })
.interpolate(interpolateTypes[7]);
var line8 = d3.svg.line()
.x(function(d) { return newX + (d.x * 5); })
.y(function(d) { return newY + baselineY - (d.y * 5); })
.interpolate(interpolateTypes[8]);
var line9 = d3.svg.line()
.x(function(d) { return newX + (d.x * 5); })
.y(function(d) { return newY + baselineY - (d.y * 5); })
.interpolate(interpolateTypes[9]);
var line10 = d3.svg.line()
.x(function(d) { return newX + (d.x * 5); })
.y(function(d) { return newY + baselineY - (d.y * 5); })
.interpolate(interpolateTypes[10]);
var line11 = d3.svg.line()
.x(function(d) { return newX + (d.x * 5); })
.y(function(d) { return newY + baselineY - (d.y * 5); })
.interpolate(interpolateTypes[11]);
var newX = -270;
var newY = 20;
var baselineY = 100;
var chartWidth = 280;
var chartHeight = 130;
for (p=0; p<interpolateTypes.length; p++) {
if (newX+chartWidth > 960) {
newX = 10;
newY += chartHeight;
} else {
newX += chartWidth;
}
var group = svg.append("g").attr("class","group"+p);
group.selectAll("circle.dots"+p)
.data(dataArray)
.enter()
.append("circle")
.attr("class","dots"+p)
.attr("cx", function(d,i) { return (d.x * 5) + newX; } )
.attr("cy", function(d,i) { return newY + baselineY - (d.y * 5); } )
.attr("r", 5);
group.append("text")
.attr("text-anchor","middle")
.attr("x",function(d,i){ return newX + 100; })
.attr("y", newY + 100)
.text(interpolateTypes[p]);
group.append("path")
.style("fill","none")
.style("stroke","black")
.style("stroke-width","4px")
.attr("d",function(d,i){ return window['line'+p](dataArray); });
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.