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.

---

✨ 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.