Connect with us

Published

on

A map of the sky that uses an azimuthal equidistant projection with star data. Longitudes and latitudes for the geo projection are obtained from declination and right ascension respectively (longitude is also inverted, because, unlike the earth globe, the celestial sphere is seen from the inside).

<script src="https://d3js.org/d3.v3.min.js"></script>
<svg id="sky" width="960" height="500">
<style>
#sky {
  background: #1a055c;
}
.star {
  fill: white;
}
.graticule {
  fill: none;
  stroke: white;
  stroke-width: 0.2px;
  vector-effect: non-scaling-stroke;
}
</style>
<script>(function() {
  var graticule, height, magnitude, map_austral, map_boreal, maps, path_generator_austral, path_generator_boreal, projection_austral, projection_boreal, svg, width, zoom;

  svg = d3.select('svg');

  width = svg[0][0].getBoundingClientRect().width;

  height = svg[0][0].getBoundingClientRect().height;

  projection_boreal = d3.geo.azimuthalEquidistant().scale(150).rotate([180, -90, 0]).center([0, 0]).translate([width / 4 + 4.35, height / 2]).precision(.1).clipAngle(90 + 1e-3);

  projection_austral = d3.geo.azimuthalEquidistant().scale(150).rotate([0, 90, 0]).center([0, 0]).translate([3 * width / 4 - 4.35, height / 2]).precision(.1).clipAngle(90 + 1e-3);

  graticule = d3.geo.graticule().minorStep([15, 10]).majorStep([90, 10]);

  path_generator_boreal = d3.geo.path().projection(projection_boreal);

  path_generator_austral = d3.geo.path().projection(projection_austral);

  /* create maps groups
  */

  maps = svg.append('g');

  map_boreal = maps.append('g').attr('id', 'map_boreal');

  map_austral = maps.append('g').attr('id', 'map_austral');

  /* draw the graticules
  */

  map_boreal.append('path').datum(graticule).attr('class', 'graticule').attr('d', path_generator_boreal);

  map_austral.append('path').datum(graticule).attr('class', 'graticule').attr('d', path_generator_austral);

  /* define a zoom behavior
  */

  zoom = d3.behavior.zoom().scaleExtent([1, 20]).on('zoom', function() {
    return maps.attr('transform', "translate(" + (zoom.translate()) + ")scale(" + (zoom.scale()) + ")");
  });

  /* bind the zoom behavior to the main SVG
  */

  svg.call(zoom);

  /* define a scale for magnitude
  */

  magnitude = d3.scale.quantize().domain([-1, 5]).range([7, 6, 5, 4, 3, 2, 1]);

  d3.csv('/wp-content/uploads/2021/05/stars-1.csv', function(data) {
    map_boreal.selectAll('.star').data(data.filter(function(d) {
      return +d.dec_deg > 0;
    })).enter().append('circle').attr('class', 'star').attr('r', function(d) {
      return magnitude(+d.magnitude) / 2;
    }).attr('transform', function(d) {
      var lat, lon, x, y, _ref;
      lat = +d.dec_deg + +d.dec_min / 60 + +d.dec_sec / 3600;
      lon = (+d.RA_hour + +d.RA_min / 60 + +d.RA_sec / 3600) * (360 / 24);
      _ref = projection_boreal([-lon, lat]), x = _ref[0], y = _ref[1];
      return "translate(" + x + "," + y + ")";
    });
    return map_austral.selectAll('.star').data(data.filter(function(d) {
      return +d.dec_deg <= 0;
    })).enter().append('circle').attr('class', 'star').attr('r', function(d) {
      return magnitude(+d.magnitude) / 2;
    }).attr('transform', function(d) {
      var lat, lon, x, y, _ref;
      lat = +d.dec_deg + +d.dec_min / 60 + +d.dec_sec / 3600;
      lon = (+d.RA_hour + +d.RA_min / 60 + +d.RA_sec / 3600) * (360 / 24);
      _ref = projection_austral([-lon, lat]), x = _ref[0], y = _ref[1];
      return "translate(" + x + "," + y + ")";
    });
  });

}).call(this);

</script>

The boreal (northern) sky is shown at left, while the austral (southern) at right. Because right ascension is given in hours, both maps are divided in 24 slices. A circle is shown every 10 degrees of declination.

Star size indicates magnitude. Bigger circles depict brighter stars.

Series NavigationD3.js Star Map II

Supreme Leader of America

Continue Reading
Advertisement
Click to comment

Leave a Reply

Your email address will not be published. Required fields are marked *

Trending