dataarts / webgl-globe Goto Github PK

http://www.chromeexperiments.com/globe is not working

What would be the proper way to delete old markers, so that I can add new data?

I want to draw a curve between two points on the globe. If somebody has done it, I'll be glad to know how. If not, I'll be glad to code it myself and send a PR if this would be of interest. In that case, which part of the code should I put this?

Is the limit of one series within the array 29849? When I create data with more values I get the error that "Uncaught TypeError: Cannot read property 'x' of undefined" and no globe is created than.

I need a globe where a user can hover and click over some areas on the globe (for examples countries, the sea). I want to change the color of the current hovered country and i also want the user to get redirected to another specific page when he clicks on a country. Is this possible with this webgl-globe library? If not, do you know another library which supports onClick and hover events on the countries and the sea?

Hello,

On the iPad Air the globe loads and spins up in 3d but you cannot rotate the globe for some reason!

Is there anyway to fix this?

Thanks

Are there any plans of updating this experiment to polymer 1.0?

I didn't see this as a feature, but would be awesome.

I was told (perhaps wrongly) that the Polymer version of the globe was stable. When I run it, I get three errors and a black screen. Even when running it from python -m http.server 8080's localhost:8080. I get errors about "iterator h" from events.js line 176, errors about reading a property 'DELEGATES' of an undefined object from events.js line 15, and errors at multiple points in polymer-element.js about the getDelegates( ) function not existing. I'm sure these are all related, and if I'm reading what I have right, fixing the problem with "iterator h" might fix the entire thing. But I don't know how to fix the problem, and I'm kind of afraid I'll break it further if I try.

(FYI none of the files have been altered from the state in which I downloaded them).

Is there a API to change the texture of the globe. Example daytime and night time.

How can we achieve that the globe only zooms in/out when the mouse is over the globe itself, instead of that the mouse is just over the canvas?

Currently, whenever the screen changes sizes at all the whole canvas goes black and will not return regardless of any future resizing/reverting to the original size.

Hi there,

I'm trying to render 8 different series, each with a different number of points in it (between 2 and 5 points, so really small amount of data).

This seems to cause the following error in the three.min.js library - Uncaught TypeError: Cannot read property 'x' of undefined. If I include less data (so 2 less points in the first series), this error is not thrown and the globe renders correctly. It's almost as though if the first series has more points in it than other series, it causes this error.

Does this mean that all series need to have the same number of points in them? Or that the first series should be the series with the most points? It seems that would be really limiting if that were the case. I hope it's not!

I'd really appreciate some help if at all possible :)

Cheers,
Annie

I have an idea for a globe where people can register their profile data (including location) and the lines which extrude from the surface are then clickable to reveal that users profile.

Is this at all possible??

I want to customize the colour of points on globe based on magnitude. And I need to get the latitude longitude of the point where the user has clicked on the globe. Can you help me with the reverse calculations. Looking forward for support.

Is there a API to highlight each country with a color based the data.

Is there any way to change the data that is displayed on the globe? (ie: animate the data changing over time)

Edit: never mind, just saw the demo. Awesome job!

When I open index.html in the folder globe, there is no globe. This is what it looks like, and I get the error messages logged to console in the bottom right.

Keeping the animated field on true makes all markers render flat on the globe, eg, 0 magnitude. Setting the animated field to false causes the markers to render at their proper magnitudes.

for (i=0;i<data.length;i++) { globe.addData(data[i][1], {format: 'magnitude', name: data[i][0], animated: false}); }

Any ideas on why this is happening, and a fix?

I've got this CrossOrigin issue when the image is found here, but the image has no reference (I already tried to erase the origin and setted to anonymous)

with this issue the graph just don't render, but when I remove the background it render normally just logging image not found.

I can't seem to figure out how to add a new point -- at a new lat/long -- after the globe has been rendered. I basically want to use this for real-time data, so when a new data point comes in, how can I add the point to the already-rendered globe?

Thanks!!

Hi everybody

Could someone tell me if it is possible to label each point on json? It could be great to keep organized and easy to use the json file.

Another question is: "Is there any smaller json file than the original?" I would like to start adding points but the original file is too large and difficult to read.

Thanks in advance
Ezequias Rocha

The touch interactions with globe like panning, pinching don't work on mobile devices.

Dose any one known a way to auto rotate the globe with out using the mouse. Like have Rotations per minute or something like that?

I want to remove the constraint that prevents you from rotating the globe upside down: when you rotate to the North or South poles I want it to keep going.

Here's my current experiment: https://mgiraldo.github.io/edda-globe

I tried modifying the onMouseMove function but my geometry math wouldn't help.
The specific lines of code: https://github.com/mgiraldo/edda-globe/blob/gh-pages/globe/globe.js#L321-338

Can we find the lat long value of point in center updated on zoom/rotation?

Currently, the colors are assigned to points at the beginning and don't change as the magnitudes get updated.

When I rewrite the JSON file, and set the last data has only one coordinate. But the result still render more than one coordinates. How can I solve it ?

Hi,

On the Samsung S6 Edge, Google Chrome says that this browser does not support WebGL!

