{"id":15640619,"url":"https://github.com/syt123450/react-giojs","last_synced_at":"2025-08-30T18:19:43.371Z","repository":{"id":44053237,"uuid":"129055808","full_name":"syt123450/react-giojs","owner":"syt123450","description":":tada: A Declarative 3D Globe Data Visualization Library built with Three.js -- React version for Gio.js","archived":false,"fork":false,"pushed_at":"2019-03-20T00:15:16.000Z","size":2504,"stargazers_count":80,"open_issues_count":3,"forks_count":21,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-30T08:14:33.811Z","etag":null,"topics":["3d","datavisualization","globe","javascript","react","threejs","web","webgl"],"latest_commit_sha":null,"homepage":"https://github.com/syt123450/giojs","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/syt123450.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-04-11T07:50:38.000Z","updated_at":"2025-04-09T05:59:53.000Z","dependencies_parsed_at":"2022-09-04T21:02:28.659Z","dependency_job_id":null,"html_url":"https://github.com/syt123450/react-giojs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/syt123450/react-giojs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syt123450%2Freact-giojs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syt123450%2Freact-giojs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syt123450%2Freact-giojs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syt123450%2Freact-giojs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/syt123450","download_url":"https://codeload.github.com/syt123450/react-giojs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/syt123450%2Freact-giojs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272886674,"owners_count":25009874,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-30T02:00:09.474Z","response_time":77,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3d","datavisualization","globe","javascript","react","threejs","web","webgl"],"created_at":"2024-10-03T11:38:46.951Z","updated_at":"2025-08-30T18:19:43.349Z","avatar_url":"https://github.com/syt123450.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\u003cp align=\"center\"\u003e\u003ca href=\"https://giojs.org\" target=\"_blank\"\u003e\u003cimg width=\"100\" src=\"https://raw.githack.com/syt123450/giojs/master/assets/readme/logo.png\" alt=\"Gio logo\"\u003e\u003c/a\u003e\u003c/p\u003e\n\n\u003ch1 align=\"center\"\u003eReact-Giojs\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/giojs\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/giojs.svg\" alt=\"npm version\" height=\"18\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/syt123450/Gio.js/blob/master/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/badge/license-Apache--2.0-green.svg\" alt=\"license badge\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/mrdoob/three.js/\"\u003e\u003cimg src=\"https://img.shields.io/badge/dependencies-Three.js-brightgreen.svg\" alt=\"dependencies badge\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://travis-ci.org/syt123450/Gio.js\"\u003e\u003cimg src=\"https://travis-ci.org/syt123450/Gio.js.svg\" alt=\"build\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://coveralls.io/github/syt123450/Gio.js?branch=master\"\u003e\u003cimg src=\"https://coveralls.io/repos/github/syt123450/Gio.js/badge.svg\" alt=\"coverage\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n**React-Giojs** is the react version of the open source library **Gio.js**. **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.\n\n\u003c!-- [START screenshot] --\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"\"\u003e\u003cimg src=\"https://raw.githack.com/syt123450/giojs/master/assets/readme/Gio.gif\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\u003c!-- [END screenshot] --\u003e\n\n## Table of Content\n\n- [Getting Started](#getting-started)\n- [Try it online](#try-it-online)\n- [Configuration](#configuration)\n- [Documentation](#documentation)\n- [WIP](#wip)\n- [License](#license)\n\n\u003c!-- [START getstarted] --\u003e\n## Getting Started\n\n### Installation\n\n- Option 1: npm\n```bash\nnpm install react-giojs --save\n```\n- Option 2: yarn\n```bash\nyarn add react-giojs\n```\n### Usage\n\nAfter install react-giojs, create a `Gio` tag to render the 3D Gio globe:\n\n```html\nimport React, {Component} from 'react';\nimport axios from 'axios';\n\n// import gio component from \"react-giojs\"\n\nimport Gio from 'react-giojs';\n\nclass App extends Component {\n\n    constructor() {\n        super();\n\n        this.state = {\n            data: null\n        };\n    }\n\n    componentDidMount() {\n        axios.get(`../data/sampleData.json`)\n            .then(response =\u003e this.setState({data: response.data}))\n    }\n\n    render() {\n\n        return (\n        \n            // add data to \"data\" attribute, and render \u003cGio\u003e tag\n        \n            \u003cGio data={this.state.data} /\u003e\n        )\n    }\n}\n\nexport default App;\n\n```\n\nIf everything goes well, you should see [this](http://giojs.org/examples/00_hello_world(simplest).html).\n\n## Try it online\n\n* [Gio.js playground](http://giojs.org/html/playground.html)\n* [Gio.js codepen online demos](https://codepen.io/collection/DkBobG/)\n\n\u003c!-- [END getstarted] --\u003e\n\n## Configuration\n\nProvide a some prop to the \u003cGio\u003e component, which will customize Gio globe, the code below introduce all these customizable props.\n\nKnow more about what these API means, check out [Gio.js document](http://giojs.org/html/docs/index.html)\n\n```\n\n    \u003cGio\n\n        // width of the Gio container\n        width: 400,\n\n        // height of the Gio container\n        height: 500,\n\n        // data of the Gio controller, in Json format\n        data: data,\n\n        // API to switch to a specific country without click on the globe\n        forceSwitchCountry: \"US\",\n\n        // user can set these configs to define how the Gio look like, this is the same as the parameter of Gio.js's configure() API\n        configs: {\n\n            control: {\n\n                // whether show stats (boolean)\n                stats: false,\n\n                // whether let unmentioned country unclickable (boolean)\n                disableUnmentioned: false,\n\n                // whether let the country mentioned in dataset lighter (boolean)\n                lightenMentioned: false,\n\n                // only show in line for selected country (boolean)\n                inOnly: true,\n\n                // only show out line for selected country (boolean)\n                outOnly: false,\n\n                // set the initial selected country (ISO3166, String, eg. \"CN\")\n                initCountry: \"CN\",\n\n                // whether show halo (boolean)\n                halo: true\n\n            },\n\n            // set elements' color, parameter can be: string (eg. \"#ffffff\") or hex number (eg. 0xffffff)\n            color: {\n\n                // surface color\n                surface: 0x48C12,\n\n                // color of selected country\n                selected: 0xF17F49,\n\n                // color of in line of selected country\n                in: 0x0091FF,\n\n                // color of out line of selected country\n                out: 0xFF8000,\n\n                // halo color\n                halo: 0X2C4247,\n\n                // background color, area behind the globe\n                background: 0x1A2029\n\n            },\n\n            // set the brightness of elements, parameter range can be [0, 1]\n            brightness: {\n\n                // brightness of ocean on the earth's surface\n                ocean: 0.5,\n\n                // brightness of country mentioned in the data set\n                mentioned: 1,\n\n                // country related to the selected country (in or out)\n                related: 0.1\n\n            }\n\n        }\n\n    /\u003e\n\n```\n\n\u003c!-- [START documentation] --\u003e\n## Documentation\n\nThese documentations are about Gio.js, which introduce what Gio.js is, how to use Gio.js, how to contributor to Gio.js, and so on. We are trying our best to write more documentation about react-giojs.\n\n- For quick start, see [Getting Started](https://github.com/syt123450/Gio.js/blob/master/docs/Getting%20Started.md)\n- To learn more about the [Basic Elements](https://github.com/syt123450/Gio.js/blob/master/docs/Basic%20Elements.md)\n- To contribute to Gio.js's code base, read [Developer Guide](https://github.com/syt123450/Gio.js/blob/master/docs/Developer%20Guide.md)\n- See Gio's offical website [giojs.org](http://giojs.org) for everything above and plus lots of live examples\n\n\u003c!-- [END documentation] --\u003e\n\n## WIP\n\n* More documentation for React-giojs\n* Official website for React-giojs\n* Online demos for React-giojs\n* Follow Gio.js 2.0\n\n## License\n\n[Apache-2.0](https://github.com/syt123450/react-giojs/blob/master/LICENSE)\n\n\n[screenshot-url]: http://via.placeholder.com/400x300\n[npm-badge]: https://img.shields.io/badge/npm-v0.0.5-orange.svg\n[npm-badge-url]: https://www.npmjs.com/package/giojs\n[license-badge]: https://img.shields.io/badge/license-MIT-brightgreen.svg\n[license-badge-url]: https://github.com/syt123450/Gio.js/blob/master/LICENSE\n[dependencies-badge]: https://img.shields.io/badge/dependencies-Three.js-brightgreen.svg\n[dependencies-badge-url]: https://github.com/mrdoob/three.js/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyt123450%2Freact-giojs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsyt123450%2Freact-giojs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsyt123450%2Freact-giojs/lists"}