### Display Celestial Map

Source: https://github.com/ofrohn/d3-celestial/blob/master/demo/triangle.html

This code snippet initializes the D3-Celestial library with the specified configuration and displays the celestial map.

```javascript
Celestial.display(config);
```

--------------------------------

### D3 Celestial - Wall Map for Printing

Source: https://github.com/ofrohn/d3-celestial/blob/master/readme.md

Example demonstrating how to configure D3 Celestial for a wall map suitable for printing.

```javascript
/*
 * D3 Celestial configuration for a printable wall map.
 */

const celestial = new Celestial();

celestial.settings({
    width: 2000, // Set a high resolution for printing
    height: 1000,
     அளவு: 8, // Higher magnitude limit for more stars
    constellations: true,
    constellationBoundaries: true,
    constellationLabels: true,
    milkyWay: true,
    gridLines: true,
    background: '#000000' // Black background
});

// To save the map as an image, you would typically use canvas export functionality
// or a server-side rendering approach if needed.
// For client-side saving, you might need additional libraries or methods
// to export the canvas content.
// celestial.display('map'); // Render to a div if needed for preview
```

--------------------------------

### D3 Celestial - Animated Planets

Source: https://github.com/ofrohn/d3-celestial/blob/master/readme.md

Example showing how to display animated planets moving across the ecliptic.

```javascript
/*
 * D3 Celestial example for animated planets.
 * This requires specific data files that include planet ephemerides.
 */

const celestial = new Celestial();

celestial.settings({
     அளவு: 4,
    constellations: true,
    planets: true, // Enable planet display
    coordinate: 'ecliptic' // Use ecliptic coordinates for planets
});

// To achieve animation, you would typically update the date
// periodically using celestial.setDate() and re-render or update the view.

// Example of updating time for animation (simplified):
/*
setInterval(function() {
    const now = new Date();
    celestial.setDate(now);
    // If the map doesn't auto-update, you might need to call a refresh method
}, 1000); // Update every second
*/

celestial.display('map');
```

--------------------------------

### D3 Celestial - Basic Usage

Source: https://github.com/ofrohn/d3-celestial/blob/master/readme.md

Demonstrates how to use D3 Celestial for a simple celestial map. This example focuses on displaying stars and basic configuration.

```javascript
/*
 * Example of basic D3 Celestial usage.
 * Assumes you have D3.js and celestial.js included in your HTML.
 */

// Initialize the celestial map
const celestial = new Celestial();

// Configure the map (example settings)
celestial.settings({
     அளவு: 6,
    constellations: true,
    constellationBoundaries: false,
    milkyWay: true,
    gridLines: true
});

// Render the map in a container element (e.g., <div id="map"></div>)
celestial.display('map');

// To load local JSON files with Chrome, run it with:
// chrome --allow-file-access-from-files
// Alternatively, use a local web server.
```

--------------------------------

### D3-Celestial Configuration

Source: https://github.com/ofrohn/d3-celestial/blob/master/demo/triangle.html

This JavaScript code defines the configuration object for D3-Celestial, including projection settings, background styles, datapath, star display options, DSO visibility, Milky Way styles, and asterism line and text styles. It also defines the GeoJSON structure for the Summer Triangle asterism.

```javascript
var config = {
  projection: "airy",
  center: [-65, 0],
  background: { fill: "#fff", stroke: "#000", opacity: 1, width: 1 },
  datapath: "https://ofrohn.github.io/data/",
  stars: { colors: false, names: false, style: { fill: "#000", opacity:1 }, limit: 6, size: 5 },
  dsos: { show: false },
  mw: { style: { fill:"#996", opacity: 0.1 } },
};

var lineStyle = {
  stroke:"#f00",
  fill: "rgba(255, 204, 204, 0.4)",
  width: 3
};

var textStyle = {
  fill:"#f00",
  font: "bold 15px Helvetica, Arial, sans-serif",
  align: "center",
  baseline: "middle"
};

var jsonLine = {
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "id": "SummerTriangle",
      "properties": {
        "n": "Summer Triangle",
        "loc": [-67.5, 52]
      },
      "geometry": {
        "type": "MultiLineString",
        "coordinates": [
          [
            [-80.7653, 38.7837],
            [-62.3042, 8.8683],
            [-49.642, 45.2803],
            [-80.7653, 38.7837]
          ]
        ]
      }
    }
  ]
};
```

--------------------------------

### Project Files

Source: https://github.com/ofrohn/d3-celestial/blob/master/readme.md

Essential project files including the main stylesheet, license information, and the README file.

```bash
celestial.css
LICENSE
readme.md
```

--------------------------------

### Redraw Function for Point Objects

Source: https://github.com/ofrohn/d3-celestial/blob/master/readme.md

Defines the redraw logic for point objects. It iterates through each object, checks for visibility, gets its projected coordinates, and applies styles for drawing on the canvas.

