Canvas, D3, and Cesium.

CesiumJS
1

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?

2

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?