Explore the features and capabilities of the Nocturna Wheel.js library. This SVG-based astrological chart visualization provides a beautiful and interactive way to display natal charts.
// Install via npm
npm install nocturna-wheel
// Or include directly in your HTML
<script src="https://unpkg.com/nocturna-wheel/dist/nocturna-wheel.min.js"></script>
// Create chart instance
const chart = new NocturnaWheel({
container: 'chart-container',
planets: {
sun: { lon: 85.83 },
moon: { lon: 133.21 },
// ... other planets
},
houses: [
{ lon: 300.32 }, // 1st house cusp
// ... other houses
]
});
// Render the chart
chart.render();
// Toggle features
chart.togglePlanet('pluto', false);
chart.toggleHouses(false);
chart.togglePrimaryPlanets(true);
chart.toggleSecondaryPlanets(true);
// Create dual chart with independent inner and outer circles
const wheelChart = new WheelChart({
container: 'chart-container',
// Natal chart (outer circle)
planets: {
sun: { lon: 85.83, color: '#000000' },
moon: { lon: 133.21, color: '#000000' },
// ... other natal planets
},
// Transit/Partner chart (inner circle)
secondaryPlanets: {
sun: { lon: 115.20, color: '#FF5500' },
moon: { lon: 200.45, color: '#0066CC' },
// ... other transit/partner planets
},
houses: [
{ lon: 300.32 }, // 1st house cusp
// ... other houses
],
config: {
radius: {
innermost: 90 // Radius for the inner circle
},
// Three independent aspect systems
primaryAspectSettings: { /* natal-to-natal */ },
secondaryAspectSettings: { /* transit-to-transit */ },
synastryAspectSettings: { /* natal-to-transit */ }
}
});
// Render the dual chart
wheelChart.render();
// Control each aspect type independently
wheelChart.togglePrimaryAspects(true); // Outer circle aspects
wheelChart.toggleSecondaryAspects(false); // Inner circle aspects
wheelChart.toggleSynastryAspects(true); // Cross-circle aspects
The Nocturna Wheel.js library provides extensive configuration options:
For more detailed documentation, please visit the GitHub repository.