```js
redraw: function() {
  // Select the added objects by class name as given previously
  Celestial.container.selectAll(".snr").each(function(d) {
    // If point is visible (this doesn't work automatically for points)
    if (Celestial.clip(d.geometry.coordinates)) {
      // get point coordinates
      var pt = Celestial.mapProjection(d.geometry.coordinates);

```

--------------------------------

### Basic HTML Structure for d3-celestial

Source: https://github.com/ofrohn/d3-celestial/blob/master/readme.md

This snippet shows the minimal HTML required to initialize a d3-celestial map. It includes a container div for the map and optionally a div for the control form. The necessary D3.js and d3-celestial scripts must also be included.

```html
<div id="celestial-map"></div>
<div id="celestial-form"></div>
```

--------------------------------

### D3-Celestial Configuration and Display

Source: https://github.com/ofrohn/d3-celestial/blob/master/demo/skyview.html

Initializes D3-Celestial with a configuration object and displays the celestial view. The configuration includes settings for location, interactivity, controls, projection, and data path.

```javascript
var config = {
  location: false,
  interactive: false,
  controls: false,
  projection: "airy",
  datapath: "../data/",
};
Celestial.display(config);
```

--------------------------------

### Add Summer Triangle Asterism

Source: https://github.com/ofrohn/d3-celestial/blob/master/demo/triangle.html

This code snippet demonstrates how to add a custom asterism (the Summer Triangle) to the D3-Celestial map. It defines the geometry and properties of the asterism and uses Celestial.add() to register it. The callback function loads the GeoJSON data, transforms it, and appends it to the celestial objects container. Finally, Celestial.redraw() is called to render the changes.

```javascript
Celestial.add({
  type: "line",
  callback: function(error, json) {
    if (error) return console.warn(error);

    // Load the geoJSON file and transform to correct coordinate system, if necessary
    var asterism = Celestial.getData(jsonLine, config.transform);

    // Add to celestial objects container in d3
    Celestial.container.selectAll(".asterisms")
      .data(asterism.features)
      .enter().append("path")
      .attr("class", "ast");

    // Trigger redraw to display changes
    Celestial.redraw();
  },
  redraw: function() {
    // Select the added objects by class name as given previously
    Celestial.container.selectAll(".ast").each(function(d) {
      // Set line styles
      Celestial.setStyle(lineStyle);
      // Project objects on map
      Celestial.map(d);
      // draw on canvas
      Celestial.context.fill();
      Celestial.context.stroke();

      // If point is visible (this doesn't work automatically for points)
      if (Celestial.clip(d.properties.loc)) {
        // get point coordinates
        pt = Celestial.mapProjection(d.properties.loc);
        // Set text styles
        Celestial.setTextStyle(textStyle);
        // and draw text on canvas
        Celestial.context.fillText(d.properties.n, pt[0], pt[1]);
      }
    });
  }
});
```

--------------------------------

### Celestial.display() Usage

Source: https://github.com/ofrohn/d3-celestial/blob/master/readme.md

Initializes and displays the D3 Celestial map using the provided configuration object. This function takes a configuration object that specifies all visual aspects of the map.

```javascript
Celestial.display(config);
```

--------------------------------

### Core JavaScript Files

Source: https://github.com/ofrohn/d3-celestial/blob/master/readme.md

Main JavaScript files for the d3-celestial project, including the primary script and a minified version for production use.

```javascript
celestial.js
celestial.min.js
```

--------------------------------

### Celestial API: Display Map

Source: https://github.com/ofrohn/d3-celestial/blob/master/readme.md

Initiates the display of the celestial map after all data and configurations have been added. This function renders the visualization.

```js
Celestial.display();
```

--------------------------------

### Data Archive

Source: https://github.com/ofrohn/d3-celestial/blob/master/readme.md

A compressed archive containing all necessary data files, the minified script, and the viewer for local display.

```bash
celestial.tar.gz
```

--------------------------------

### D3 Celestial - Setting Time and Location

Source: https://github.com/ofrohn/d3-celestial/blob/master/readme.md

Illustrates how to set the current time and location to view the sky at a specific moment.

```javascript
/*
 * D3 Celestial example for setting time and location.
 */

const celestial = new Celestial();

// Set a specific date and time
celestial.setDate(new Date('2023-10-27T22:00:00Z'));

// Set a specific location (latitude, longitude)
celestial.setLocation(34.0522, -118.2437); // Los Angeles, CA

celestial.settings({
     அளவு: 5,
    constellations: true
});

celestial.display('map');
```

--------------------------------

### D3 Celestial - Geolocator Gadget Integration

Source: https://github.com/ofrohn/d3-celestial/blob/master/readme.md

Shows how D3 Celestial can be integrated with a geolocator gadget for real-time sky viewing based on user location.

