##Explanation The same five points of data are used to generate 12 charts. The block is to illustrate the effect of different interpolation methods, the .curve setting in D3 version 4. See: https://github.com/d3/d3-shape/blob/master/README.md#line_curve
Last active
October 9, 2017 04:09
-
-
Save emmasaunders/c25a147970def2b02d8c7c2719dc7502 to your computer and use it in GitHub Desktop.
Interpolation (v4)
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, by Emma Saunders at Viz Data Ltd. (UK)</title> | |
| <script type="text/javascript" src="http://d3js.org/d3.v4.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 = [d3.curveLinear,d3.curveStepBefore,d3.curveStepAfter,d3.curveBasis,d3.curveBasisOpen, d3.curveBasisClosed, d3.curveBundle,d3.curveCardinal,d3.curveCardinal,d3.curveCardinalOpen,d3.curveCardinalClosed,d3.curveNatural]; | |
| var interpolateNames = ['d3.curveLinear','d3.curveStepBefore','d3.curveStepAfter','d3.curveBasis','d3.curveBasisOpen', 'd3.curveBasisClosed', 'd3.curveBundle','d3.curveCardinal','d3.curveCardinal','d3.curveCardinalOpen','d3.curveCardinalClosed','d3.curveNatural']; | |
| var line0 = d3.line() | |
| .x(function(d) { return newX + (d.x * 5); }) | |
| .y(function(d) { return newY + baselineY - (d.y * 5); }) | |
| .curve(interpolateTypes[0]); | |
| var line1 = d3.line() | |
| .x(function(d) { return newX + (d.x * 5); }) | |
| .y(function(d) { return newY + baselineY - (d.y * 5); }) | |
| .curve(interpolateTypes[1]); | |
| var line2 = d3.line() | |
| .x(function(d) { return newX + (d.x * 5); }) | |
| .y(function(d) { return newY + baselineY - (d.y * 5); }) | |
| .curve(interpolateTypes[2]); | |
| var line3 = d3.line() | |
| .x(function(d) { return newX + (d.x * 5); }) | |
| .y(function(d) { return newY + baselineY - (d.y * 5); }) | |
| .curve(interpolateTypes[3]); | |
| var line4 = d3.line() | |
| .x(function(d) { return newX + (d.x * 5); }) | |
| .y(function(d) { return newY + baselineY - (d.y * 5); }) | |
| .curve(interpolateTypes[4]); | |
| var line5 = d3.line() | |
| .x(function(d) { return newX + (d.x * 5); }) | |
| .y(function(d) { return newY + baselineY - (d.y * 5); }) | |
| .curve(interpolateTypes[5]); | |
| var line6 = d3.line() | |
| .x(function(d) { return newX + (d.x * 5); }) | |
| .y(function(d) { return newY + baselineY - (d.y * 5); }) | |
| .curve(interpolateTypes[6]); | |
| var line7 = d3.line() | |
| .x(function(d) { return newX + (d.x * 5); }) | |
| .y(function(d) { return newY + baselineY - (d.y * 5); }) | |
| .curve(interpolateTypes[7]); | |
| var line8 = d3.line() | |
| .x(function(d) { return newX + (d.x * 5); }) | |
| .y(function(d) { return newY + baselineY - (d.y * 5); }) | |
| .curve(interpolateTypes[8]); | |
| var line9 = d3.line() | |
| .x(function(d) { return newX + (d.x * 5); }) | |
| .y(function(d) { return newY + baselineY - (d.y * 5); }) | |
| .curve(interpolateTypes[9]); | |
| var line10 = d3.line() | |
| .x(function(d) { return newX + (d.x * 5); }) | |
| .y(function(d) { return newY + baselineY - (d.y * 5); }) | |
| .curve(interpolateTypes[10]); | |
| var line11 = d3.line() | |
| .x(function(d) { return newX + (d.x * 5); }) | |
| .y(function(d) { return newY + baselineY - (d.y * 5); }) | |
| .curve(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(interpolateNames[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
d3.curveCardinal seems to be repeated. Is this intentional?