skylike_me/constEx.html at master · tomasgatial/skylike_me · 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
<body style="background-color: black">
  <div class="container">
  </div>

<script src="http://d3js.org/d3.v3.min.js"></script>
<!-- <script src="d3.min.js" charset="utf-8"></script> -->
<!-- <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.5.0"></script> -->
<script type="text/javascript" src="js/constellation.js"></script>
<script type="text/javascript">
	var w = 1000,
    h = 700,
    padding = 30,
    myStars = [],
    numDataPoints = 15,
    xRange = Math.random() * 1000,
    yRange = Math.random() * 1000;

for (var i = 0; i < numDataPoints; i++) {
  var newNumber1 = Math.floor(Math.random() * xRange);
  var newNumber2 = Math.floor(Math.random() * yRange);
  var newStar = {
  	"xValue" : newNumber1,
  	"yValue" : newNumber2,
  	"connected" : false
  };
	myStars.push(newStar);
}
//Create scale functions
var xScale = d3.scale.linear()
               .domain([0, d3.max(myStars, function(d) {
                 return d.xValue;
               }) ])
               .range([padding, w - padding * 2]);

var yScale = d3.scale.linear()
               .domain([0, d3.max(myStars, function(d) {
                 return d.yValue;
               })])
               .range([h - padding, padding]);


//Create SVG element
var mySvg = d3.select(".container")
						.append("svg")
						.attr("width", w)
						.attr("height", h);

//Create circles
mySvg.selectAll("circle")
	 .data(myStars)
   .enter()
	 .append("circle")
	 .attr("cx", function(d) {
	 	d.xValue = xScale(d.xValue);
	   return d.xValue;
	 })
	 .attr("cy", function(d) {
	   d.yValue = yScale(d.yValue);
	   return d.yValue;
	 })
	 .attr("r", 3)
	 .attr("fill", "white");

var myCanvas = drawConstellation(myStars, mySvg);
//console.log(myCanvas)
//mySvg = document.body.getElementsByTagName('svg');
//mySvg[0].appendChild(myCanvas.node());


</script>
</body>