```javascript
/*
 * D3 Celestial integration with a geolocator gadget.
 * This example assumes a geolocator script is available and provides
 * latitude and longitude, which are then used to update the celestial map.
 */

const celestial = new Celestial();

celestial.settings({
     அளவு: 5,
    constellations: true,
    gridLines: true
});

// Function to update map based on geolocator data
function updateSky(position) {
    const lat = position.coords.latitude;
    const lon = position.coords.longitude;
    celestial.setLocation(lat, lon);
    celestial.setDate(new Date()); // Update to current time
    // If the map doesn't auto-update, you might need to call a refresh method
}

// Get user's current location and update the map
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(updateSky);
} else {
    console.error('Geolocation is not supported by this browser.');
    // Fallback to a default location or prompt user
    celestial.setLocation(0, 0); // Default to equator and prime meridian
    celestial.display('map');
}

// To continuously track location and update the map:
/*
if (navigator.geolocation) {
    navigator.geolocation.watchPosition(updateSky);
}
*/

celestial.display('map');
```

--------------------------------

### Source Code Modules

Source: https://github.com/ofrohn/d3-celestial/blob/master/readme.md

JavaScript source code files for all modules of the d3-celestial project, located in the 'src' directory.

```javascript
src/*.js
```

--------------------------------

### D3 Celestial - Interactive Form Viewer

Source: https://github.com/ofrohn/d3-celestial/blob/master/readme.md

Showcases the interactive form viewer for D3 Celestial, allowing users to explore all configuration options.

```html
<!DOCTYPE html>
<html>
<head>
    <title>D3 Celestial - Interactive Viewer</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="path/to/celestial.js"></script> <!-- Adjust path to celestial.js -->
    <style>
        body { margin: 0; overflow: hidden; }
        #map { width: 100vw; height: 100vh; }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        // Initialize and display the celestial map with interactive form
        const celestial = new Celestial({
            controls: true // Enable interactive controls
        });
        celestial.display('map');
    </script>
</body>
</html>
```

--------------------------------

### Display D3-Celestial Starmap

Source: https://github.com/ofrohn/d3-celestial/blob/master/demo/viewer.html

This snippet demonstrates how to initialize and display the D3-Celestial starmap with custom configurations. It includes options for disabling animations, enabling form elements with a download option, specifying the data path, and showing proper star names.

```javascript
Celestial.display({
  disableAnimations: false,
  form: true,
  formFields: {
    download: true
  },
  datapath: "../data/",
  stars: {
    propername: true
  }
});
```

--------------------------------

### D3-Celestial Configuration Options

Source: https://github.com/ofrohn/d3-celestial/blob/master/demo/map.html

This snippet outlines the primary configuration object for D3-Celestial, detailing parameters for map projection, coordinate transformations, display elements (stars, DSOs), and interactivity.

```javascript
var config = {
  width: 0, // Default width, 0 = full parent width; height is determined by projection
  projection: "aitoff", // Map projection used: airy, aitoff, armadillo, august, azimuthalEqualArea, azimuthalEquidistant, baker, berghaus, boggs, bonne, bromley, collignon, craig, craster, cylindricalEqualArea, cylindricalStereographic, eckert1, eckert2, eckert3, eckert4, eckert5, eckert6, eisenlohr, equirectangular, fahey, foucaut, ginzburg4, ginzburg5, ginzburg6, ginzburg8, ginzburg9, gringorten, hammer, hatano, healpix, hill, homolosine, kavrayskiy7, lagrange, larrivee, laskowski, loximuthal, mercator, miller, mollweide, mtFlatPolarParabolic, mtFlatPolarQuartic, mtFlatPolarSinusoidal, naturalEarth, nellHammer, orthographic, patterson, polyconic, rectangularPolyconic, robinson, sinusoidal, stereographic, times, twoPointEquidistant, vanDerGrinten, vanDerGrinten2, vanDerGrinten3, vanDerGrinten4, wagner4, wagner6, wagner7, wiechel, winkel3
  projectionRatio: null, // Optional override for default projection ratio
  transform: "equatorial", // Coordinate transformation: equatorial (default), ecliptic, galactic, supergalactic
  center: null, // Initial center coordinates in equatorial transformation [hours, degrees, degrees], // otherwise [degrees, degrees, degrees], 3rd parameter is orientation, null = default
  centerOrientationfixed: true, // Keep orientation angle the same as center[2]
  background: { fill: "#000000", stroke: "#000000", opacity: 1 }, // Background style
  adaptable: true, // Sizes are increased with higher zoom-levels
  interactive: true, // Enable zooming and rotation with mousewheel and dragging
  disableAnimations: false, // Disable all animations
  form: false, // Display settings form
  location: false, // Display location settings
  controls: true, // Display zoom controls
  lang: "", // Language for names, so far only for constellations: de: german, es: spanish // Default:en or empty string for english
  container: "celestial-map", // ID of parent element, e.g. div
  datapath: "../data/", // Path/URL to data files, empty = subfolder 'data'
  stars: { ... }, // Star display settings
  dsos: { ... } // DSO display settings
};
```

--------------------------------

### D3.js Libraries

