Curved Trendline

plotly.js
1

I am trying to reproduce a graph based on an image, where the line is generated in between points like a trendline, but it requires to be curved. I’ve added the image for reference:

curba
curba1870×1205 84.1 KB

I have used the following code, but this only creates the curve directly on the intermediate points, instead of in between them (interpolated):

<div id="plotly_chart" style="width: 900px; height: 500px;"></div>
    <script>
      // Original data
      const original_x = [12.5, 25, 50, 100, 200, 300, 500]; // Presiune [kPa]
      const y_data = [0.0265, 0.0300, 0.0345, 0.0435, 0.0605, 0.0780, 0.1010]; // Deformare Specifica

      // Transform X data to evenly spaced positions
      const transformed_x = [0, 1, 2, 3, 4, 5, 6]; // Evenly spaced points for the X-axis

      // Define the data trace
      const trace = {
        x: transformed_x, // Use the transformed X-axis
        y: y_data,
        mode: 'lines+markers',
        name: 'Curba Compresiune-Tasare',
        line: { shape: 'spline', smoothing: 1.3, color: 'black' },
        marker: { size: 6, color: 'blue' }
      };

      // Define the layout
      const layout = {
        title: 'Curba Compresiune-Tasare',
        xaxis: {
          title: 'Presiune [kPa]',
          tickvals: transformed_x, // Position ticks at transformed X values
          ticktext: ['12.5', '25', '50', '100', '200', '300', '500'], // Display original values
          gridcolor: 'orange',
          zeroline: false
        },
        yaxis: {
          title: 'Deformare Specifica',
          autorange: 'reversed', // Reverse the vertical axis
          tickvals: [0.0, 0.02, 0.04, 0.06, 0.08, 0.10, 0.12],
          ticktext: ['0.0000', '0.0200', '0.0400', '0.0600', '0.0800', '0.1000', '0.1200'],
          gridcolor: 'blue',
          zeroline: false
        },
        plot_bgcolor: 'white', // Background color
        height: 500,
        width: 900
      };

      // Plot the chart
      Plotly.newPlot('plotly_chart', [trace], layout);
    </script>

My question is how do I change my code to match the smooth curve from the image. The curve starts and ends on the first and last coordinate points.

2

I got a bit closer with this variant, but the curve is still not arching as it should, and I am manually setting up the curve:

<div id="plotly_chart" style="width: 900px; height: 500px;"></div>
    <script>
      // Original data
      const original_x = [12.5, 25, 50, 100, 200, 300, 500]; // Presiune [kPa]
      const y_data = [0.0265, 0.0300, 0.0345, 0.0435, 0.0605, 0.0780, 0.1010]; // Deformare Specifica

      // Transform X data to evenly spaced positions
      const transformed_x = [0, 1, 2, 3, 4, 5, 6]; // Evenly spaced points for the X-axis

      // Points defining the curve (smooth arch between floating points)
      const curve_x = [0, 1, 2, 3, 4, 5, 6];
      const curve_y = [0.0265, 0.028, 0.035, 0.045, 0.055, 0.08, 0.1010];

      // Define the main trace with all points
      const trace_points = {
        x: transformed_x,
        y: y_data,
        mode: 'markers',
        name: 'Puncte flotante',
        marker: { size: 6, color: 'blue' }
      };

      // Define the smooth curve trace
      const trace_curve = {
        x: curve_x,
        y: curve_y,
        mode: 'lines',
        name: 'Curba între puncte',
        line: { shape: 'spline', smoothing: 1.3, color: 'red', width: 2 }
      };

      // Define the layout
      const layout = {
        title: 'Curba Compresiune-Tasare',
        xaxis: {
          title: 'Presiune [kPa]',
          tickvals: transformed_x, // Position ticks at transformed X values
          ticktext: ['12.5', '25', '50', '100', '200', '300', '500'], // Display original values
          gridcolor: 'orange',
          zeroline: false
        },
        yaxis: {
          title: 'Deformare Specifica',
          autorange: 'reversed', // Reverse the vertical axis
          tickvals: [0.0, 0.02, 0.04, 0.06, 0.08, 0.10, 0.12],
          ticktext: ['0.0000', '0.0200', '0.0400', '0.0600', '0.0800', '0.1000', '0.1200'],
          gridcolor: 'blue',
          zeroline: false
        },
        plot_bgcolor: 'white', // Background color
        height: 500,
        width: 900
      };

      // Plot the chart with both traces
      Plotly.newPlot('plotly_chart', [trace_points, trace_curve], layout);
    </script>