Stars répartition

<!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>

Modified http://d3js.org/d3.v4.min.js to a secure url

https://d3js.org/d3.v4.min.js