Source: https://github.com/ofrohn/d3-celestial/blob/master/readme.md

Necessary D3.js libraries required for the d3-celestial project to function.

```javascript
lib/d3.*.js
```

--------------------------------

### D3 Celestial Supported Languages

Source: https://github.com/ofrohn/d3-celestial/blob/master/readme.md

Lists the supported languages for displaying constellation, star, and planet names. This includes official names and various localized versions.

```APIDOC
Supported Languages for Display:
  - (name): Official IAU name
  - (desig): 3-Letter-Designation
  - (la): Latin
  - (en): English
  - (ar): Arabic
  - (zh): Chinese
  - (cz): Czech
  - (ee): Estonian
  - (fi): Finnish
  - (fr): French
  - (de): German
  - (el): Greek
  - (he): Hebrew
  - (it): Italian
  - (ja): Japanese
  - (ko): Korean
  - (hi): Hindi
  - (fa): Persian
  - (ru): Russian
  - (es): Spanish
  - (tr): Turkish
```

--------------------------------

### Planet Configuration

Source: https://github.com/ofrohn/d3-celestial/blob/master/readme.md

Configuration options for displaying planet locations and symbols. This includes enabling/disabling planet display, selecting which planets to show, defining symbol characters and colors, and styling for names.

```javascript
{
  planets: {
    show: false,
    which: ["sol", "mer", "ven", "ter", "lun", "mar", "jup", "sat", "ura", "nep"],
    symbols: {
      "sol": {symbol: "\u2609", letter:"Su", fill: "#ffff00", size:""},
      "mer": {symbol: "\u263f", letter:"Me", fill: "#cccccc"},
      "ven": {symbol: "\u2640", letter:"V", fill: "#eeeecc"},
      "ter": {symbol: "\u2295", letter:"T", fill: "#00ccff"},
      "lun": {symbol: "\u25cf", letter:"L", fill: "#ffffff", size:""}, // overridden by generated crecent, except letter & size
      "mar": {symbol: "\u2642", letter:"Ma", fill: "#ff6600"},
      "cer": {symbol: "\u26b3", letter:"C", fill: "#cccccc"},
      "ves": {symbol: "\u26b6", letter:"Ma", fill: "#cccccc"},
      "jup": {symbol: "\u2643", letter:"J", fill: "#ffaa33"},
      "sat": {symbol: "\u2644", letter:"Sa", fill: "#ffdd66"},
      "ura": {symbol: "\u2645", letter:"U", fill: "#66ccff"},
      "nep": {symbol: "\u2646", letter:"N", fill: "#6666ff"},
      "plu": {symbol: "\u2647", letter:"P", fill: "#aaaaaa"},
      "eri": {symbol: "\u26aa", letter:"E", fill: "#eeeeee"}
    },
    symbolStyle: { fill: "#00ccff", font: "bold 17px 'Lucida Sans Unicode', Consolas, sans-serif", 
             align: "center", baseline: "middle" },
    symbolType: "symbol",  // Type of planet symbol: 'symbol' graphic planet sign, 'disk' filled circle scaled by magnitude
                           // 'letter': 1 or 2 letters S Me V L Ma J S U N     
    names: false,          // Show name in nameType language next to symbol
    nameStyle: { fill: "#00ccff", font: "14px 'Lucida Sans Unicode', Consolas, sans-serif", align: "right", baseline: "top" },
    namesType: "desig"     // Language of planet name (see list below of language codes available for planets), 
                           // or desig = 3-letter designation
  }
```

--------------------------------

### D3 Celestial Configuration Options

Source: https://github.com/ofrohn/d3-celestial/blob/master/readme.md

Defines various visual and display settings for a D3 Celestial map. This includes options for constellation lines and boundaries, Milky Way visibility and styling, graticule and plane line styles, background, horizon marker, and daylight display.

```javascript
var config = {
  // Constellation configuration
  constellations: {
    // Font styles for constellation names
    names: {
      // Different fonts for different ranks
      "12px Helvetica, Arial, sans-serif",  
      "11px Helvetica, Arial, sans-serif" 
    },
    lines: true,   // Show constellation lines
    lineStyle: { stroke: "#cccccc", width: 1, opacity: 0.6 }, 
    bounds: false, // Show constellation boundaries
    boundStyle: { stroke: "#cccc00", width: 0.5, opacity: 0.8, dash: [2, 4] }
  },
  // Milky Way configuration
  mw: {
    show: true,     // Show Milky Way
    style: { fill: "#ffffff", opacity: 0.15 }  // Style for MW layers
  },
  // Graticule and plane line styles
  lines: {
    graticule: { show: true, stroke: "#cccccc", width: 0.6, opacity: 0.8,
      // Longitude grid
      lon: {pos: [""], fill: "#eee", font: "10px Helvetica, Arial, sans-serif"},
      // Latitude grid
      lat: {pos: [""], fill: "#eee", font: "10px Helvetica, Arial, sans-serif"}
    },
    equatorial: { show: true, stroke: "#aaaaaa", width: 1.3, opacity: 0.7 },
    ecliptic: { show: true, stroke: "#66cc66", width: 1.3, opacity: 0.7 },
    galactic: { show: false, stroke: "#cc6666", width: 1.3, opacity: 0.7 },
    supergalactic: { show: false, stroke: "#cc66cc", width: 1.3, opacity: 0.7 }
  },
  // Background style
  background: {
    fill: "#000000",   // Area fill
    opacity: 1,
    stroke: "#000000", // Outline
    width: 1.5
  },
  // Horizon marker style
  horizon: {
    show: false,
    stroke: "#cccccc", // Line
    width: 1.0,
    fill: "#000000",   // Area below horizon
    opacity: 0.5
  },
  // Daylight display
  daylight: {
    show: false
  }
};

// Display map with the configuration
Celestial.display(config);
```

