GitHub - syt123450/giojs: ? A Declarative 3D Globe Data Visualization Library...
source link: https://github.com/syt123450/giojs
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
README.md
Gio.js
English | 中文
React Version: react-giojs
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.
Content
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 Arms Trade Visualization project developed by Michael Chang and presented during Google Ideas INFO 2012. See original post. 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://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.js" 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, know more about data format check out documentation about data: http://giojs.org/html/docs/dataIntro.html 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 Gio.js API document
Click the codepen logo to try it in Codepen:
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 ( playground link ) 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!
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 official website giojs.org for everything above and plus lots of live examples
Contributors
Thanks goes to these wonderful people (emoji key):
syt123450
? ? ? ⚠️
Botime
? ? ⚠️ ?
Mutian Wang
? ? ? ?
Chenhua Zhu
? ? ? ?
Qi(Nora)
? ? ? ✅
bouyuc
? ✅
Xiaoran Lin
? ? ? ?
Leon
? ? ?
Alexis
? ?
This project follows the all-contributors specification. Contributions of any kind welcome!
License
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK