# D3.js curveMonotoneY() Method

Last Updated : 02 Sep, 2020

The d3.curveMonotoneY interpolator assumes that the data is sorted according to the y coordinates otherwise it sorts the data accordingly. This curve method produces a cubic spline that preserves monotonicity in x, assuming monotonicity in y.

Syntax:

```d3.curveMonotoneY()
```

Parameters: This method does not accept any parameters.

Return Value: This method does not return any value.

Example 1:

## HTML

 ` ` `<``html``> ` `<``head``> ` `  ``<``script` `src``= ` `"https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"``> ` `  `` ` ` ` `<``body``> ` `  ``<``h1` `style="text-align: center; ` `             ``color: green;"> ` `    ``GeeksforGeeks ` `  `` ` `  ``<``center``> ` `    ``<``svg` `id``=``"gfg"` `width``=``"250"` `height``=``"250"``> ` `    `` ` `  `` ` `  ``<``script``> ` `    ``var data = [ ` `      ``{ x: 0, y: 0 }, ` `      ``{ x: 1, y: 3 }, ` `      ``{ x: 2, y: 15 }, ` `      ``{ x: 5, y: 1 }, ` `      ``{ x: 6, y: 15 }, ` `      ``{ x: 7, y: 5 }, ` `      ``{ x: 8, y: 19 }]; ` ` `  `    ``// Sorting the points by y axis ` `    ``data.sort((a, b) => a.y - b.y); ` ` `  `    ``var xScale = d3.scaleLinear() ` `        ``.domain([0, 8]) ` `        ``.range([25, 200]); ` `    ``var yScale = d3.scaleLinear() ` `        ``.domain([0, 20]) ` `        ``.range([200, 25]); ` ` `  `    ``var line = d3.line() ` `      ``.x((d) => xScale(d.x)) ` `      ``.y((d) => yScale(d.y)) ` `      ``.curve(d3.curveMonotoneY); ` ` `  `    ``d3.select("#gfg") ` `      ``.append("path") ` `      ``.attr("d", line(data)) ` `      ``.attr("fill", "none") ` `      ``.attr("stroke", "green"); ` `  `` ` ` ` ``

Output:

Example 2: Sorting the unsorted points by the x-axis then rendering the curve.

## HTML

 ` ` `<``html``> ` `<``head``> ` `  ``<``script` `src``= ` `"https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.2/d3.min.js"``> ` `  `` ` ` ` `<``body``> ` `  ``<``h1` `style="text-align: center;  ` `             ``color: green;"> ` `    ``GeeksforGeeks ` `  `` ` `  ``<``center``> ` `    ``<``svg` `id``=``"gfg"` `width``=``"250"` `height``=``"200"``> ` `    `` ` `  `` ` `  ``<``script``> ` `    ``var points = [ ` `      ``{ xpoint: 75, ypoint: 150 }, ` `      ``{ xpoint: 25, ypoint: 5 }, ` `      ``{ xpoint: 150, ypoint: 150 }, ` `      ``{ xpoint: 100, ypoint: 5 }, ` `      ``{ xpoint: 200, ypoint: 150 }]; ` ` `  `    ``// Sorting the points by y axis ` `    ``points.sort((a, b) => a.ypoint - b.ypoint); ` ` `  `    ``var Gen = d3.line() ` `      ``.x((p) => p.xpoint) ` `      ``.y((p) => p.ypoint) ` `      ``.curve(d3.curveMonotoneY); ` ` `  `    ``d3.select("#gfg") ` `      ``.append("path") ` `      ``.attr("d", Gen(points)) ` `      ``.attr("fill", "none") ` `      ``.attr("stroke", "green"); ` ` `  `  `` ` ` ` ``

Output:

Previous
Next