--------------------------------

### D3-Celestial Configuration and Star Rendering

Source: https://github.com/ofrohn/d3-celestial/blob/master/demo/altstars.html

This JavaScript code configures the D3-Celestial library for rendering celestial objects. It defines projection settings, data paths, and styles for stars, DSOs, and the Milky Way. It also includes logic for loading star data, transforming it, and rendering stars on the canvas with customizable colors based on magnitude. Planet rendering and a toggle for grayscale mode are also implemented.

```javascript
var config = { projection: "orthographic", //interactive: false, background: { fill: "#000000", stroke: "#000000", opacity: 1, width: 4 }, datapath: "https://ofrohn.github.io/data/", stars: { show: false }, dsos: { show: false }, mw: { style: { fill: "#ffffff", opacity: "0.05" } }, constellations: { names: false, lines: false }, lines: { graticule: { show: true, stroke:"#9999cc", width: 1.0, opacity:.3 }, equatorial: { show: true, stroke:"#aaaaaa", width: 1.5, opacity:.4 }, ecliptic: { show: true, stroke:"#66cc66", width: 1.5, opacity:.4 } } }; var planets = {sol: "#ff0", lun:"#fff", mer:"#e2e2e2", ven:"#f5f5f0", mar:"#efd1af", jup:"#e6e1df", sat:"#eddebc"};

var limitMagnitude = 6, radius = 1.2, grayscale = false, starColor = d3.scale.linear() .domain([-1.5, 0, limitMagnitude+1]) .range(['white', 'white', 'black']), dt = new Date();

Celestial.add({
  type: "json",
  file: "https://ofrohn.github.io/data/stars." + limitMagnitude + ".json",
  callback: function(error, json) {
    if (error) return console.warn(error);

    var stars = Celestial.getData(json, config.transform);

    Celestial.container.selectAll(".astars")
      .data(stars.features)
      .enter().append("path")
      .attr("class", "astar");

    Celestial.redraw();
  },
  redraw: function() {
    Celestial.context.globalAlpha = 1;
    var indexColor = "#fff", planet;

    Celestial.container.selectAll(".astar").each(function(d) {
      if (Celestial.clip(d.geometry.coordinates)) {
        var pt = Celestial.mapProjection(d.geometry.coordinates);
        if (grayscale === false) indexColor = Celestial.starColor(d);
        starColor.range([indexColor, indexColor, 'black']);
        Celestial.context.fillStyle = starColor(d.properties.mag);
        Celestial.context.beginPath();
        Celestial.context.arc(pt[0], pt[1], radius, 0, 2 * Math.PI);
        Celestial.context.closePath();
        Celestial.context.fill();
      }
    });

    if (!Celestial.origin) return;
    var o = Celestial.origin(dt).spherical();
    for (var key in planets) {
      var planet = Celestial.getPlanet(key, dt);
      if (!Celestial.clip(planet.ephemeris.pos)) continue;
      var pt = Celestial.mapProjection(planet.ephemeris.pos);
      if (key === "lun") {
        Celestial.symbol().type("crescent").size(110).age(planet.ephemeris.age).position(pt)(Celestial.context);
      } else {
        if (key === "sol") radius = 2;
        else radius = 1.2 - (planet.ephemeris.mag + 5) / 10;
        Celestial.context.fillStyle = (grayscale === false) ? planets[key] : "#eee";
        Celestial.context.beginPath();
        Celestial.context.arc(pt[0], pt[1], radius*2, 0, 2 * Math.PI);
        Celestial.context.closePath();
        Celestial.context.fill();
      }
    }
  }
});

d3.select("#btnColor").on("click", function(d) {
  grayscale = !grayscale;
  this.innerHTML = grayscale === true ? "Show Colors" : "Show Grayscale";
  Celestial.redraw();
});

Celestial.display(config);
Celestial.date(dt);
```

--------------------------------

### D3-Celestial Star Settings

Source: https://github.com/ofrohn/d3-celestial/blob/master/demo/map.html

