Another Word For It Patrick Durusau on Topic Maps and Semantic Diversity

May 20, 2014

Interactive Maps with D3.js, Three.js, and Mapbox

Filed under: D3,MapBox,Mapping,Maps — Patrick Durusau @ 7:05 pm

Interactive Maps with D3.js, Three.js, and Mapbox by Steven Hall.

From the post:

Over the past couple of weeks I have been experimenting with creating 2D maps that can be explored in three dimensional space using D3.js and Three.js.  The goal was to produce some highly polished prototypes with multiple choropleth maps that could be easily navigated on a single page.  Additionally, I wanted to make sure to address some of the common tasks that arise when presenting map data such as applying well-formatted titles, legends and elegantly handling mouse-over events. The two examples presented below use D3.js for for generating nested HTML elements that contain the maps, titles and labeling information and use Three.js to position the elements in 3D space using CSS 3D transforms.  Importantly, there is no WebGL used in these examples.  Everything is rendered in the DOM using CSS 3D transforms which, at the time of writing, has much wider browser support than WebGL.

This article is an extension of two of my previous articles on D3.js and Three.js that can be found here and here.   Below, I’ll go into more depth about how the examples are produced and some of the roadblocks I encountered in putting these demos together, but for more background on the general process it may be good to look at the first article in this series: D3.js, Three.js and CSS 3D Transforms.

The maps here are geographical maps but what Steve covers could be easily applied to other types of maps.

No Comments

No comments yet.

RSS feed for comments on this post.

Sorry, the comment form is closed at this time.

Powered by WordPress