Ripple effect on scatter points

plotly.js
1

Hi all,

I am wondering if there is a way to add a ripple effect on scatter points as it is doing here: Examples - Apache ECharts ?
I didn’t find any similar example.

Thanks,
Alex

2

As far as I know, there is nothing built in. I remember two topics on the forums:

Not sure though if these are of help in your case.

1 Like
3

Thank you!!
With the help of ChatGPT, I made something that I wanted. Plot some scatter points with pulsing animation (similar to ripple effect). I plot again over the pulsing scatter points, to have a unique hover info per point. Here is the code (with plotly.js):

<!DOCTYPE html>
<html>
<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
  <div id="graph"></div>

  <script>

    // define the data
    var xx = [1,2,3,4,5];
    var yy = [1,5,6,9,5];
    
    // Define parameters for the raindrop effect
    var numRipples = 6;
    var initialOpacity = 0.2; // Initial opacity of smaller circles
    var opacityStep = initialOpacity / 2;
    var initialSize = 3; // Initial size of smaller circles
    var sizeStep = 6;
    var animationInterval = 60; // milliseconds

    // Create initial data for the main scatter plot
    var data = [{
      x: xx,
      y: yy,
      mode: 'markers',showlegend: false,
      marker: {
        size: initialSize,
        color: 'rgba(255, 0, 0, 1)',
        opacity: 1 // Opacity of main point
      }
    }];

    // Create additional scatter traces for the raindrop effect
    for (var i = 1; i <= numRipples; i++) {
      var opacity = initialOpacity * (numRipples - i + 1); // Decreasing opacity for smaller circles
      var size = initialSize * i; // Increasing size for smaller circles
      data.push({
        x: xx,
        y: yy,
        mode: 'markers',showlegend: false,hoverinfo:"skip",
        marker: {
          size: size,
          color: 'rgba(255, 0, 0, ' + opacity + ')',
          opacity: opacity
        }
      });
    }

    // Create layout options
    var layout = {
      width: 800,
      height: 600,

    };



    // Create the the scatter points with hover info
    var additionalSimpleData = [{
      x: xx, // X coordinates of additional points
      y: yy, // Y coordinates of additional points
      mode: 'markers',
      marker: {
        size: 10,
        color: 'rgba(255, 0, 0, 1)', // Color of additional points
        opacity: 1
      }
    }];

    // Combine initial data with additional scatter points
    var data = data.concat(data, additionalSimpleData);

    // Create the plot
    Plotly.newPlot('graph', data, layout);

    // Function to update the raindrop animation
    function updateAnimation() {
      var currentOpacity = initialOpacity;
      var currentSize = initialSize;

      // Update the size and opacity of each ripple
      var interval = setInterval(function() {
        currentOpacity -= opacityStep;
        currentSize += sizeStep;

        // Update the smaller scatter traces
        for (var i = 1; i <= numRipples; i++) {
          var opacity = currentOpacity * (numRipples - i + 1);
          var size = currentSize * i;
          Plotly.animate('graph', {
            data: [{
              x: xx,
              y: yy,
              mode: 'markers',showlegend: false,hoverinfo:"none",
              marker: {
                size: size,
                color: 'rgba(255, 0, 0, ' + opacity + ')',
                opacity: opacity
              }
            }]
          }, {
            transition: { duration: animationInterval / 1000 },
            frame: { duration: animationInterval, redraw: false }
          });
        }

        // Reset the opacity and size for the next cycle
        if (currentOpacity <= 0) {
          currentOpacity = initialOpacity;
          currentSize = initialSize;
        }
      }, animationInterval);
    }

    // Call the updateAnimation function to start the raindrop animation
    updateAnimation();
  </script>
</body>
</html>
2 Likes