Skip to content

Latest commit

聽

History

History
96 lines (71 loc) 路 2.69 KB

Getting_Started.md

File metadata and controls

96 lines (71 loc) 路 2.69 KB
Raw

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

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://raw.githack.com/syt123450/giojs/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.hs" in your html, create a div to render the 3D Gio globe:

<!DOCTYPE HTML>
<html>
<head>

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

  <!-- 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.

Other Documentation