Canvas, D3, and Cesium.

When I posted a request on how to get pie charts to display overlaid on a Cesium map, I received a suggestion to use Cesium + D3 + Canvases. I’ve gotten that working… sort of. Specifically, I have logic that does this:

foreach ([set of data by zip code]) {

  1. Takes a set of data associated with a given zip code.

  2. Runs it through D3, to create a pie chart, drawn to a canvas element with the class ‘pieCanvas’.

  3. Creates a Cesium.Entity, using that position, and using billboard: { image: canvas } to bind the billboard to that canvas.

  4. Adds that Entity to the viewer.


Unfortunately, while I am getting pie charts to appear…all of them are using the last pie chart written to the canvas. Am I missing something, or do I need to actually create (n) canvases, one per unique pie chart I’m intending to display?

This is just because all your billboards are accessing the same canvas element. It automatically updates (which is usually a good thing, so you can keep updating your canvas to update the billboard).

In this case, if you just want to capture a static image to use in the billboard and re-use the canvas to render the next thing, you can try the solution described in this Stackoverflow post.

Here’s a Sandcastle example I put together where I draw the numbers 0 through 4 on the same canvas and render them onto different entities.

I hope this helps! This looks like a pretty interesting application, what sort of data are you visualizing there?