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
<!DOCTYPE html> <html> <head>   <script src=   </script> </head> <body>   <h1 style="text-align: center;              color: green;">     neveropen   </h1>   <center>     <svg id="gfg" width="250" height="250">     </svg>   </center>   <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");   </script> </body> </html> |
Output:
Example 2: Sorting the unsorted points by the x-axis then rendering the curve.
HTML
<!DOCTYPE html> <html> <head>   <script src=   </script> </head> <body>   <h1 style="text-align: center;              color: green;">     neveropen   </h1>   <center>     <svg id="gfg" width="250" height="200">     </svg>   </center>   <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");     </script> </body> </html> |
Output:
Whether you’re preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, neveropen Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we’ve already empowered, and we’re here to do the same for you. Don’t miss out – check it out now!
… [Trackback]
[…] Find More on that Topic: geeksforgeeks.org/d3-js-curvemonotoney-method-2/ […]