Complete Guide

Learn how to create stunning 3D data visualizations with DataReels Animator. From your first visualization to advanced techniques and best practices.

🚀 Quick Start

Open the Tool

Navigate to the 3D Tool page and familiarize yourself with the interface. You'll see a stunning 3D environment with sample data already loaded.

Launch Tool →

Try the Demo

Click "Preview Full Tour" to watch the cinematic camera animation. Use your mouse to explore the 3D scene when not in tour mode.

Upload Your Data

Download the template JSON file, modify it with your data, then upload it to see your own visualization come to life.

📚 Step-by-Step Tutorials

Tutorial 1: Your First 3D Visualization

Launch the Tool

Go to the 3D Tool page. You'll see a 3D environment with sample protein content data already loaded, showing colorful bars in a cityscape setting.

Explore the Interface

The control panel on the left contains all the tools you need:

Upload/Download: Import your data or get the template
Preview Full Tour: Watch the camera animation
Record buttons: Create videos in different formats
Collapse button (« »): Hide/show the control panel

Watch the Tour

Click "Preview Full Tour" to see the cinematic camera movement. The camera will smoothly fly from one data point to the next, focusing on each bar with its label and value clearly visible.

Interact with the Scene

When not in tour mode, use your mouse to explore:

Left click + drag: Rotate the view
Right click + drag: Pan the camera
Scroll wheel: Zoom in/out

Tutorial 2: Creating Your Own Data Visualization

Download the Template

Click "Download" in the tool to get a JSON template with the current data structure. This will give you a file called dataset_template.json.

💡 Pro tip: You can also download sample datasets from ourExamples page.

Understand the Structure

Open the JSON file in any text editor. You'll see two main sections:

{
  "sceneSettings": {
    "heightScale": 0.8
  },
  "data": [
    {
      "name": "Your Data Point",
      "value": 25.5,
      "rank": 1,
      "description": "Optional subtitle",
      "color": "#FF6B6B",
      "columnColor": "#8B2635"
    }
  ]
}

Replace with Your Data

Replace the sample data with your own information:

name: The title for your data point (required)
value: The numerical value (required)
rank: Optional ranking number
description: Optional subtitle text
color: Hex color for the 3D shape on top
columnColor: Hex color for the main bar

Upload and Visualize

Save your JSON file and upload it using the "Upload" button. Your visualization will immediately update with your data. If there's an error, check that your JSON syntax is correct.

Tutorial 3: Recording and Sharing Videos

Choose Your Format

DataReels Animator offers two recording formats:

16:9 format: Perfect for YouTube, presentations, and desktop viewing
9:16 format: Ideal for TikTok, Instagram Stories, and mobile content

Start Recording

Click either "Record 16:9" or "Record 9:16" depending on your needs. The screen will resize to the correct aspect ratio and the tour will begin automatically.

⚠️ Important: Keep the browser tab active and visible during recording for the best quality results.

Wait for Completion

The camera tour will play through automatically, visiting each data point. The recording will stop automatically when the tour is complete, and your video file will download automatically.

Share Your Creation

Your video is ready to upload to social media platforms, include in presentations, or share with colleagues. The file format (MP4 or WebM) will depend on your browser's capabilities.

🎯 Best Practices & Tips

✅ Data Preparation Tips

•Use clear, concise names (2-3 words work best)
•Keep descriptions short and meaningful
•Use consistent units for all values
•Limit to 10-15 data points for best results
•Sort data by value for logical tour progression

🎨 Visual Design Tips

•Choose contrasting colors for better visibility
•Use brand colors to match your identity
•Test different height scales (0.5 to 1.2 works well)
•Highlight the most important data with custom styling
•Consider your audience and platform when choosing formats

🎬 Video Creation Tips

•Close unnecessary applications before recording
•Keep the browser tab active during recording
•Use Chrome or Firefox for best recording support
•Preview the tour before recording to check timing
•Consider adding background music in post-production

🚫 Common Mistakes to Avoid

•Don't use too many data points (>20)
•Avoid colors that are too similar
•Don't make descriptions too long
•Avoid extreme height scale values (<0.2 or >2.0)
•Don't minimize the browser during recording

🎉 Ready for More?

🎬