Giojs
π A Declarative 3D Globe Data Visualization Library built with Three.js
Install / Use
/learn @syt123450/GiojsREADME
Gio.js is an open source library for web 3D globe data visualization built with Three.js. What makes Gio.js different is that it is simple to use Gio.js to customize a 3D data visualization model in a declarative way, add your own data, and integrate it into your own modern web application.
<!-- [START screenshot] --> <p align="center"> <img src="https://raw.githack.com/syt123450/giojs/master/assets/readme/Gio.gif"/> </p> <!-- [END screenshot] -->Table of Content
- Motivation
- Getting Started
- Gio.js 2.0 Introduction
- Examples
- API List
- Documentation
- Contributors
- License
Motivation
Gio.js is an open source library for web 3D globe data visualization built with Three.js. What makes Gio.js different is that it is simple to use Gio.js to customize a 3D data visualization model in a declarative way, add your own data, and integrate it into your own modern web application.
This library is inspired by the <a href="https://github.com/dataarts/armsglobe">Arms Trade Visualization project</a> developed by Michael Chang and presented during Google Ideas INFO 2012. See <a href="http://mflux.tumblr.com/post/28367579774/armstradeviz">original post</a>. With Gio.js, it is easy to reproduce this fantastic data visualization model, and integrate it into web application.
- 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
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://threejs.org/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/giojs@2.2.1/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: (the usage of Gio.js is a little bit different in WeChat mini game, checkout this demo to know more about it)
<!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
* know more about data format, check out documentation about data: http://giojs.org/html/docs/dataIntro.html
* we provide sample data for test, get sample data from: https://github.com/syt123450/giojs/blob/master/examples/data/sampleData.json
*/
controller.addData( data );
// call the init() API to show the IO globe in the browser
controller.init();
</script>
If everything goes well, you shall see this. For more fancier usage of Gio.js, check out <a href="http://giojs.org/html/docs/index.html">Gio.js API document</a>
Click the codepen logo to try it in Codepen: Β Β <a target="_blank" href="https://codepen.io/syt123450/pen/VXNdgM"><img width=50 height=50 src="https://raw.githack.com/syt123450/giojs/master/assets/readme/codepen.png"></a>
<!-- [END getstarted] --> <!-- [START documentation] --><div id="intro2">Gio.js 2.0 Introduction</div>
After Gio.js 1.0 released, developers propose many cool and constructive advise. Gio.js implements most of these features. Gio.js 2.0 comes with many big features such as:
-
Data group and switchDataSets API to switch between different data sets [<a href="http://giojs.org/html/docs/dataAdd.html#group">introduction</a>]
-
Provide Three.js programming interface [<a href="http://giojs.org/html/docs/interfaceThree.html">introduction</a>]
-
Provide Stats.js programming interface [<a href="http://giojs.org/html/docs/interfaceStats.html">introduction</a>]
-
Support export data to continent [<a href="http://giojs.org/html/docs/dataContinent.html">introduction</a>]
-
Provide input data check [<a href="https://github.com/syt123450/giojs/issues/86">issue</a>]
-
Support WeChat mini program [<a href="https://github.com/syt123450/giojs-wechat-minigame-demo">demo</a>]
-
New clearData [<a href="http://giojs.org/html/docs/dataClear.html">introduction</a>]
-
New closeLiveLoader [<a href="http://giojs.org/html/docs/dataLiveLoad.html">introduction</a>]
-
Transparent Background [<a href="http://giojs.org/html/docs/designTransparent.html">introduction</a>]
-
Auto Rotation [<a href="https://giojs.org/html/docs/designRotation.html">introduction</a>]
Examples
Gio.js has many representative demos to show how to work with Gio.js, there are mainly three example resources:
- Resource 1: Gio.js Playground
There is a Playground ( <a href="http://giojs.org/html/playground.html">playground link</a> ) for developers to play with Gio.js and export Gio.js parameter.
- Resource 2: Github "examples" folder
Gio.js has many API demos, and these demos are gathered in examples folder. clone the Gio.js repo, try them in your own environment ~
- Resource 3: Live demos on Codepen
Gio.js has a Codepen collection which contains many live demos about Gio.js, click the codepen logo and try to edit them! <a target="_blank" href="https://codepen.io/collection/DkBobG/"><img width=50 height=50 src="https://raw.githack.com/syt123450/giojs/master/assets/readme/codepen.png"></a>
API List
Configure the controller.
β‘ setInitCountry(ISOCode, default: 'CN')
Set the country initially selected.
β‘ lightenMentioned(boolean, default: 'false')
Makes the mentioned country brighter than those not mentioned in the input dataset.
β‘ disableUnmentioned(boolean, default: 'false')
Disables an unmentioned country and makes it unselectable.
β‘ showInOnly(boolean, default: 'false')
Displays only the line with data flowing into the selected country.
β‘ showOutOnly(boolean, default: 'false')
Displays only the line with data flowing out of the selected country.
Enables the halo around the earth. When enabling halo, the color of halo also can be specified.
Disables the halo around the earth.
Displays stats on the upper-left corner of the scene.
Hides stats on the upper-left corner of the scene.
β‘ setTransparentBackground()
Make default background transparent.
Make globe rotate automatically.
Sets the color scheme of the 3D globe by name.
β‘ setSurfaceColor(string, default: '#ffffff')
Sets the color of the surface the 3D globe.
β‘ setSelectedColor(string, default: '#ffffff')
Sets color of the country in selected state.
β‘ setExportColor(string, default: '#DD380C')
Sets the color of out line.
**[β‘ setImportColor(string, default: '#154492')](http://gio
Related Skills
mcp-shrimp-task-manager
2.1kShrimp Task Manager is a task tool built for AI Agents, emphasizing chain-of-thought, reflection, and style consistency. It converts natural language into structured dev tasks with dependency tracking and iterative refinement, enabling agent-like developer behavior in reasoning AI systems.
mcp-shrimp-task-manager
2.1kShrimp Task Manager is a task tool built for AI Agents, emphasizing chain-of-thought, reflection, and style consistency. It converts natural language into structured dev tasks with dependency tracking and iterative refinement, enabling agent-like developer behavior in reasoning AI systems.
contextplus
1.5kSemantic Intelligence for Large-Scale Engineering. Context+ is an MCP server designed for developers who demand 99% accuracy. By combining RAG, Tree-sitter AST, Spectral Clustering, and Obsidian-style linking, Context+ turns a massive codebase into a searchable, hierarchical feature graph.
Peekaboo
2.9kPeekaboo is a macOS CLI & optional MCP server that enables AI agents to capture screenshots of applications, or the entire system, with optional visual question answering through local or remote AI models.
