Skip to content
Switch branches/tags
Go to file
Cannot retrieve contributors at this time

Gio.js Hello World

Gio.js is an open source library for data visualization on a 3D globe. This library is inspired by the Arms Trade Visualization project developed by Michael Chang and presented during Google Ideas INFO 2012. What makes Gio.js different is that it is fully customizable for user and friendly to future developers.

Getting Started


  • Option 1: <script> tag

Include Three.js dependency:

<script src="three.min.js"></script>

Include local Gio.js library

<script src="gio.min.js"></script>

or through CDN

<script src=""></script>
  • Option 2: npm
npm install giojs --save
  • Option 3: yarn
yarn add giojs


After including "three.min.js" and "gio.min.hs" in your html, create a div to render the 3D Gio globe:


  <!-- include three.min.js library-->
  <script src="three.min.js"></script>

  <!-- include Gio.min.js library-->
  <script src="gio.min.js"></script>


  <!-- container to draw 3D Gio globe-->
  <div id="globalArea"></div>


To initialize and render the 3D Gio globe:


    // get the container to hold the IO globe
    var container = document.getElementById( "globalArea" );

    // create controller for the IO globe, input the container as the parameter
    var controller = new GIO.Controller( container );

    // use addData() API to add the the data to the controller
    controller.addData( data );

    // call the init() API to show the IO globe in the browser


If everything goes well, you should see this.

Other Documentation