Giojs是一个基于Threejs的web3D地球数据可视化的开源组件库资源-CSDN文库

共226个文件

jpg：85个

js：68个

html：34个

JavaScript开发-可视化/图表

需积分: 50 45 浏览量 2019-08-10 05:17:27 上传评论 8 收藏 15.5MB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

Giojs是一个基于Threejs的web3D地球数据可视化的开源组件库（226个子文件）

.all-contributorsrc 3KB

.babelrc 27B

compare.css 1KB

common.css 815B

Gio.gif 902KB

loading.gif 49KB

.gitignore 48B

21_combine_highcharts.html 8KB

28_manipulateStats.html 3KB

30_exportToContinent.html 3KB

18_API_enableStats(disableStats).html 3KB

29_dataGroup.html 2KB

19_API_onCountryPicked.html 2KB

20_API_switchCountry.html 2KB

23_API_addData(clearData).html 2KB

25_API_addHalo(removeHalo).html 2KB

06_setLineColor_from_data.html 2KB

developTest.html 2KB

11_API_lightenMentioned.html 2KB

12_API_disableUnmentioned.html 2KB

14_API_showOutOnly.html 2KB

13_API_showInOnly.html 2KB

31_transparent_background.html 2KB

09_API_adjustMentionedBrightness.html 2KB

27_addBackground.html 2KB

01_API_setSurfaceColor.html 2KB

26_API_setBackgroundColor.html 2KB

02_API_setSelectedColor.html 2KB

00_hello_world(simplest).html 2KB

05_API_setImportColor.html 2KB

04_API_setExportColor.html 2KB

24_API_setHaloColor.html 2KB

08_API_adjustRelatedBrightness.html 2KB

03_API_setInitCountry.html 2KB

10_API_setStyle.html 2KB

07_API_adjustOceanBrightness.html 2KB

15_API_configure.html 2KB

16_constructor_configure.html 2KB

22_function_chaining.html 1KB

17_API_addDataAsync.html 1KB

readme_globe.html 1KB

background.jpg 1.53MB

logo2.jpg 284KB

setStyle2_zh.jpg 211KB

addHalo_zh.jpg 190KB

showInOnly_false_zh.jpg 187KB

showOutOnly_false_zh.jpg 185KB

country_zh.jpg 185KB

disableUnmentioned_zh.jpg 184KB

adjustMentionedBrightness1_zh.jpg 179KB

switchCountry1_zh.jpg 177KB

setInitCountry_default_zh.jpg 171KB

showOutOnly_true_zh.jpg 167KB

showInOnly_true_zh.jpg 160KB

background_zh.jpg 153KB

JuicyCakeStyle.jpg 114KB

all_zh.jpg 112KB

GorgeousDreamStyle.jpg 111KB

RedBlueStyle.jpg 110KB

LemonGateStyle.jpg 110KB

OctoberPartyStyle.jpg 109KB

SunsetStyle.jpg 109KB

FrozenBerryStyle.jpg 108KB

MagicStyle.jpg 108KB

NearMoonStyle.jpg 107KB

MintStyle.jpg 103KB

StrawberryStyle.jpg 101KB

EarlySpringStyle.jpg 100KB

BlueInkStyle.jpg 100KB

stats_zh.jpg 81KB

setSelectedColor1_zh.jpg 72KB

setBackgroundColor1_zh.jpg 71KB

adjustRelatedBrightness1_zh.jpg 70KB

setHaloColor1_zh.jpg 70KB

ocean_zh.jpg 70KB

surface_zh.jpg 70KB

setExportColor1_zh.jpg 69KB

setImportColor1_zh.jpg 68KB

setSurfaceColor1_zh.jpg 67KB

adjustOceanBrightness1_zh.jpg 67KB

setStyle1_zh.jpg 63KB

line_zh.jpg 62KB

all.jpg 55KB

adjustMentionedBrightness2.jpg 50KB

halo_zh.jpg 48KB

adjustRelatedBrightness1.jpg 46KB

adjustMentionedBrightness1.jpg 46KB

disableUnmentioned.jpg 45KB

setImportColor2.jpg 44KB

setBackgroundColor2.jpg 44KB

setStyle2.jpg 44KB

adjustRelatedBrightness2.jpg 44KB

setSelectedColor2.jpg 44KB

showOutOnly_false.jpg 44KB

showInOnly_false.jpg 44KB

adjustOceanBrightness1.jpg 44KB

setExportColor1.jpg 44KB

setBackgroundColor1.jpg 43KB

setExportColor2.jpg 43KB

setSelectedColor1.jpg 43KB

共 226 条

<p align="center"><a href="https://giojs.org" target="_blank"><img width="700" src="https://raw.githack.com/syt123450/giojs/master/assets/readme/logo2.jpg" alt="Gio logo"></a></p> <h1 align="center">Gio.js</h1> <p align="center"> <strong>English</strong> | <a href="https://github.com/syt123450/giojs/blob/master/README_zh.md"><strong>中文</strong></a> </p> <p align="center">React Version: <a href="https://github.com/syt123450/react-giojs">react-giojs</a></p> <p align="center">Wechat minigame: <a href="https://github.com/syt123450/giojs-wechat-minigame-demo">wechat usage</a></p> <p align="center"> <a href="https://www.npmjs.com/package/giojs"><img src="https://img.shields.io/npm/v/giojs.svg" alt="npm version" height="18"></a> <a href="https://github.com/syt123450/Gio.js/blob/master/LICENSE"><img src="https://img.shields.io/badge/license-Apache--2.0-green.svg" alt="license badge"></a> <a href="https://github.com/mrdoob/three.js/"><img src="https://img.shields.io/badge/dependencies-Three.js-brightgreen.svg" alt="dependencies badge"></a> <a href="https://travis-ci.org/syt123450/giojs"><img src="https://travis-ci.org/syt123450/giojs.svg" alt="build"></a> <a href="https://coveralls.io/github/syt123450/giojs?branch=master"><img src="https://coveralls.io/repos/github/syt123450/giojs/badge.svg" alt="coverage"></a> </p> **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.  <p align="center"> <img src="https://raw.githack.com/syt123450/giojs/master/assets/readme/Gio.gif"/> </p>  ## Table of Content * [Motivation](#motivation) * [Getting Started](#getting-started) * [Gio.js 2.0 Introduction](#intro2) * [Examples](#examples) * [API List](#api-list) * [Documentation](#documentation) * [Contributors](#contributors) * [License](#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: ```html <script src="three.min.js"></script> ``` Include local Gio.js library ```html <script src="gio.min.js"></script> ``` or through CDN ```html <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 ```bash npm install giojs --save ``` - Option 3: yarn ```bash 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](https://github.com/syt123450/giojs-wechat-minigame-demo) to know more about it) ```html <!DOCTYPE HTML> <html> <head>  <script src="three.min.js"></script>  <script src="gio.min.js"></script> </head> <body>  <div id="globalArea"></div> </body> </html> ``` To initialize and render the 3D Gio globe: ```html <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](http://giojs.org/examples/00_hello_world(simplest).html). 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>   ## <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>] ## 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`(json)](http://giojs.org/html/docs/configureAPI.html)** Configure the controller. **[➡ `setInitCountry(ISOCode, default: 'CN')`](http://giojs.org/html/docs/designInitCountry.html)** Set the country initially selected. **[➡ `lightenMentioned(boolean, default: 'false')`](http://giojs.org/html/docs/designLightenMen.html)** Makes the mentioned country brig

评论收藏

内容反馈