Configuration options specifically for displaying stars on the celestial map. This includes visibility, magnitude limits, naming conventions, and styling.

```javascript
stars: {
  show: true, // Show stars
  limit: 6, // Show only stars brighter than limit magnitude
  colors: true, // Show stars in spectral colors, if not use "color" style
  style: { fill: "#ffffff", opacity: 1 }, // Default style for stars
  names: true, // Show star names (Bayer, Flamsteed, Variable star, Gliese, whichever applies first)
  proper: true, // Show proper name (if present)
  desig: false, // Show all names, including Draper and Hipparcos
  namelimit: 2.5, // Show only names for stars brighter than namelimit
  namestyle: { fill: "#ddddbb", font: "11px Georgia, Times, 'Times Roman', serif", align: "left", baseline: "top" },
  propernamestyle: { fill: "#ddddbb", font: "11px Georgia, Times, 'Times Roman', serif", align: "right", baseline: "bottom" },
  propernamelimit: 1.5, // Show proper names for stars brighter than propernamelimit
  size: 7, // Maximum size (radius) of star circle in pixels
  exponent: -0.28, // Scale exponent for star size, larger = more linear
  data: 'stars.6.json' // Data source for stellar data
}
```

--------------------------------

### Google Analytics Initialization

Source: https://github.com/ofrohn/d3-celestial/blob/master/demo/altstars.html

This JavaScript code initializes Google Analytics tracking for the page. It defines the analytics object and sends a pageview event to track user activity.

```javascript
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');ga('create', 'UA-105720254-1', 'auto');ga('send', 'pageview');
```

--------------------------------

### d3-celestial API Reference

Source: https://github.com/ofrohn/d3-celestial/blob/master/readme.md

Provides a comprehensive reference for the d3-celestial library's functions and objects, including methods for adding data, clearing the display, transforming coordinates, retrieving celestial object data, and managing canvas styles.

```APIDOC
Celestial.add(config)
  Adds data to the celestial display.
  Parameters:
    config: An object containing data configuration.
      file: (string) URL or path to the JSON data file (for type:json).
      type: (string) Type of data ('json' or 'raw').
      callback: (function) Callback function for JSON loading or raw data processing.
      redraw: (function, optional) Callback for view changes in interactive display.
      save: (function, optional) Callback for saving as SVG.

Celestial.clear()
  Deletes all previously added functions from the display call stack.

Celestial.getData(geojson, transform)
  Converts GeoJSON coordinates to a specified transformation (equatorial, ecliptic, galactic, supergalactic).
  Parameters:
    geojson: GeoJSON object with coordinates.
    transform: (string) The target coordinate system.
  Returns: GeoJSON object with transformed coordinates.

Celestial.getPoint(coordinates, transform)
  Converts a single coordinate to a specified transformation.
  Parameters:
    coordinates: Coordinate object.
    transform: (string) The target coordinate system.
  Returns: Transformed coordinate object.

Celestial.getPlanet(id, date)
  Retrieves solar system object data by ID at a specified date.
  Parameters:
    id: (string) The ID of the planet (refer to config.planets.which).
    date: (Date object or string) The date for which to get coordinates.
  Returns: Planet object with coordinates at the specified date.

Celestial.container
  The D3.js object to which data is added. See D3.js documentation.

Celestial.context
  The HTML5-canvas context object for drawing. See D3.js documentation.

Celestial.map
  The d3.geo.path object for applying projections to data. See D3.js documentation.

Celestial.mapProjection
  The projection object for accessing its properties and functions. See D3.js documentation.

Celestial.clip(coordinates)
  Checks if an object is visible and sets its visibility.
  Parameters:
    coordinates: Object coordinates in radians (typically from geometry.coordinates array).

Celestial.setStyle(styleObject)
  Sets canvas graphic styles.
  Parameters:
    styleObject: An object literal with style properties.

Celestial.setTextStyle(styleObject)
  Sets canvas text styles.
  Parameters:
    styleObject: An object literal with text style properties.

Celestial.Canvas.symbol()
  Draws symbol shapes directly on the canvas context (circle, square, diamond, triangle, ellipse, marker, stroke-circle, cross-circle).

Celestial.addCallback(func)
  Adds a callback function executed on every map redraw.
  Parameters:
    func: (function) The callback function to execute in the client context.
```

--------------------------------

### D3 Celestial Supported Projections

Source: https://github.com/ofrohn/d3-celestial/blob/master/readme.md

Lists the various map projections supported by D3 Celestial. Many of these projections require the d3.geo.projections extension.

