Changing line tension

If Cardinal interpolation mode (cardinal, cardinal-open, or cardinal-closed) is used, then the line can be further modified using tension settings. In this recipe, you will see how tension can be modified and its effect on line interpolation.

Getting ready

Open your local copy of the following file in your web browser:

https://github.com/NickQiZhu/d3-cookbook-v2/blob/master/src/chapter7/line-tension.html

How to do it...

Now, let's take a look at how line tension can be changed and what effect it has on line generation:

<script type="text/javascript"> 
    var width = 500, 
        height = 500, 
        margin = 30, 
        duration = 500,     
        x = d3.scaleLinear() 
            .domain([0, 10]) 
            .range([margin, width - margin]), 
        y = d3.scaleLinear() 
            .domain([0, 1]) 
            .range([height - margin, margin]); 
 
var data = d3.range(10).map(function(i){ 
...