I need to overlay some sensor data at the robot position on a map/occupancy grid to create a spatial heat map for visualisation. So far I have the map/occupancy grid generated with Cartographer, the sensor data (this is a constantly changing integer) and the robot position found using tf.TransformListener().

What is the best method for bringing this data together to visualise on a web interface created using roslibjs? I have been able to achieve this using matplotlib to create a plot image, which is brought into the web GUI every time it is updated but this method seems clunky and performance seems poor.

Does anyone have any alternative ideas? I wondered if there was some way of achieving this using vue-chartjs? I also wondered if there was some way to incorporate the sensor and robot position data into the Cartographer generated occupancy grid so that this can just be directly brought into the web GUI using roslibjs, which may avoid a web-development approach (probably preferred)?