Zero to One: How I mastered Data Visualization and how you can too

5 min readFeb 25, 2019

I created glmaps in GitHub, and hope that can help data visualization beginners in learning how to draw spatio-temporal data on globe and maps with three.js and deck.gl. First, let’s have a glance at the demo video, to see what can glmaps visualize for us.

This article will answer the WHAT/WHY/HOW about glmaps, as well as the tutorial plans and Q&A. Let’s start!

1. What is glmaps?

glmaps is a project full of bunch of earth and map visualization examples based on three.js and deck.gl, as well as some tutorials for visualization beginners. Easy to learn and use.

You may find glmaps has been published as a package in npm, however, it’s not designed as yet another visualization framework. I hope glmaps can help you filling the gap between a visualization beginner (or lover) and a three.js/deck.gl profressional developer.

GitHub https://github.com/hijiangtao/glmaps

Click watch to receive email notifications, click star to encourage me on this project, click fork to participate in glmaps

I separate this project into these parts:

Overview — Check all visualization types that glmaps contains.
ZERO — Some thoughts from me that you may pay attention before have future reading.
Demo — Open browser and enter localhost:8080 to check the demo locally.
Tutorials — A series of tutorials that guide you how to code these visualization examples step by step. TBD.
Install — Installation guide for developers. Just have a try, glmaps has not get ready for industry applications.
Usage — Usage for how to include glmaps in your application.
Documents — API document for glmaps. TBD.
Stories — Stories behind this repositry.

I’ll pick some interesting parts to have detailed description, you can get more at GitHub.

2. What can I learned in glmaps?

Check all visualization types that glmaps contains currently. In this table,2.5D means you can draw 3D geometries on a 2D map, 3D means a total 3D data visualization approach.

You can raise an issue if you think glmaps should have any other new visualization types.

All visualization types contained in glmaps currently

3. Run the demo locally

Open browser and enter localhost:8080 to check the demo locally. Please enjoy the power of three.js and deck.gl.

git clone git@github.com:hijiangtao/glmaps.git
cd glmaps
npm install
touch devconfigs.js

To use any of Mapbox’s APIs, you’ll need a Mapbox access token. Mapbox uses access tokens to associate requests to API resources with your account. Since TOKEN is a private key, glmaps doesn’t provide it in codes, you need to specify it in file devconfigs.js.

Here’s what an access token looks like (focus on the string starts with pk., replace it with your own token. You can create your mapbox Token here) and the devconfigs.js file format:

// devconfigs.js
const MAPBOX_TOKEN = 'pk.eyJ1IjoiaGlqaWFuZ3RhbyIsImEiOiJjampxcjFnb3E2NTB5M3BvM253ZHV5YjhjIn0.WneUon5qFigfJRJ3oaZ3Ow';export {
  MAPBOX_TOKEN,  
}

Tips: You can utilize Search engine to get other’s mapbox tokens if you don’t want to create a new one, here’s one token I got from GitHub Search: ‘pk.eyJ1IjoiY3NuIiwiYSI6ImNpdnRvam1qeDAwMXgyenRlZjZiZWc1a2wifQ.Gr5pLJzG-1tucwY4h-rGdA’, though it’s not recommend to “steal” other’s token…

Save changes in devconfigs.js and go on:

npm run start

When glmaps is ready, it will open browser automatically, and render demos for you.

4. Visualization tutorials plan

A series of spatio-temporal data visualization tutorials that guide you how to code these visualization examples step by step. TBD.

Visualization Tutorials from scratch (I) — Introduction of data visualization with three.js
Visualization Tutorials from scratch (II) — Introduction of data visualization with deck.gl
Visualization Tutorials from scratch (III) — Manage your three.js application with React
Visualization Tutorials from scratch (IV) — Draw a earth-moon system with three.js from scratch
Visualization Tutorials from scratch (V) — How to draw curve, mover and cube with three.js
Visualization Tutorials from scratch (VI) — Animate your layers with props and transitions
Visualization Tutorials from scratch (VII) — Animate your deck.gl with customized shaders
Visualization Tutorials from scratch (VIII) — Some tips in data visualization with deck.gl and three.js

5. Q&A

Thanks for your attention in this project, there are some thoughts from me that you may pay attention before have future reading.

Q: What frameworks are used in glmaps?

React Hooks is ready in 16.8.0, and glmaps get benefits from it at once, if you are not familiar with it, please check Introducing Hooks first; On the other hand, deck.gl is WebGL2 powered geospatial visualization layers, so please make sure your browser support WebGL2. To find out if WebGL(2) is enabled in your browser, go to http://get.webgl.org or get.webgl.org/webgl2.

Besides, if you meet any errors when depoly it locally, you can describe your problem with issues, because that’s most likely a problem of glmaps rather than yourself, since glmaps organizes local development environment from scratch, such as webpack, babel, etc.

Q: Guidance for visualization beginners?

I highly recommend you follows these steps in using glmaps:

Learn how to install three.js and deck.gl from scratch, and code your first “Hello World” with them;
Run official demos and get familiar with their API;
Follow the tutorials step by step to make your visualization examples more powerful, or check glmaps codes in srcfolder directly;
(Optional) Use glmaps in your demo application, start with npm install glmaps --save;
Rewrite glmaps example with your own codes;
Congratulations on mastering basics of spatio-temporal visualization, you can use three.js and deck.gl to draw a more fantastic world with spatio-temporal data!

Q: How to participate in glmaps project?

glmaps is still at the very beginning period of my thoughts, you are welcome to oepn ISSUE, PR or email me, if you have any ideas on how to make glmaps better for visualization beginners:

Participate in implementing tutorials together;
Contribute codes to glmaps with PR (such as imporve mover animation in Globe);
Speak out your doubts in learning data visualization with issues;
Tell me your advice on how to make glmaps better with issues;
Other aspects not included yet.

You can find more at GitHub.