##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).
Last active
August 6, 2016 17:52
-
-
Save emmasaunders/f7178ed715a601c5b2c458a2c7093f78 to your computer and use it in GitHub Desktop.
d3 interpolate (v3)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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