Slight problem with Google Chrome!

Hi again,

Apologies for adding another issue, but I'm seeing some strange behaviour. I am plotting this data:

[["departure",[52.3,4.76666666666667,1.0,1.36666666666667,103.983333333333,0.0]],["arrival",[1.36666666666667,103.983333333333,1.0,52.3,4.76666666666667,0.0]]]

This should result in 2 series; the first represents departures where the first point is Amsterdam and the second point (which is set to magnitude = 0) is Singapore. The second series are arrivals where the first point is Singapore and the second point (which also has magnitude set to 0) is Amsterdam.

If I try to each series independently, by hovering over some text, only the first point is drawn in the correct position. So in this case, when the globe first renders it renders departures, focusing on Amsterdam which is drawn in the right place. When I mouse-over arrivals though, Singapore is not drawn in the right place. I find the same happens if I reverse the order of the series so arrivals are first - then Singapore is rendered in the right place and Amsterdam isn't.

What could be the problem? The data seems ok to me?

When Singapore is rendered first, this is where Singapore is rendered (correct):

When Singapore is rendered second (on mouse-over), this is where Singapore is rendered (incorrect):

Both of the maps above are using the same coordinates for Singapore (see data above).

Appreciate any help.

Cheers,
Annie

In the original example (globe folder) the magnitudes are constantly increasing over the years so the magnitudes are rendered correctly

with magnitude fluctuating the magnitude is shown incorrectly ( 1992 retains the same amplitude as 1991)

[
["1990",[0,0,0.02]]
,["1991",[0,0,0.05]]
,["1992",[0,0,0.02]]
]

magnitudes are rendered correctly with magnitudes constantly increasing

[
["1990",[0,0,0.02]]
,["1991",[0,0,0.05]]
,["1992",[0,0,0.07]]
]

Hello,

I have this doubt,
Why is necessary include this padding to the morphTargets array? and less than 8?

        if (this._baseGeometry.morphTargets.length < 8) {
          console.log('t l',this._baseGeometry.morphTargets.length);
          var padding = 8-this._baseGeometry.morphTargets.length;
          console.log('padding', padding);
          for(var i=0; i<=padding; i++) {
            console.log('padding',i);
            this._baseGeometry.morphTargets.push({'name': 'morphPadding'+i, vertices: this._baseGeometry.vertices});
          }
        }

(snippet from function createPoints()... within Globe.js)

if latter in the this.defineSetter function we do this, using only the MorphTarget:

    var morphDict = this.points.morphTargetDictionary;
    for(var k in morphDict) {
      if(k.indexOf('morphPadding') < 0) {
        validMorphs.push(morphDict[k]);
      }
    }

(snippet from this.defineSetter('time', function(t)... within Globe.js)

So.
when are the morphPadding useful?

Thanks so much for your help, I am trying to understand all the code

update 2015 to 2046

I set up a server using https://www.npmjs.com/package/http-server and tried to run the project, but my computer hangs(not just the browser) when I open the file in /globe/index.html.
Operating system : Linux Mint 17.2
Browser: Chrome 54.0.2840.71 (64-bit)

The globe works fine, without any lags, when accessed via https://www.chromeexperiments.com/globe
Is there any thing wrong with my workflow?

I am trying to add a WebGL Globe visualization into a custom SaaS application (Splunk) and instead of getting lines out of the globe, I only see dots.

I suspect the application has its own CSS or something that is overriding and hiding or preventing the lines from coming out. But I have no idea where to start debugging and what "troublesome" CSS properties I should be looking for.

I'm not sure if this helps, but here are 2 screenshot of the CSS properties of the 2 elements: the <div> and the <canvas> that is inside the <div>:

https://www.dropbox.com/s/x7qqkhimkh34h8q/Screenshot%202014-09-26%2000.40.35.png?dl=0 https://www.dropbox.com/s/h79190dgf2k99w6/Screenshot%202014-09-26%2000.40.44.png?dl=0

My sample JSON data is from this tutorial.

Any help or tip is appreciated! Thanks! :-)

Same exact Stack Overflow question here (if you guys want points lol).

Hello everybody

I am having trouble to see index.html after a checkout. Please check this error out.

See picture below:

Thanks in advance.

Hello,

Is there a Typescript definition file available for globe.js for usability in Angular 2 applications?

Thank you in advance!

How can i change were the globe starts or even auto rotate when you open the webpage?

256 mb internal memory to extend

The Readme.md shows the format to look like:

var data = [
[
'seriesA',
[
[ lattitude, longitude, magnitude ],

However, the demo JSON file (population909500.json) is formatted like:

var data = [
[
"1990",
[6,159,0.001,30,99,0.002,45........very long array

Probably this is a stupid question... but how could I include the webjl-globe in my project? which js or css link I should refer to in my header section? Or could we get it from npm or bower?

Thanks:)

I loaded a tiny dataset to test things out, and things worked fine. I created my own script using what is contained in the README (I'm relatively inexperienced here), and suddenly my markers are showing up as black, not the multicolor gradient a la the population globe. Any tips?