Friday, 6 November 2015

Mapping grid-based statistics using OpenLayers, Three.js and D3.js

I've just finalised two tutorials on mapping grid-based statistics. The tutorials are in Norwegian, but the source code is available in English, and should be easy to follow.

Tutorial 1: "Grid-based population data"

Mapping grid-based population data of Oslo, Norway, using OpenLayers 3 and D3.js. The user can select an area to see the number of inhabitants.


Tutorial | Demo | Source

Tutorial 2: "Grid-based statistics in 3D"

3D visualisation of grid-based population data of Oslo, Norway, using Three.js and D3.js.


TutorialDemo | Source

The basemap is from the Norwegian Mapping Authority, and the grid-based population data from Statistics Norway.

The tutorials are provided by Project Innovation from GeoForum, a Norwegian non-profit industry organization for individuals and companies/agencies working in mapping, surveying and geographic information.

Please notify me if you use these techniques in your own projects! 

4 comments:

AKS said...

Hi Bjørn Sandvik

I have been following your blogs for the past few months. I don't have much experience in terms of GIS, but I am thankful to you to tell your techniques in simple way.

I tried out your methods used to create 3D in browser using three.js, WMS image and .bin file as elevation source.

I have got a repository of 30m GDemV2 data. Using java/JSP/Servlets I created on-the-fly 3D images. I used GDAL (Java version) to extract .bin file from the repository .vrt file in the same resolution as the three.js mesh superimposed by WMS texture. Just I need to select the portion on the map to generate there 3D images.

It hardly takes 10 seconds to generate the 3D images on the fly of 400 x 400 mesh.


All thanks to you.

Waiting for more blogs.
Amit Kumar Singh

Unknown said...

hi, can I use nvd3 or dc.js instead of d3.js to build such a demo. I find it's hard to read the source code of d3, but nvd3 is much more readable. for I use nvd3 in my side project : https://github.com/litaotao/IPython-Dashboard , I would like to use nvd3 to build charts or graphs.

great thanks.

Bjørn Sandvik said...

Amit: Thanks for your feedback - pleased to hear that my tutorials are useful :-)

Charles: The main work in these tutorials is not done by D3.js, but OpenLayers and Three.js. You will have difficulties doing the same in NVD3, as it's not a mapping library.

Stefan Borchardt said...

Hi Björn,

I used the concept for 150,000 pickable data points on https://stefanborchardt.github.io/SFTrees/ (click > twice for 3D). I also made a pull request on GeoForum/veiledning09. That's for the speedup only, though.

It's great to see other people thinking about 3D visualizations in statistics, too.

Cheers,
Stefan