```APIDOC
Supported Projections:
  - Airy
  - Aitoff
  - Armadillo
  - August
  - Azimuthal Equal Area
  - Azimuthal Equidistant
  - Baker
  - Berghaus
  - Boggs
  - Bonne
  - Bromley
  - Cassini
  - Collignon
  - Craig
  - Craster
  - Cylindrical Equal Area
  - Cylindrical Stereographic
  - Eckert 1-6
  - Eisenlohr
  - Equirectangular
  - Fahey
  - Foucaut
  - Ginzburg 4-6, 8-9
  - Hammer
  - Hatano
  - HEALPix
  - Hill
  - Homolosine
  - Kavrayskiy 7
  - Lagrange
  - l'Arrivee
  - Laskowski
  - Loximuthal
  - Mercator
  - Miller
  - Mollweide
  - Flat Polar Parabolic
  - Flat Polar Quartic
  - Flat Polar Sinusoidal
  - Natural Earth
  - Nell Hammer
  - Orthographic
  - Patterson
  - Polyconic
  - Rectangular Polyconic
  - Robinson
  - Sinusoidal
  - Stereographic
  - Times
  - 2 Point Equidistant
  - van der Grinten (1-4)
  - Wagner 4, 6-7
  - Wiechel
  - Winkel Tripel

Note: Most projections require the [d3.geo.projections](https://github.com/d3/d3-geo-projection/) extension.
```

--------------------------------

### D3-Celestial API

Source: https://github.com/ofrohn/d3-celestial/blob/master/demo/snr.html

Reference for D3-Celestial API functions used in the project.

```APIDOC
Celestial.add(config)
  - Adds a new data source or layer to the celestial map.
  - Parameters:
    - config: An object containing configuration for the data source.
      - type: Type of data source (e.g., "json", "csv").
      - file: URL or path to the data file.
      - callback: Function to process the loaded data.
      - redraw: Function to render the data on the canvas.

Celestial.getData(json, transform)
  - Transforms loaded GeoJSON data to the correct coordinate system.
  - Parameters:
    - json: The loaded GeoJSON data.
    - transform: The desired coordinate system transformation (e.g., "galactic").
  - Returns: Transformed GeoJSON data.

Celestial.clip(coordinates)
  - Checks if a point is within the visible celestial sphere.
  - Parameters:
    - coordinates: The celestial coordinates of the point.
  - Returns: Boolean indicating if the point is visible.

Celestial.mapProjection(coordinates)
  - Projects celestial coordinates to pixel coordinates on the canvas.
  - Parameters:
    - coordinates: The celestial coordinates of the point.
  - Returns: An array containing the [x, y] pixel coordinates.

Celestial.setStyle(style)
  - Sets the current drawing style for the canvas context.
  - Parameters:
    - style: An object containing style properties (e.g., stroke, fill).

Celestial.setTextStyle(style)
  - Sets the current text style for the canvas context.
  - Parameters:
    - style: An object containing text style properties (e.g., font, fill).

Celestial.redraw()
  - Triggers a redraw of the celestial map.

Celestial.display(config)
  - Initializes and displays the celestial map with the given configuration.
  - Parameters:
    - config: The main configuration object for the celestial map.
```

--------------------------------

### Add Data via Callback (External File with Filter)

Source: https://github.com/ofrohn/d3-celestial/blob/master/readme.md

Shows how to load GeoJSON data from an external file and filter it before adding to d3-celestial. The callback function fetches data, filters it based on properties, and renders it.

```js
callback: function(error, json) {
  if (error) return console.warn(error);
  // Load the geoJSON file and transform to correct coordinate system, if necessary
  var dsos = Celestial.getData(json, config.transform);

  // Filter SNRs and add to celestial objects container in d3
  Celestial.container.selectAll(".snrs")
    .data(dsos.features.filter(function(d) {
      return d.properties.type === 'snr'
    }))
    .enter().append("path")
    .attr("class", "snr"); 
  // Trigger redraw to display changes
  Celestial.redraw();
}
```

--------------------------------

### Display Celestial Starmap

Source: https://github.com/ofrohn/d3-celestial/blob/master/demo/location.html

Initializes and displays the D3-Celestial starmap. This function allows customization of location display, projection type, data path, and planet visibility.

```javascript
Celestial.display({
  location: true,
  projection: "airy",
  datapath: "../data/",
  planets: { show: true }
});
```

--------------------------------

### DSO Configuration

Source: https://github.com/ofrohn/d3-celestial/blob/master/readme.md

Configuration options for displaying Deep Sky Objects (DSOs). This includes settings for magnitude limits, colorization, styling, naming, data sources, and symbol definitions for various DSO types.

