-
Notifications
You must be signed in to change notification settings - Fork 0
Getting Started
tsatsuamable edited this page Apr 10, 2026
·
1 revision
Welcome! This guide will take you from zero to your first VR visualization in 5 minutes.
- A modern web browser (Chrome, Firefox, Edge)
- Basic HTML/JavaScript knowledge
- (Optional) A VR headset for full immersion
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/1.7.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/nemosyne@latest/dist/nemosyne.min.js"></script>
</head>
<body>
<a-scene>
<!-- Your visualization here -->
</a-scene>
</body>
</html>npm install nemosyne aframeimport 'aframe';
import 'nemosyne';<a-scene>
<!-- Camera -->
<a-entity position="0 1.6 -5">
<a-camera></a-camera>
</a-entity>
<!-- Bar Chart -->
<a-entity position="0 0 -3">
<a-entity nemosyne-artefact-v2="
spec: {
id: 'sales-chart',
geometry: { type: 'cylinder', radius: 0.3, height: 2 },
material: { properties: { color: '#00d4aa' } }
};
dataset: {
records: [
{ month: 'Jan', sales: 100 },
{ month: 'Feb', sales: 150 },
{ month: 'Mar', sales: 120 },
{ month: 'Apr', sales: 200 }
]
};
layout: grid;
layout-options: { columns: 4, spacing: 2 }
"></a-entity>
</a-entity>
</a-scene>- Save the file as
index.html - Open it in your browser
- You should see 4 green cylinders arranged in a row
- Click and drag to look around (or use WASD keys)
- Enter VR mode (click the VR button in bottom right)
Let's make the chart interactive:
<a-entity nemosyne-artefact-v2="
spec: { id: 'interactive-chart', /* ... */ };
dataset: { records: [/* ... */] };
transforms: [{
property: 'height',
$data: 'sales',
$range: [0.5, 3]
}];
behaviours: [{
trigger: 'hover',
action: 'scale',
params: { factor: 1.2 }
}, {
trigger: 'click',
action: 'drill',
params: { target: 'detail-view' }
}]
"></a-entity>- Basic Concepts - Learn about layouts and transforms
- Component Gallery - Explore available visualizations
- Examples - See what others have built
- Check browser console for errors
- Ensure A-Frame loaded correctly
- Verify your data format
- Reduce number of data points (start with < 100)
- Use simpler geometries (sphere vs complex mesh)
- Enable VR mode for better rendering
- Use HTTPS in production (WebXR requires it)
- Ensure browser supports WebXR
- Try on a different device
Need help? Join our Discord or open an issue on GitHub.