Visualized user base using Three.js and WebGL

https://leansync.com/status

by rauar • 13 years ago

12 29 13 years ago

leansync.com

rauar14• 13 years ago

Position data is based on user-provided addresses (city and country only).

flexie2• 13 years ago

It is beautiful. I really like this :-)

rauar14• 13 years ago

Thank you. Appreciated ;)

mrdoob23• 13 years ago

cough cough

mcdee2• 13 years ago

So how much of this is open source and available? I can see lots of uses for something that looks this good and to which you can overlay your own information.

rauar14• 13 years ago

To be fair: I took one of the Google Chrome Experiments (can't find the exact demo right now but here's where they are hosted: http://www.chromeexperiments.com/webgl/), stripped it down, customized it (using particles instead of animated lines) and pump the geo data into the globe.

So I'd say with Three.js, Google's code for the Globe it's in the end just a couple of Javascript lines for the page and the customization of the globe. I'd say 98% is open source from a technical perspective.

mcdee2• 13 years ago

Interesting. Would be great to have something like that with interaction built out as a simple component. Hmm...

gotrythis2• 13 years ago

This one I imagine: http://workshop.chromeexperiments.com/cloudglobe/

yogti• 13 years ago

Is there a possibility of interaction with the provided data on the globe?

Also I would really like to see the "address network", e.g. lines between the dots.

rauar14• 13 years ago

in progress ;)

Plus real-time push visualization using node.js and websocket...

todi• 13 years ago

It all happens inside the DOM, whit all interaction the browser provides.

rauar14• 13 years ago

Interaction is possible using the mouse:

- left-button and mouse move = rotation

- mouse wheel = zoom in/out

avodonosov• 13 years ago

Hm, lot of users are in the ocean (after I rotated the globe?)

rauar14• 13 years ago

Seriously ? Let's hope they can swim :)

It happened to me one or two times that I thought the same because the dark color of the sea looks somehow more solid than the continents.

If it's really a rendering bug could you share a screenshot ?

davydka• 13 years ago

Adding touch events would be nice. Using Chrome beta for android and I can see the globe, but can't interact easily.

rauar14• 13 years ago

Absolutely. I had the same thought when checking with my Nexus S. Not sure how easy/difficult it is to implement though as touch events are always a bit different than mouse controls.

dsowers2• 13 years ago

Anyone interested in building something based on this should think twice. I just started building my own version of the globe and it has crashed my computer twice already. (brand new macbook pro retina using chrome). Something related to chrome and this webgl isn't playing nice together. Force quit doesn't even save it. Needs a hard reboot.

rauar14• 13 years ago

Macbook Pro 2012 here. I only experienced one issue which is somehow similar and caused by resuming from sleep when the webgl tab is still the active one. Then Chrome and everything else from MacOS will hang for 1 minute until Chrome figures out that WebGL crashed. But I do not have to hard reset for recovery. Just wait a minute....

I always close the tab before closing the lid.

dsowers2• 13 years ago

For me it happened when I have it in a background tab. If I switch away for a while and then click back on the tab it will freeze.

Visualized user base using Three.js and WebGL

Related Stories