```javascript
{
    limit: 6,      // Show only DSOs brighter than limit magnitude
    colors: true,  // Show DSOs in symbol colors if true, use style setting below if false
    style: { fill: "#cccccc", stroke: "#cccccc", width: 2, opacity: 1 }, // Default style for dsos
    names: true,   // Show DSO names
    namesType: "name",  // Type of DSO ('desig' or language) name shown
    nameStyle: { fill: "#cccccc", font: "11px Helvetica, Arial, serif", 
                 align: "left", baseline: "top" }, // Style for DSO names
    nameLimit: 6,  // Show only names for DSOs brighter than namelimit
    size: null,    // Optional seperate scale size for DSOs, null = stars.size
    exponent: 1.4, // Scale exponent for DSO size, larger = more non-linear
    data: 'dsos.bright.json', // Data source for DSOs, opt. number indicates limit magnitude
    symbols: {  //DSO symbol styles, 'stroke'-parameter present = outline
      gg: {shape: "circle", fill: "#ff0000"},          // Galaxy cluster
      g:  {shape: "ellipse", fill: "#ff0000"},         // Generic galaxy
      s:  {shape: "ellipse", fill: "#ff0000"},         // Spiral galaxy
      s0: {shape: "ellipse", fill: "#ff0000"},         // Lenticular galaxy
      sd: {shape: "ellipse", fill: "#ff0000"},         // Dwarf galaxy
      e:  {shape: "ellipse", fill: "#ff0000"},         // Elliptical galaxy
      i:  {shape: "ellipse", fill: "#ff0000"},         // Irregular galaxy
      oc: {shape: "circle", fill: "#ffcc00", 
           stroke: "#ffcc00", width: 1.5},             // Open cluster
      gc: {shape: "circle", fill: "#ff9900"},          // Globular cluster
      en: {shape: "square", fill: "#ff00cc"},          // Emission nebula
      bn: {shape: "square", fill: "#ff00cc", 
           stroke: "#ff00cc", width: 2},               // Generic bright nebula
      sfr:{shape: "square", fill: "#cc00ff", 
           stroke: "#cc00ff", width: 2},               // Star forming region
      rn: {shape: "square", fill: "#00ooff"},          // Reflection nebula
      pn: {shape: "diamond", fill: "#00cccc"},         // Planetary nebula 
      snr:{shape: "diamond", fill: "#ff00cc"},         // Supernova remnant
      dn: {shape: "square", fill: "#999999", 
           stroke: "#999999", width: 2},               // Dark nebula grey
      pos:{shape: "marker", fill: "#cccccc", 
           stroke: "#cccccc", width: 1.5}              // Generic marker
    }
  }
```

--------------------------------

### Drawing Celestial Objects on Canvas

Source: https://github.com/ofrohn/d3-celestial/blob/master/readme.md

Demonstrates how to draw celestial objects (e.g., stars) on an HTML5 canvas using the Celestial library. It includes setting object radius based on magnitude, defining styles, drawing arcs, and filling/stroking the paths. Text labels are also drawn near the objects.

```javascript
      // object radius in pixel, could be varable depending on e.g. dimension or magnitude 
      var r = Math.pow(20 - prop.mag, 0.7); // replace 20 with dimmest magnitude in the data
   
      // draw on canvas
      //  Set object styles fill color, line color & width etc.
      Celestial.setStyle(pointStyle);
      // Start the drawing path
      Celestial.context.beginPath();
      // Thats a circle in html5 canvas
      Celestial.context.arc(pt[0], pt[1], r, 0, 2 * Math.PI);
      // Finish the drawing path
      Celestial.context.closePath();
      // Draw a line along the path with the prevoiusly set stroke color and line width      
      Celestial.context.stroke();
      // Fill the object path with the prevoiusly set fill color
      Celestial.context.fill();     

      // Set text styles       
      Celestial.setTextStyle(textStyle);
      // and draw text on canvas
      Celestial.context.fillText(d.properties.name, pt[0] + r - 1, pt[1] - r + 1);
    }
  }); 
}}); 

Celestial.display();
```

--------------------------------

### Celestial API: Add Custom Data

Source: https://github.com/ofrohn/d3-celestial/blob/master/readme.md

Demonstrates how to add custom data to d3-celestial using the `Celestial.add` function. It includes a callback for loading and rendering the data and a redraw function for visual styling.

```js
Celestial.add({
  file:string, // Optional: path to external GeoJSON file
  type:json|raw, // Type of data (json for GeoJSON)
  callback: function(error, json) {
    if (error) return console.warn(error);
    // Load the geoJSON file and transform to correct coordinate system, if necessary
    var asterism = Celestial.getData(jsonLine, config.transform);

    // Add to celestial objects container in d3
    Celestial.container.selectAll(".asterisms")
      .data(asterism.features)
      .enter().append("path")
      .attr("class", "ast");
    // Trigger redraw to display changes
    Celestial.redraw();
  },
  redraw: function() {
    // Select the added objects by class name as given previously
    Celestial.container.selectAll(".ast").each(function(d) {
      // Set line styles
      Celestial.setStyle(lineStyle);
      // Project objects on map
      Celestial.map(d);
      // draw on canvas
      Celestial.context.fill();
      Celestial.context.stroke();

      // If point is visible (this doesn't work automatically for points)
      if (Celestial.clip(d.properties.loc)) {
        // get point coordinates
        pt = Celestial.mapProjection(d.properties.loc);
        // Set text styles
        Celestial.setTextStyle(textStyle);
        // and draw text on canvas
        Celestial.context.fillText(d.properties.n, pt[0], pt[1]);
      }
    })
  }
});
```