Handling changing and/or real-time data about data2viz HOT 4 CLOSED

Thank you, that helped me to find a good solution with some tinkering :) Using Compose doesn't change anything from the perspective of the inner View, so this approach works perfectly fine.

from data2viz.

There is no reason to recreate the view.

You can modify the elements and then call viz.render().

If you use animation, the library creates a timer on your behalf and calls the render for you.

You can see this example: https://play.data2viz.io/sketches/BYEMwY/edit/

from data2viz.

Thank you for your answer ^^ Unfortunately, I am not sure how a visualization can be modified from the outside. The animation examples are run within the context of the objects they need to access. However, I am using Jetpack Compose to manage the state containing the data points, which uses a function for updating the graph that only has access to the view and the viz object.

For illustration:

val dataPoints by collectDataPointState()

val viz by remember { mutableStateOf(myVisualization(dataPoints)) }

AndroidView(
    factory = { context ->
        val container = FrameLayout(context)
        container.addView(viz.toView(context))
        return@AndroidView container
    },
    update = { container ->
        // ...?
        viz.render()
    }
)

Compose will use the factory method to create the initial view. Whenever the state of dataPoints changes (in this case, a new data point gets added), the update lambda will be called so that the graph can get updated. I would have expected to have to re-generate viz there and call something like vizView.setViz(viz) to do that.

Would I need to use viz.activeLayer.children[someIndex] to access the graphic objects within? Or is there a more elegant method to do that?

from data2viz.

I didn't try Jetpack Compose yet, so please be lenient with my advice ;-).

You could keep a reference on a Group that holds all your dataPoints representation.

 lateinit var pointsGroup:GroupNode

//...

fun myVisualization(dataPoints: List<MyPoint>): Viz  = viz {

  pointsGroup = group {
     dataPoints.forEach {
        addPoint(it)
   }
}

fun Group.addPoint(point: MyPoint) {
   circle {
   //...
  }
  }
  
  AndroidView(
    factory = { context ->
        val container = FrameLayout(context)
        container.addView(viz.toView(context))
        return@AndroidView container
    },
    update = { container ->
        // ...?
        pointsGroup.apply{
          clear()
          dataPoints.forEach {
            addPoint(it)
          }
      }
        
        viz.render()
    }
)
 

This is an implementation that will drop and recreate all visual elements for each point (but keep the view and its canvas). Depending on the use case for the points update, you may choose another strategy.

from data2viz.