Alexander Wood and Ed Mackey from Analytical Graphics, Inc. developed an app that showcases the synergy between the powerful open source visualization frameworks, D3 and Cesium.
This demo is the result of a one day hackathon hosted at Analytical Graphics, Inc in April of 2013. The app repurposed Mike Bostock’s D3 recreation of Hans Roslings’ “Health and Wealth of Nations” as an interactive overlay for a Cesium geospatial view. Geolocating each data point with its country of origin adds new context to the data.

Hans Rosling’s original 2D visualization presents 4 dimensions of data, including income, population, and life expectancy for nations over the span of 200 years. The x axis represents income per capita and inflation adjusted (dollars), while the y axis represents life expectancy in years. A nation further to the right of the graph signifies that the people are wealthier. Similarly, a nation plotted higher up on the graph indicates the nation is healthier. The radius of each circle is tied to the population of the nation.

From a technical standpoint, this application demonstrates usage of key concepts for Cesium and integration with D3 visualizations. These concepts are summarized below.

  • Data presentation in Cesium’s 2.5D Columbus view
  • Metrics rendered in Cesium using Polylines
  • CesiumWidget functionality extended by individually incorporating SceneModePicker, Timeline Widget, Animation Widget, HomeButton Widget, and Fullscreen Widget
  • Mouseover event handling to highlight a nation in both the D3 chart and Cesium scene for cohesiveness between data presentations
  • Clicking on a nation, in either display, will construct a CameraFlightPath to fly the 3D camera in Cesium in for a closer look
  • Loose coupling of these two visualizations via d3.dispatch for signaling events between presentation layers


Deploying the app in a browser allows for the rapid development of meaningful visualizations by supplementing 3d environments with existing web data technologies and user interface libraries. For a simple example of how all of these features are possible, please visit the project’s Github page.

Last updated: Jul 30, 2013

Do you want to collaborate or partner with the Cesium team? Contact Tim Rivenbark, Cesium's Business Development Director.