Blink the dot on scatter plot

plotly.js
1

Hi,
I have a scatter plot, and wish to put around animation to blink the dots continuously.
Can that be done?
Thanks.

2

Animating marker.opacity should do the trick. What have you tried so far?

3

Has anyone tried this? Please post some tips regarding blinking the last point to indicate the current position while plotting the location data.

4

Using angular-plotly module, when initializing my component and subscribing to my Observable data, I also subscribe to a rxjs timer function, to update the marker color every seconds. This is not the best…!!

I wish I could ‘id’ the only point marker I want to blink, to add this nice css class that does the blinking trick:

 .blinking {
    animation: blink 2s ease-in infinite;
  }

@keyframes blink {
  from, to { opacity: 1 }
  50% { opacity: 0 }
}

But it seems very complicated to access a point id (and to even set one?).

My current solution is (I removed unuseful info):

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Observable, timer, Subscription } from 'rxjs';
import { filter } from 'rxjs/operators';
import { PlotlyService } from 'angular-plotly.js';

@Component({
  selector: 'my-app',
  templateUrl: './my-app.html',
  styleUrls: ['./my-app.css']
})
export class MyApp implements OnInit, OnDestroy {

  public pos$: Observable<any>;                 // The positions to display on geo map
  private subscription: Subscription;
  private blinkingColor: string = "#995014";
  private initColor: string = "#f58020";
  private initSize: number = 20;
  public plotlyDivId: string = "satPosMap";
  public plotly: any;

  public data = [
    {
      type: "scattergeo",
      mode: "markers",
      text: [],             // Dedicated with only one element! text.length === lat.length === lon.length === 1!!
      lat: [],
      lon: [],
      marker: { color: this.initColor, size: this.initSize, symbol: "star-diamond" },
      ids: [],      // -> How to get to this id in css? Is it possible to even add a point id?
    },
  ];

  public layout = {
    geo: {
      projection: {
        type: 'orthographic',
      },
    },
    margin: { r: 0, t: 0, b: 0, l: 0 },
  };

  public graph = {
    data: this.data,
    layout: this.layout,
  };

  constructor(public plotlyService: PlotlyService) {
    this.plotly = plotlyService.getPlotly()
  }


  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }

  ngOnInit(): void {
    // Subscribing to the positions to display
    this.pos$.pipe(
      filter(pos => pos !== null),
    ).subscribe(pos => {
        // pos is only one element for this example
        this.data[0] = { ...this.data[0], lat: pos.lat, long: pos.lon, text: pos.time }
    });

    // Timer to update marker color for current sat pos. Not the best way...
    this.subscription = timer(0, 1000).subscribe( val => {
      // This timer fires every seconds.
      let color = val % 2 === 0 ? this.blinkingColor : this.initColor;
      this.plotly.then( func => {
        func.restyle(
          this.plotlyDivId,             // Plotly div id
          { 'marker.color': color },    // data update
          0                             // Trace index
        );
      });
    });
  }
}

<div class="row justify-content-center my-4">
  <div class="col-10" style="height: 600px">
    <plotly-plot
      [data]="graph.data"
      [layout]="graph.layout"
      [useResizeHandler]="true"
      [style]="{position: 'relative', width: '100%', height: '100%'}"
      [divId]="plotlyDivId">
    </plotly-plot>
  </div>
</div>

I tried to use frames and animations, but I couldn’t succeed in animating smoothly the last position point marker. My component updates the current position every minute, and it seemed tricky to addFrames and make them blink from one to an other continuously.