-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
79 lines (71 loc) · 2.32 KB
/
index.html
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 lang="en">
<head>
<meta charset="utf-8">
<title>D3 Test</title>
<script src="d3/d3.js" type="text/javascript"></script>
<style>
div.bar {
display: inline-block;
width: 20px;
height: 75px;
background-color: teal;
margin-right: 2px;
}
</style>
</head>
<body>
<!-- <p>Here's some text that will hopefully be overwritten</p> -->
<script type="text/javascript">
var svg = d3.select("body").append("svg");
var canDim = [500, 100];
var data = [
[0, 0, 9, 95],
[10, 10, 93, 82],
[20, 20, 60, 10],
[30, 30, 43, 86],
[40, 40, 55, 88],
[50, 50, 24, 33],
[60, 60, 54, 6],
[70, 70, 52, 12],
[80, 80, 37, 46],
[90, 90, 6, 0]
];
var maxr = Math.sqrt(0.5*0.31831*canDim[0]*canDim[1]/data.length); //0.31831 = PI
console.log(maxr);
var Lim = [];
var Scale = [];
for(i=0;i<data[0].length;i++){
Lim[i] = [d3.min(data, function(d) { return d[i];}),d3.max(data, function(d) { return d[i];})];
}
var xScale = d3.scaleLinear().domain([Lim[0][0],Lim[0][1]]).range([0, canDim[0]]);
var yScale = d3.scaleLinear().domain([Lim[1][0],Lim[1][1]]).range([canDim[1],0]);
var rScale = d3.scaleLinear().domain([Lim[2][0],Lim[2][1]]).range([0.1*maxr, maxr]);
var cScale = d3.scaleLinear().domain([Lim[3][0],Lim[3][1]]).rangeRound([0, 255]);
//console.log(test);
svg.attr("width", canDim[0]+2*maxr)
.attr("height", canDim[1]+2*maxr);
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("stroke","black").attr("fill-opacity","0.5")
.attr("cx", function (d) {return xScale(d[0])+maxr;})
.attr("cy", function (d) {return yScale(d[1])+maxr;})
.attr("r", function (d) {return rScale(d[2]);})
.attr("fill", function (d) { //return "red";});
var cval = cScale(d[3]).toString();
var returnVal = cval + "," + cval + "," + cval
return "rgb("+returnVal+")";}
);
svg.append("g")
.attr("transform", "translate(0," + (canDim[1]+1.99*maxr) + ")")
//.ticks(5)
.call(d3.axisTop(d3.scaleLinear().domain([Lim[0][0],Lim[0][1]]).range([0, canDim[0]+2*maxr])));
svg.append("g")
.attr("transform", "translate(0,0)")
//.ticks(5)
.call(d3.axisRight(d3.scaleLinear().domain([Lim[1][0],Lim[1][1]]).range([canDim[1]+2*maxr,0])));
</script>
</body>
</html>