DataReels Animator 🏙️ 🎬

Transform your data into stunning, cinematic 3D animations and videos. DataReels Animator is a browser-based tool that takes a simple JSON file and generates an immersive 3D bar chart within a dynamic, animated cityscape. Create captivating video tours of your data, ready for sharing on platforms like YouTube and TikTok.

<img src="screenshot.png">

---

✨ Key Features

• Dynamic 3D Bar Charts 📊: Automatically generates beautiful 3D columns from your data, placed in a rich virtual environment.
• Cinematic Camera Tours 🎥: One-click "Preview Tour" mode that flies the camera smoothly from one data point to the next, focusing on each one.
• One-Click Video Recording 🎬: Record your animated tours directly from the browser in different aspect ratios.
  • 16:9 for YouTube & standard video.
  • 9:16 for TikTok, YouTube Shorts & Instagram Reels.
• Custom JSON Data 📝: Easily upload your own data via a JSON file. A template is provided for you to download and get started immediately.
• Immersive Environment 🌃: Features a procedural cityscape, a dynamic sky with a sun, animated clouds, and even flying birds to make your visualization feel alive.
• Interactive Controls 🎮: Freely explore the scene with orbit controls when not in tour mode.
• Sleek, Modern UI ✨: A collapsible, glassmorphism-style control panel that stays out of your way.
• Zero Dependencies 🚀: A completely self-contained index.html file. No build process or server needed. Just open it in a browser!

---

🚀 Live Demo & Usage

Getting started is as simple as it gets!

1. ▶️ Try the Live Demo!
2. Clone this repository: git clone https://github.com/datareels/datareels.github.io.git
3. Open the index.html file in your favorite modern web browser (like Chrome or Firefox).

Controls Guide

• Upload: Choose your own data.json file to visualize.
• Download: Get a copy of the current data structure as dataset_template.json to use as a starting point.
• Preview Full Tour: Watch an interactive preview of the camera animation without recording.
• Record 16:9 / Record 9:16: Starts the tour and records it as a video file (.mp4 or .webm) which will be automatically downloaded when finished.
• Stop: Halts the current tour or recording and returns to the overview position.
• « / »: Collapse or expand the control panel.

---

📝 The Data Format

The power of DataScape Animator comes from its simple and flexible JSON data structure.

The main object has two keys: sceneSettings and data.

{
  "sceneSettings": {
    "heightScale": 0.8
  },
  "data": [
    {
      "name": "Chicken",
      "value": 31.0,
      "rank": 5,
      "description": "Lean poultry",
      "color": "#FFDAB9",
      "columnColor": "#806d5c",
      "primitiveScale": 1.0,
      "modelPath": null,
      "labelStyle": {
        "borderColor": "rgba(255, 215, 0, 0.7)",
        "value": { "color": "#FFD700" }
      }
    }
  ]
}

Field Breakdown

sceneSettings

| Key | Type | Description | | :------------ | :----- | :------------------------------------------------------------------- | | heightScale | Number | A multiplier to control the overall height of the bars in the scene. |

data (Array of objects)

| Key | Type | Description | | :--------------- | :----- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | name | String | Required. The main title for the data point. | | value | Number | Required. The numerical value that determines the height of the bar. | | rank | Number | Optional. A rank number displayed on the label. | | description | String | Optional. A short subtitle displayed below the name. | | color | String | Optional. The color of the representative 3D primitive on top of the bar. | | columnColor | String | Optional. The color of the main bar itself. | | primitiveScale | Number | Optional. A multiplier for the size of the 3D primitive. | | modelPath | String | (Future Use) Intended for loading a custom 3D model (.glb/.gltf). Currently uses basic shapes. | | labelStyle | Object | Optional. Override the default styles for this specific label. You can customize borderColor, title, description, value, and rank styles (e.g., font, color). |

---

💻 Technologies Used

• Three.js: The core 3D rendering library.
• TWEEN.js: For smooth camera animations and transitions.
• HTML5, CSS3, JavaScript (ESM): All bundled into a single file for ultimate portability.