gio.js's Introduction

Gio.js

Gio.js is an open source library for data visualization library based 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. See original post. What makes Gio.js different is that it is fully customizable for users and friendly to future developers.

Getting Started

Installation

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="https://rawgit.com/syt123450/Gio.js/master/build/gio.min.js"></script>

Option 2: npm

npm install giojs --save

Option 3: yarn

yarn add giojs

Usage

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

<!DOCTYPE HTML>
<html>
<head>

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

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

</head>
<body>

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

</body>
</html>

To initialize and render the 3D Gio globe:

<script>

    // 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
    controller.init();

</script>

If everything goes well, you should see this.

Documentation

For quick start, see Getting Started
To learn more about the Basic Elements
To see the full API document in Markdown format, see APIs
To contribute to Gio.js's code base, read Developer Guide
See Gio's offical website giojs.org for everything above and plus lots of live examples

Recommend Projects