Kae Nagano - Fab Futures - Data Science

Home About

Three.js Globe Application – Implementation Overview

This section summarizes the key implementation steps and design decisions used to build the interactive Fab Academy Globe visualization. Rather than a step-by-step tutorial, it focuses on the core technical components and how they were combined.

Base Framework

The implementation is based on the official examples from three-globe.

The basic globe example was used as the starting point, including:

• Three.js scene, camera, renderer
• ThreeGlobe() initialization
• Earth texture and basic interaction (rotation, zoom)

Lab and Country-Level Visualization

Country Polygons (Student Distribution)

• The Country Polygon example was adapted to visualize student distribution.
• Each country polygon’s altitude (height) is scaled by the total number of students from that country.
• This provides a coarse, global overview of Fab Academy participation at the national level.　　
• Country boundaries are based on the GeoJSON data used in the official three-globe examples (derived from the world-atlas / Natural Earth dataset).
• Data preprocessing was required to align country names between GeoJSOn and Fab Academy country labels.

Fab Lab Nodes (Local Scale)

• Fab Lab locations are visualized using spheres placed on the globe surface. Each lab node uses a double-sphere structure:
  • Outer sphere: total number of enrolled students
  • Inner sphere: number of graduates
  • Sphere radii are scaled proportionally to the data values.
  • This layered design allows student volume and graduation outcomes to be compared at a glance.
  • The spheres were adjusted to sit on the surface of the country polygons whose heights were scaled by student counts; however, some positioning bugs still remain.

Interaction (Raycasting)

• Raycasting is used to detect clicks on Fab Lab spheres, since standard 2D mouse (XY) hit detection is not applicable in a 3D scene.

• When a sphere is clicked:

  • Lab-specific information (name, country, students, graduates) is displayed

• Invisible or non-interactive objects (e.g. trend rings) have raycasting disabled to avoid interference.

Social Trend Visualization (Trend Rings)

Social interest is visualized as circular rings surrounding the globe, one ring per keyword:

• Fablab
• 3D Printer
• Data Science
• Arduino
• SDGs
• Maker Faire

Each ring represents Google Trends data for a given year.

Implementation

• Rings are implemented as THREE.LineLoop geometries.
• Ring radius is determined by the yearly trend value.
• Vertical offset separates rings visually.

Mutual Information Encoding

• Mutual Information (MI) between Fab Academy and each keyword is encoded as a sinusoidal oscillation on the ring:

  • Higher MI → larger wave amplitude

• The wave is animated using:

  • sin(frequency * angle + phase)

  • A time-based phase offset for smooth motion

Student Activity Visualization (Git Commit Arcs)

• Git commit visualization is based on the Arc Links example.

• Each commit is visualized as an arc:

• Start: student’s Fab Lab location

• End: MIT (assumed Git server location)

• Commits are animated according to their timestamps, creating a temporal flow.

• Behavioral Clustering

  • Student behavior was clustered using Cluster-Weighted Modeling (CWM).

  • Each cluster is assigned a distinct color.

  • Arc color reflects the behavioral cluster of the student who made the commit.

This creates a “shooting-star” effect that reveals both when and how students work.

Time Control

Year Slider

• A year slider allows switching between datasets (2019–2025).

• Changing the year updates:

  • Country polygon heights
  • Lab sphere sizes
  • Trend rings
  • Commit arcs

• Intra-Year Time Slider

  • A second slider controls time progression within a year.

• Git Commits appear gradually according to their timestamps.

Graduation Event Visualization

• The right edge of the time slider corresponds to the Fab Lab Conference of that year.

• At this point:

  • Graduates are visualized as arcs flowing from each lab to the conference location

  • A celebratory particle-based firework effect is triggered at the destination

This layer emphasizes Fab Academy as a global community, not just a dataset.

Design Philosophy

• The globe integrates:

  • Structural data (labs, countries)

  • Behavioral data (commits, engagement)

  • Social context (trends)

  • Community events (graduation)

• The goal is not only analysis, but making the network feel alive.

• While the current version uses historical data, the architecture allows future extension to real-time visualization, especially for Git activity.

About the Code and Data Availability

The core visualization logic is implemented in modular JavaScript files located in the code/ directory .

Due to repository size limitations, large datasets such as raw Git commit logs, Google Trends time series are not included. These datasets were processed offline and loaded into the visualization through predefined JSON and CSV schemas.　

Finally, the project was deployed on Netlify.　Netlify provides a simple way to publish static web applications without a build step, making it suitable for rapid prototyping and sharing interactive visualizations.　　

To deploy the project on Netlify, the locally running application was slightly adjusted. JavaScript modules were loaded using native ES module syntax and CDN-hosted dependencies, and relative paths were used for local assets and data. This allowed the project to run as a fully static site without a build step.

ChatGPT was used in this project not through a single prompt, but as an iterative aid, building upon the official three-globe examples. It was mainly used interactively for the following purposes:

• how to refactor example scripts into a node-based modular structure
• how to implement object picking in a 3D scene using raycasting
• how to design particle-based fireworks for celebratory events
• how to resolve rendering, interaction, and performance issues
• how to improve visual clarity and overall quality
• how to deploy the project on Netlify

Globe code :

• index.html
• src/main.js
• src/globe/commitViz.js
• src/globe/initGlobe.js
• src/globe/labMeshes.js
• src/globe/loadData.js
• src/globe/updatePolygons.js
• src/trends/trendData.js
• src/trends/trendRings.js

Summary

This Globe application combines multiple data layers and visualization techniques to present Fab Academy as an evolving, interconnected global learning network. Rather than focusing on individual metrics, it emphasizes relationships, dynamics, and shared experience.