Gio.js
Getting Start
Gio.js 2.0
Basic Elements
Configuration
Object Design API
Color and Style API
Working with Data
Callback
Dependence Interface
Advanced Feature
Gio.js Hello World
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.
1. Create a <div> where the globe will be rendered.
<div id="globeArea" style="width: 200px; height: 200px"></div>
2. Add the following code snippet to the body of you html page.
<script>
        $(function () {

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

                // Create Gio.controller
                var controller = new GIO.Controller( container );

                // Add data
                controller.addData( data );

                // Initialize and render the globe
                controller.init();
        });
</script>
Tip: We can also use JQuery or onReady handler to load data.
3. Now you should be able to see the 3D globe on your webpage like this
4. Try it on codepen:

See the Pen Giojs Hello World by syt123450 (@syt123450) on CodePen.