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.


Tutorial | Demo | 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:

  1. AKS10 November 2015 at 14:13

    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

    ReplyDelete
  2. Unknown11 November 2015 at 04:27

    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.

    ReplyDelete
  3. Bjørn Sandvik12 November 2015 at 14:47

    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.

    ReplyDelete
  4. Stefan Borchardt8 April 2016 at 12:52

    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

    ReplyDelete