React-Giojs

React-Giojs is a react version of the open source library Gio.js, Gio.js is an open source library for data visualization library based on a 3D globe. This library is inspired by the Arms Trade Visualization project developed by Michael Chang and presented during Google Ideas INFO 2012. See original post. What makes Gio.js different is that it is fully customizable for users and friendly to future developers.

Getting Started

Installation

• Option 1: npm

npm install react-giojs --save

• Option 2: yarn

yarn add react-giojs

Usage

After install react-giojs, create a Gio tag to render the 3D Gio globe:

import React, {Component} from 'react';
import axios from 'axios';
 
// import gio component from "react-giojs"
 
import Gio from 'react-giojs';
 
class App extends Component {
 
    constructor() {
        super();
 
        this.state = {
            data: null
        };
    }
 
    componentDidMount() {
        axios.get(`../data/sampleData.json`)
            .then(response => this.setState({data: response.data}))
    }
 
    render() {
 
        return (
        
            // add data to "data" attribute, and render <Gio> tag
        
            <Gio data={this.state.data} />
        )
    }
}
 
export default App;
 

If everything goes well, you should see this.

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 offical website giojs.org for everything above and plus lots of live examples