block by nitaku 9977193

Sky II (HYG)

Full Screen

Another sky chart. This time, the HYG (Hipparcos-Yale-Gliese) database is used.

Stars with magnitude greater than 7 have been omitted, for performance reasons.

index.js

(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, 7]).range([7, 6, 5, 4, 3, 2, 1, 0.4, 0.2]);

  d3.csv('hygfull.csv', function(data) {
    map_boreal.selectAll('.star').data(data.filter(function(d) {
      return +d.Mag <= 7 && +d.Dec > 0;
    })).enter().append('circle').attr('class', 'star').attr('r', function(d) {
      return magnitude(+d.Mag) / 2;
    }).attr('transform', function(d) {
      var x, y, _ref;
      _ref = projection_boreal([-d.RA * (360 / 24), +d.Dec]), x = _ref[0], y = _ref[1];
      return "translate(" + x + "," + y + ")";
    });
    return map_austral.selectAll('.star').data(data.filter(function(d) {
      return +d.Mag <= 7 && +d.Dec <= 0;
    })).enter().append('circle').attr('class', 'star').attr('r', function(d) {
      return magnitude(+d.Mag) / 2;
    }).attr('transform', function(d) {
      var x, y, _ref;
      _ref = projection_austral([-d.RA * (360 / 24), +d.Dec]), x = _ref[0], y = _ref[1];
      return "translate(" + x + "," + y + ")";
    });
  });

}).call(this);

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Sky II (HYG)</title>
        <link type="text/css" href="index.css" rel="stylesheet"/>
        <script src="//d3js.org/d3.v3.min.js"></script>
    </head>
    <body>
        <svg width="960" height="500">
        </svg>
    </body>
    <script src="index.js"></script>
</html>

index.coffee

svg = d3.select('svg')

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

# projection = d3.geo.mercator()
    # .scale(2800)
    # .translate([50, 2620])
    # .precision(0.1)
    
# projection = d3.geo.albers()
    # .center([14, 34])
    # .rotate([-14, 0])
    # .parallels([38, 61])
    # .scale(2100)
    
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)
    
# sky_projection = (lambda, phi) ->
    # [x, y] = geo_projection(lambda, phi)
    # return [x, -y]

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]) # min-max zoom
    .on 'zoom', () ->
      # whenever the user zooms,
      # modify translation and scale of the zoom group accordingly
      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,7])
    .range([7,6,5,4,3,2,1,0.4,0.2])
    
d3.csv 'hygfull.csv', (data) ->
    map_boreal.selectAll('.star')
        .data(data.filter((d) -> +d.Mag <= 7 and +d.Dec > 0))
      .enter().append('circle')
        .attr('class', 'star')
        .attr('r', (d) -> magnitude(+d.Mag)/2)
        .attr 'transform', (d) ->
            [x, y] = projection_boreal([-d.RA*(360/24), +d.Dec])
            return "translate(#{x},#{y})"
            
    map_austral.selectAll('.star')
        .data(data.filter((d) -> +d.Mag <= 7 and +d.Dec <= 0))
      .enter().append('circle')
        .attr('class', 'star')
        .attr('r', (d) -> magnitude(+d.Mag)/2)
        .attr 'transform', (d) ->
            [x, y] = projection_austral([-d.RA*(360/24), +d.Dec])
            return "translate(#{x},#{y})"

index.css

body {
  background: #1a055c;
}

.star {
  fill: white;
}

.graticule {
  fill: none;
  stroke: white;
  stroke-width: 0.2px;
  vector-effect: non-scaling-stroke;
}

index.sass

body
    background: #1A055C
    
.star
    fill: white
    
.graticule
    fill: none
    stroke: white
    stroke-width: .2px
    vector-effect: non-scaling-stroke