.png)
4 months ago
2
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.
- 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!
Getting started is as simple as it gets!
- ▶️ Try the Live Demo!
- Clone this repository: git clone https://github.com/datareels/datareels.github.io.git
- Open the index.html file in your favorite modern web browser (like Chrome or Firefox).
- 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 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" }
}
}
]
}
| heightScale | Number | A multiplier to control the overall height of the bars in the scene. |
| 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). |
