syt123450/giojs

🌏 A Declarative 3D Globe Data Visualization Library built with Three.js

giojs's Issues

Establish Website

We need to establish a website to introduce the library to developer.

Safari 11 background color miss

The background is white in Safari 11 while it should be black, and this issue do not happen in Safari 10.

Add ripple effect to buttons in website

Github logo is partially covered by playground

User should be able to configure data processors

We can add a data processor manager to register data processors according to the current settings.

Refactor the structure of source code

Customize Stats style

When Stats is enabled, the user should be able to customize its style, a possible solution is to give that element a unique id so that they can use CSS to adjust its styles.

Chinese version document

• Chinese version markdown document
• Chinese version website

Change null to undefined

In utils.js, around line 51 and 77.

        while ( current !== null ) {

            actualLeft += current.offsetLeft;
            current = current.offsetParent;

        }

current !== null should be change to current !== undefined, otherwise it gives an error.

Mouse Wheel can not work in Firefox

The mouse wheel function to let globe zoom in or out can not work in Firefox.

Separate and Transfer Repo...

Separate repo and transfer repo to organization.

Add document

We need to add several document for the project:

• README
• User_Guide
• Develop_Guide
• Country Support

Automatic replace unknown countries by "ZZ" countrycode

https://stackoverflow.com/questions/20973960/i-am-getting-zz-as-country-code-when-using-pytz

Review Docs and add it to master

Review the docs in the wiki and move them to master branch, it can be download by developers.

The moving particle is too large when Globe is small

Make moving particle responsive.

Add a panel to adjust various styles and generate json string of settings

See examples in three.js website.

Can not remove halo before init()

The halo can not be removed before init() function of controller is called.

Disable WebGL warning

Offset div can not click in Safari

When the div which will hold Gio globe have offset in Safari, the click function can not work.

Should be able to update surface brightness without calling update()

Currently, brightness won't be updated immediately after calling controller.adjustOceanBrightness, controller.adjustMentionedBrightness, or controller.adjustRelatedBrightness

Add examples

Add more examples for each api, so that developer can easily know how to use the library.

The examples should follow the example format defined in examples folder, and cover as much API as possible.

Missing countries

Hi!

When i tried to connect it with youtube stats, I had some issues with countrycode. I notice some missing countries from your singleton object :

• RE : REUNION ( https://countrycode.org/reunion )
• HK : HONG KONG ( https://countrycode.org/hongkong )
• GP : GUADELOUPE ( https://laendercode.net/fr/country/gp )
• ZZ : UNKNOWN ( https://stackoverflow.com/questions/20973960/i-am-getting-zz-as-country-code-when-using-pytz )

I only found it for now but I will post update if there are more of them.

Thanks for the lib anyway !

Add code pen live example

Usage of library in Node

We need to explore how to use our library after download from npm, and how to combine it with Threejs.

Refactor document in website

Update Github Readme.md

Package react source code with rollup

Our source can not be used directly with npm, we need to use rollup to package all react source code for npm publish.

Separate document website page

Three.js dependency is removed from package.json

Tried "npm install giojs --save", says "can't find module three"

Transform to latest Three.js version

Our code now is based on old Three.js version, we need to test which function is deprecated or not support by the latest three.js version, and changed our source code.

Can not drag on touchscreen device

Update the implementation of moving particle

default is not exported by node_modules/debug/src/browser.js

Add Support for Change Earth Surface Color

Add API in controller for users to set the earth surface color as they like.

Users may use hex color to set the color, the API may like setSurfaceColor(), and user can use it like:
setSurfaceColor("#54ce60")

Offset problem

The offset problem still exist if the div has several wrappers parent node between , it seems that can be solved by change the the calculate method of scrollTop.

Expose surface brightness ranges to GIO.Controller

Currently the ranges are defined as private variables in SurfaceHandler, it makes some user cases difficult since there's no way to get those ranges via GIO.Controller

Data Set for Demo

We need to create a big data set for demo to show get great visual experience.

Fix cross browser bugs

The library now can not work well in some browser, especially Safari, we may need to fix it.

Control the Continents on the Globe Surface

As gio.js can switch between different countries, Gio.js 2.0 would support continents control, so the developers could configure the continent in Json format.

Renaming suggestions

List of variables names, function names and parameter names to be renamed.
(new ideas come up now and then)

• GIO.Controller -> GIO
• GIO.Controller.addData -> GIO.bindData
• mentionedCountryCodes -> activeCountryCodes
• liveLoader -> loadScreen
• (continued ... )

Hard to see the change of brightness of "Mentioned"

For example, it's hard to tell the difference between the two instances in 09_API_adjustMentionedBrightness.html

Chain of Responsibilities for data processors

Use design like Chain of Responsibilities to process data by separate processors.

Add Color Globe Style

Now gio.js can only assign a specific for selected countries, Gio.js 2.0 will support assign specific color for all countries. The developers can assign color for countries like this:

controller.setCountryColor("US", 0xffffff);

Test and expose more API for controller

There are some APIs implemented in Gio.js, but haven't been exposed to developer, test, expose, and add more documentation for them!

Improve website performance

I noticed that the website is having a long latency on page loading (e.g. Document page), which is caused by some huge size images (e.g. A 1.5MB image just for 500 * 300 actual display size) and the arrangement of resource tags, etc.

In general, now that the demo is done, performance is the next step.

Cheers!

Add decription for CountryData

Add APIs for developers to manipulate Three.js and Stats.js object

Implement APIs to expose three.js object for developers. Gio.js will be more flexible with these kind of APIs.

• getScene()
• getStatsObject()

Add comment for Utils.wrap()

• Need to add comment for this method
• change parameter rangeSize -> range in wrap()

Utils.flattenCountryData() no need to sort and need to check for "undefined"

            var replica = JSON.parse( JSON.stringify( data ) );

            replica.sort( function ( a, b ) {

                return a[ valueKey ] - b[ valueKey ];

            } );

            var min = replica[ 0 ][ valueKey ];
            var max = replica[ replica.length - 1 ][ valueKey ];

In the code snippet above, sort() is used to get min/max, which lead to time complexity of O(N*log N). Instead, using a for loop for achieve the same goal for time of O(N):

            if (data === undefined || data.length === 0) 
                return;

            var min = data[0][ valueKey ];
            var max = data[0][ valueKey ];

            data.forEach(function(country) {
                if (country[ valueKey ] < min) 
                    min = country[ valueKey ];
                else if (country[ valueKey ] > max) 
                    max = country[ valueKey ];
            });

Implement different kinds of moving particle