Skip to main content

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! 

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
10 November 2015 at 15:13
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.
11 November 2015 at 05:27
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.
12 November 2015 at 15:47
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
8 April 2016 at 13:52
Post a Comment

Popular posts from this blog

Creating a WebGL Earth with three.js

This blog post will show you how to create a WebGL Earth with three.js , a great JavaScript library which helps you to go 3D in the browser. I was surprised how easy it seemed when reading a blog post  by Jerome Etienne . So I decided to give it a try using earth textures  from one of my favourite cartographers, Tom Patterson . WebGL is a JavaScript API for rendering interactive 3D graphics in modern web browsers without the use of plug-ins. Three.js is built on top of WebGL, and allows you to create complex 3D scenes with a few lines of JavaScript. If your browser supports WebGL you should see a rotating Earth below: [ Fullscreen ] To be able to display something with three.js, you need three things: a scene, a camera and a renderer. var width  = window.innerWidth,     height = window.innerHeight; var scene = new THREE.Scene(); var camera = new THREE.PerspectiveCamera(45, width / height, 0.01, 1000); camera.position.z = 1.5; var rende...
11 comments
Read more

Thematic Mapping Engine

It's time to introduce the Thematic Mapping Engine (TME). In my previous blog posts, I've shown various techniques of how geobrowsers can be used for thematic mapping. The goal has been to explore the possibilites and to make these techniques available to a wider audience. The Tematic Mapping Engine provides an easy-to-use web interface where you can create visually appealing maps on-the-fly. So far only prism maps are supported, but other thematic mapping techniques will be added in the upcoming weeks. The engine returns a KMZ file that you can open in Google Earth or download to your computer. My primary data source is UNdata . The above visualisation is generated by TME ( download KMZ ) and shows child mortaility in the world ( UNdata ). The Thematic Mapping Engine is also an example of what you can achieve with open source tools and datasets in the public domain: A world border dataset is loaded into a MySQL database . The same database contains tables with statistics ...
45 comments
Read more

Creating 3D terrains with Cesium

Previously, I’ve used three.js to create 3D terrain maps in the browser ( 1 , 2 , 3 , 4 , 5 , 6 ). It worked great for smaller areas, but three.js doesn’t have built-in support for tiling and advanced LOD algorithms needed to render large terrains. So I decided to take Cesium for a spin. Cesium is a JavaScript library for creating 3D globes and 2D maps in the browser without a plugin. Like three.js, it uses WebGL for hardware-accelerated graphics. Cesium allows you to add your own terrain data, and this blog post will show you how. Impressed by the terrain rendering in @CesiumJS - with a 10m elevation model for Norway! Farewell Google Earth. pic.twitter.com/RQKvfu2hBb — Bjørn Sandvik (@thematicmapping) October 4, 2014 Compared to  the dying Google Earth plugin , it's quite complicated to get started with Cesium. The source code is well documented and the live coding Sandcastle is great, but there is a lack of tutorials  and my development slows down when ...
12 comments
Read more