Old school D3 from simpler times

All examples By author By category About

git-ashish

Full window Github gist

.Astronomy Star Chart

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>
  <style>

body {
      background: black;
    }
    
    .graticule {
      fill: none;
      stroke: #fff;
      stroke-opacity: 0.2;
    }

.stars {
      fill: #fff;
      stroke: #000;
    }

</style>

</head>

<body>
  <script>

var width = 960,
        height = 500;
    
    var projection = d3.geo.stereographic()
      .scale(400)
      .clipAngle(120)
      .translate([width/2, height/2]);
      
    var path = d3.geo.path()
      .projection(projection);
    
    var lambda = d3.scale.linear()
      .domain([0, width])
      .range([-180, 180]);
    
    var phi = d3.scale.linear()
      .domain([0, height])
      .range([90, -90]);
    
    var radius = d3.scale.linear()
      .domain([-1, 5])
      .range([8, 1]);
    
    var color = d3.scale.linear()
      .domain([-0.2, 0.5, 1.6])
      .range(["#e6f0ff", "#ffffff", "fff5e6"])
      .clamp(true);
    
    var svg = d3.select("body").append("svg")
      .attr("width", width)
      .attr("height", height);
    
    svg.append("path")
      .attr("class", "graticule")
      .datum(d3.geo.graticule());
    
    svg.append("g")
      .attr("class", "stars");
    
    d3.csv("stars.csv", row, function(data) {
    
      function render() {
    
        svg.select(".graticule")
          .attr("d", path);
      
        var stars = svg.select(".stars").selectAll("circle")
          .data(data.map(function(d) {
            var p = projection([-d.ra, d.dec]);
            d[0] = p[0], d[1] = p[1];   
            return d;   
          }));
        
        stars.enter().append("circle")
          .attr("r", function(d) { return radius(d.magnitude); })
          .style("fill", function(d) { return color(d.color); });
    
        stars
          .attr("cx", function(d) { return d[0]; })
          .attr("cy", function(d) { return d[1]; });
      }
    
      render();
    
      svg.on("mousemove", function() {
        var p = d3.mouse(this);
        projection.rotate([lambda(p[0]), phi(p[1])]);
        render();
      });
    
      svg.select(".stars").selectAll("circle")
        .each(function() {
          var circle = d3.select(this);
          (function twinkle() {
            circle.transition()
              .duration(20 + 480 * Math.random())
              .ease("linear")
              .attr("opacity", 0.5 + 0.5 * Math.random())
              .each("end", twinkle);
          })();
        });
    });
    
    function row(d) {
      d.ra = (+d.RAh + d.RAm/60 + d.RAs/3600) * (360/24);
      d.dec = (+d.DEd + d.DEm/60 + d.DEs/3600);
      d[0] = d.ra; d[1] = d.dec;
      d.magnitude = +d.Vmag;
      d.color = +d.BmV;
      return d;
    }

</script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js