gaiavis/stars_basic.html at master · akademy/gaiavis · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<!DOCTYPE HTML>
<html>
<head><meta charset="utf-8"></head>
<body>
<div></div>
<p style="width:550px">This work has made use of data from the European Space Agency (ESA) mission Gaia (http://www.cosmos.esa.int/gaia), processed by the Gaia Data Processing and Analysis Consortium (DPAC, http://www.cosmos.esa.int/web/gaia/dpac/consortium). Funding for the DPAC has been provided by national institutions, in particular the institutions participating in the Gaia Multilateral Agreement.</p>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
	var width = 550, height = 350;
	var svg = d3.select("div").append("svg")
			.attr("width",width)
			.attr("height",height)
			.style("cursor", "crosshair");

	d3.csv( "csvs/stars_skip250_[ra-dec].csv", function(row) {
		return {ra:row.ra *1, dec:row.dec*1};
	}, function( data ) {
		var xScale = d3.scaleLinear()
				.domain([0,360])
				.range([0,width]);
		var yScale = d3.scaleLinear()
				.domain([90,-90])
				.range([0,height]);


		svg.append("g").selectAll("circle")
				.data(data)
				.enter()
				.append("circle")
				.attr( "cx",function(d) { return xScale(d.ra); } )
				.attr( "cy",function(d) { return yScale(d.dec); } )
				.attr( "r", 1 )
                .style( "pointer-events", "none" );

		//
		// Super secret extra stuff (To show coordinates)
		//
		var text = svg.append("text")
				.attr("x",20)
				.attr("y",10 )
				.style("fill","red")
				.style("font-weight", "bold")
                .style( "pointer-events", "none" )
				.text("");

		var lineX = svg.append("line")
				.attr("x1", 0)
				.attr("x2", width)
				.attr("y1", 0)
				.attr("y2", 0)
				.style("stroke","red")
				.style("stroke-width",0.5)
                .style( "pointer-events", "none" );

		var lineY = svg.append("line")
				.attr("x1", 0)
				.attr("x2", 0)
				.attr("y1", 0)
				.attr("y2", height)
				.style("stroke", "red")
				.style("stroke-width", 0.5)
				.style("pointer-events", "none");

		svg.on("mousemove", function () {
			var pos = d3.mouse(svg.node()),
					ra = xScale.invert(pos[0]),
					dec = yScale.invert(pos[1]);

			text.attr("x", pos[0] + 10)
					.attr("y", pos[1] - 10)
					.text("RA: " + ra.toFixed(0) + " , Dec: " + dec.toFixed(0));

			lineX.attr("y1", pos[1]).attr("y2", pos[1]);
			lineY.attr("x1", pos[0]).attr("x2", pos[0]);
		})
	})
</script>
</body>
</html>