LogoDuyệtSr. Data Engineer
HomeAboutPhotosInsightsCV

Footer

Logo

Resources

  • Rust Tiếng Việt
  • /archives
  • /series
  • /tags
  • Status

me@duyet.net

  • About
  • LinkedIn
  • Resume
  • Projects

© 2026 duyet.net | Sr. Data Engineer | 2026-02-27

Gio.js - 3D Globe Data Visualization

Note: This post is over 8 years old. The information may be outdated.

Gio.js là thư viện nguồn mở để visualization 3D globe, xây dựng dựa trên thư viện Three.js.
Gio.js cực kỳ dễ sử dụng và dễ customize.

Cài đặt

Include Three.js dependency và Gio.js library:

<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://raw.githack.com/syt123450/giojs/master/build/gio.min.js"></script>

Tạo thẻ <div> để render:

<!doctype html>
<html>
  <head>
    <!-- include three.min.js library-->
    <script src="three.min.js"></script>

    <!-- include gio.min.js library-->
    <script src="gio.min.js"></script>
  </head>
  <body>
    <!-- container to draw 3D Gio globe-->
    <div id="globalArea"></div>
  </body>
</html>

Khởi tạo và render dữ liệu:

<script>
  // get the container to hold the IO globe
  var container = document.getElementById('globalArea')

  // create controller for the IO globe, input the container as the parameter
  var controller = new GIO.Controller(container)

  // use addData() API to add the the data to the controller, know more about data format check out documentation about data: http://giojs.org/html/docs/dataIntro.html
  controller.addData(data)

  // call the init() API to show the IO globe in the browser
  controller.init()
</script>

Xem ví dụ tại Codepen.

References

  • Gio.js API document: http://giojs.org/html/docs/index.html
  • https://github.com/syt123450/giojs
Jul 1, 2018·8 years ago
|Web|
Javascript
|Edit|

Related Posts

Javascript Shorthands Tips

These Javascript shorthand tips will make your code look more cool and clean.

Oct 20, 2019·6 years ago
Read more

5 bí quyết viết JS conditionals tốt hơn

Trong Javascript, chúng ta phải sử dụng nhiều loại lệnh điều kiện (if ... else ...) khác nhau, sau đây là 5 bí quyết để viết lệnh if else nhanh hơn và chuyên nghiệp hơn.

Sep 20, 2018·7 years ago
Read more

Signale - Hackable console logger for Nodejs

Signale là một thư viện thay thế console logger trong Nodejs, cho kết quả đẹp, sexy hơn và nhiều chức năng.

Jul 19, 2018·8 years ago
Read more

gpu.js - Tăng tốc Javascript với GPU

Mình lướt github và vô tình thấy thư viện gpu.js này. gpu.js tự động compile mã Javascript thành một ngôn ngữ ánh xạ khác, và chạy trên GPU nhờ vào WebGL API. Nếu máy trình duyệt không có GPU, mã JS vẫn được thực thi bình thường.

Jul 26, 2017·9 years ago
Read more
On this page
  • Cài đặt
  • References
On this page
  • Cài đặt
  • References