D3 Examples - Stars répartition

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
    <link href="Stars_rep_style.css" />
  <style>
    .grid {
    stroke: "red";
    opacity: 0.1;
    }
  </style>
​
</head>
<body>
<script src="https://d3js.org/d3.v4.min.js"> </script> 
<script>
  
  var margin = {top: 60, right: 60, bottom: 60, left: 60},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;
    
    var svg = d3.select("body").append("svg")
        .attr("width" , width + margin.left + margin.right)
        .attr("height" , height + margin.top + margin.bottom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
    var x = d3.scaleLinear()
                .domain([0,800])
                .range([0,width]);
  
    var y = d3.scaleLinear()
                .domain([-90,90])
                .range([height,0]);
  
  var xAxis = d3.axisBottom(x)
​
    var yAxis = d3.axisLeft(y)
  
  var color = d3.scaleOrdinal(d3.schemeCategory10);
    
  svg.append("g")
        .attr("class", "x axis label")
        .attr("transform", "translate(" + 0 + "," + height + ")")
        .call(xAxis)
  
  svg.append("text")
        .text("Distance")
        .attr("x",  410)
        .attr("y", 410)
        .style("text-anchor", "end")
  
    svg.append("g")
        .attr("class", "y axis label")
        .call(yAxis)
  
    svg.append("text")
        .text("Declinaison (°)")
        .attr("transform", "rotate(-90)")
    .attr("x", -120)
        .attr("y",-50)
        .attr("dy", "0.8em") 
        .style("text-anchor","end")     
 
  svg.append("g")           
      .attr("class", "grid")
      .attr("transform", "translate(0," + height + ")")
      .call(make_x_gridlines()
          .tickSize(-height)
          .tickFormat("")
      )
​
  // add the Y gridlines
  svg.append("g")           
      .attr("class", "grid")
        
      .call(make_y_gridlines()
          .tickSize(-width)
          .tickFormat("")
​
        
      )
  
    
//  //For the mouseover bubbles
//  var tooltip = d3.select("body")
//                  .append("div")
//                  .attr("class","tooltip")
//                  .attr("style","display:none")
    
​
  
//   var params = { width, height, x, y, data, var_x, var_y, var_size}
  
//   function draw(e1, params){}
  
    var datas;  
    d3.csv("stars_clear.csv", type, 
        function(data) 
        {
            datas = data; 
    console.log(data)
            svg.selectAll("circle")
            .data(datas)
            .enter()
            .append("circle")
            .attr("cx", function(d) {return x(d.Distance); })
            .attr("cy", function(d) {return y(d.Declinaison); })
            .attr("r", function(d) {return d.Magnitude * 6; })
      .attr("fill", "rgb(255,202,153)")
      .attr("stroke", "rgb(183,88,0)")
​
        });
    
  
  
  var legend = svg.selectAll(".legend")
        .data(color.domain())
        .enter().append("g")
        .attr("class", "legend")
//          .attr("transform", function(d, i) { return "translate(0," + i * 48 + ")"; });
  
    legend.append("rect")
        .attr("x", width - 50)
        .attr("width", 50)
        .attr("height", 50)
        .style("fill", "red");
  
    legend.append("text")
        .attr("x", width - 24)
        .attr("y", 9)
        .attr("dy", ".35em")
        .style("text-anchor", "end")
        .text(function(d) { return d; });
  
  
function make_x_gridlines() {       
    return d3.axisBottom(x)
        .ticks(0)
}
​
// gridlines in y axis function
function make_y_gridlines() {       
    return d3.axisLeft(y)
        .ticks(15)
}
  
function type(d){
  d.Magnitude = +d.Magnitude
  d.HIP = +d.HIP
  d.Declinaison = d.Declinaison
  d.Distance = d.Distance
  return d
}
    
</script>
</body>
</html>
    