3D Data Globe

3D Data Globe

3D Data Globe is an innovative standalone visualization tool that effortlessly displays device and user activity data in a captivating 3D environment. Each device appears as a glowing blob, dynamically sized to reflect its level of activity, while users can interactively explore significant events for each device by simply clicking on a blob. This interaction reveals small satellite nodes detailing recent events, alongside a dedicated panel showcasing the specific activity log for that device.

Key Features

• Simple and Standalone: This project is built using 3d-force-graph and Three.js. No build steps or additional dependencies are necessary, enabling instant use with just one HTML file.
• Zero Setup: Includes synthetic demo data to demonstrate functionality out of the box, facilitating immediate engagement without complex configurations.
• Customizable: Easily integrate personal device data by replacing the default demo dataset with user-specific data. The structure is designed for flexible integration, ensuring the visualization can be tailored to specific needs.

Integrating Custom Data

The data for visualization requires a specific structure, illustrated below:

{
  "id": "device_123",
  "points": 42,
  "platform": "ios" | "android" | "web",
  "city": "Some City",
  "totalDurationMs": 1234567,       
  "size": 8.5,                       
  "color": "#9fd8f5",                
  "inactive": false,                  
  "events": [
    { "type": "session_start", "time": new Date(...), "detail": "App opened" }
    // ...
  ]
}

To implement custom user data, follow these steps:

1. Replace the DUMMY_USERS array in the code with a data-fetching mechanism from your own backend or database.
2. Modify the baseUsers variable before the function initPresentation() is called.
3. Avoid direct browser connections to databases with sensitive keys to maintain security and integrity.

AI Coding Assistant Integration

Utilize AI coding assistants to streamline the integration of your own data effortlessly. Use tailored prompts to ensure data is transformed into the format expected by the visualization.

Removing Unnecessary Elements

To customize the HTML further by removing the support card, simply delete its corresponding block and CSS styling, enhancing the visual focus on the data visualization.

3D Data Globe offers an engaging way to visualize user and device activity, making it easier to understand and analyze data interactively in a three-dimensional space.