A Declarative 3D Globe Data Visualization Library built with Three.js

Get Started

Playground

GitHub

Simplicity

Create a 3D global data visualization model with your own data in just four lines of javascript code

Customization

Design your own globe style with easy to use APIs in Gio.js

Modernization

Build a responsible, fully interactive, rich 3D frontend application using Gio.js
Get Started

1. Install

Include the library and dependency in the <head> section of your web page as shown below:
<script src="three.min.js"></script>
<script src="gio.min.js"></script>

2. Create

With Threejs and Giojs included in your webpage, you are ready to create your first Gio Globe. We will start off by creating a globe in basic style.
Create a <div> where the globe will be rendered:
<div id="globeArea" style="width: 200px; height: 200px"></div>
Add the following four lines of javascript code to the body of you html page:
<script>
        var container = document.getElementById( "globalArea" );
        var controller = new GIO.Controller( container );
        controller.addData( data );
        controller.init();
</script>

3. Customize

Read the API document you can easily create a globe in your own style, the globe in the right shows how a Gio.js globe look like.
Download
The Gio.js library runs fine on Chrome, safari, firefox, and can work well in mobile browser. we are working hard to solve cross browser issue now. This site contains documentation, downloads and live examples of Gio.js.
The sourcecode of Gio.js is available at Github. For questions, issues, and suggestions please use the issue section of the Github project.

Install with NPM

npm install giojs

Install with Yarn

yarn add giojs

Download

v2.0.zip