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

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

Terrain building with three.js

In my last blog post , we converted a digital elevation model (DEM) to a WebGL-friendly format ( i.e. easy to transfer and parse by JavaScript in the browser). In this blog post, we'll use the elevation data to build a terrain mesh with three.js .  First we need to transfer the terrain data to the browser. The elevation values are stored in a binary file as 16-bit unsigned integers. This page explains how you can send and receive binary data using JavaScript typed arrays. I've created a TerrainLoader by adapting the  XHRLoader . You can also use this function: function loadTerrain(file, callback) {   var xhr = new XMLHttpRequest();   xhr.responseType = 'arraybuffer';   xhr.open('GET', file, true);   xhr.onload = function(evt) {         if (xhr.response) {       callback(new Uint16Array(xhr.response));     }   };     xhr.send(null); } Loading elevation data with the Terrai...
16 comments
Read more