-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
98 lines (85 loc) · 13.7 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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Rose Plot</title>
<!-- <script src="https://unpkg.com/[email protected]/dist/d3.min.js" charset="utf-8"></script> -->
<!-- <script src="/javascript/d3.v3.min.js"></script> -->
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<style type="text/css" src="css/rose_plot.css"></style>
</head>
<body>
<div id="rose_plot"></div>
<script >
//data = {
// "station_id": "198p1",
// "start_time": 1383289200,
// "end_time": 1385881200,
// "wave_height": [
// {"angle": 22.5, "start_angle": 11.25, "end_angle": 33.75, "0": 0.002777777777777778, "1": 0.034722222222222224, "2": 0.08472222222222223, "3": 0.009027777777777777, "4": 0.0006944444444444445, "5": 0.0, "6": 0.0, "7": 0.0, "8": 0.0, "9": 0.0},
// {"angle": 45.0, "start_angle": 33.75, "end_angle": 56.25, "0": 0.034027777777777775, "1": 0.1125, "2": 0.09375, "3": 0.0020833333333333333, "4": 0.0, "5": 0.0, "6": 0.0, "7": 0.0, "8": 0.0, "9": 0.0},
// {"angle": 67.5, "start_angle": 56.25, "end_angle": 78.75, "0": 0.004166666666666667, "1": 0.006944444444444444, "2": 0.002777777777777778, "3": 0.0, "4": 0.0, "5": 0.0, "6": 0.0, "7": 0.0, "8": 0.0, "9": 0.0},
// {"angle": 90.0, "start_angle": 78.75, "end_angle": 101.25, "0": 0.0, "1": 0.0, "2": 0.0, "3": 0.0, "4": 0.0, "5": 0.0, "6": 0.0, "7": 0.0, "8": 0.0, "9": 0.0},
// {"angle": 112.5, "start_angle": 101.25, "end_angle": 123.75, "0": 0.0, "1": 0.0, "2": 0.0, "3": 0.0, "4": 0.0, "5": 0.0, "6": 0.0, "7": 0.0, "8": 0.0, "9": 0.0},
// {"angle": 135.0, "start_angle": 123.75, "end_angle": 146.25, "0": 0.0, "1": 0.0, "2": 0.0, "3": 0.0, "4": 0.0, "5": 0.0, "6": 0.0, "7": 0.0, "8": 0.0, "9": 0.0},
// {"angle": 157.5, "start_angle": 146.25, "end_angle": 168.75, "0": 0.0, "1": 0.0, "2": 0.0, "3": 0.0, "4": 0.0, "5": 0.0, "6": 0.0, "7": 0.0, "8": 0.0, "9": 0.0},
// {"angle": 180.0, "start_angle": 168.75, "end_angle": 191.25, "0": 0.0, "1": 0.0, "2": 0.0, "3": 0.0, "4": 0.0, "5": 0.0, "6": 0.0, "7": 0.0, "8": 0.0, "9": 0.0},
// {"angle": 202.5, "start_angle": 191.25, "end_angle": 213.75, "0": 0.0, "1": 0.0, "2": 0.0, "3": 0.0, "4": 0.0, "5": 0.0, "6": 0.0, "7": 0.0, "8": 0.0, "9": 0.0},
// {"angle": 225.0, "start_angle": 213.75, "end_angle": 236.25, "0": 0.0, "1": 0.0, "2": 0.0, "3": 0.0, "4": 0.0, "5": 0.0, "6": 0.0, "7": 0.0, "8": 0.0, "9": 0.0},
// {"angle": 247.5, "start_angle": 236.25, "end_angle": 258.75, "0": 0.0, "1": 0.0, "2": 0.0, "3": 0.0, "4": 0.0, "5": 0.0, "6": 0.0, "7": 0.0, "8": 0.0, "9": 0.0},
// {"angle": 270.0, "start_angle": 258.75, "end_angle": 281.25, "0": 0.0, "1": 0.0, "2": 0.0, "3": 0.0, "4": 0.0, "5": 0.0, "6": 0.0, "7": 0.0, "8": 0.0, "9": 0.0},
// {"angle": 292.5, "start_angle": 281.25, "end_angle": 303.75, "0": 0.0, "1": 0.0, "2": 0.0, "3": 0.0, "4": 0.0, "5": 0.0, "6": 0.0, "7": 0.0, "8": 0.0, "9": 0.0},
// {"angle": 315.0, "start_angle": 303.75, "end_angle": 326.25, "0": 0.0, "1": 0.06458333333333334, "2": 0.05625, "3": 0.004166666666666667, "4": 0.0020833333333333333, "5": 0.0, "6": 0.0006944444444444445, "7": 0.0, "8": 0.0, "9": 0.0},
// {"angle": 337.5, "start_angle": 326.25, "end_angle": 348.75, "0": 0.0020833333333333333, "1": 0.017361111111111112, "2": 0.03819444444444445, "3": 0.034027777777777775, "4": 0.024305555555555556, "5": 0.01597222222222222, "6": 0.009027777777777777, "7": 0.010416666666666666, "8": 0.013194444444444444, "9": 0.0006944444444444445},
// {"angle": 360.0, "start_angle": 348.75, "end_angle": 371.25, "0": 0.04097222222222222, "1": 0.09166666666666666, "2": 0.05138888888888889, "3": 0.05138888888888889, "4": 0.041666666666666664, "5": 0.01597222222222222, "6": 0.009722222222222222, "7": 0.009027777777777777, "8": 0.00625, "9": 0.0006944444444444445}
// ]
//};
//data = {"station_id": "198p1", "start_time": 1383289200, "end_time": 1383548400, "wave_height": [{"angle": 22.5, "start_angle": 11.25, "end_angle": 33.75, "0": 0.0, "1": 0.034722222222222224, "2": 0.2777777777777778, "3": 0.04861111111111111, "4": 0.0, "5": 0.0, "6": 0.0, "7": 0.0, "8": 0.0, "9": 0.0}, {"angle": 45.0, "start_angle": 33.75, "end_angle": 56.25, "0": 0.0, "1": 0.1875, "2": 0.2361111111111111, "3": 0.020833333333333332, "4": 0.0, "5": 0.0, "6": 0.0, "7": 0.0, "8": 0.0, "9": 0.0}, {"angle": 67.5, "start_angle": 56.25, "end_angle": 78.75, "0": 0.0, "1": 0.0, "2": 0.0, "3": 0.0, "4": 0.0, "5": 0.0, "6": 0.0, "7": 0.0, "8": 0.0, "9": 0.0}, {"angle": 90.0, "start_angle": 78.75, "end_angle": 101.25, "0": 0.0, "1": 0.0, "2": 0.0, "3": 0.0, "4": 0.0, "5": 0.0, "6": 0.0, "7": 0.0, "8": 0.0, "9": 0.0}, {"angle": 112.5, "start_angle": 101.25, "end_angle": 123.75, "0": 0.0, "1": 0.0, "2": 0.0, "3": 0.0, "4": 0.0, "5": 0.0, "6": 0.0, "7": 0.0, "8": 0.0, "9": 0.0}, {"angle": 135.0, "start_angle": 123.75, "end_angle": 146.25, "0": 0.0, "1": 0.0, "2": 0.0, "3": 0.0, "4": 0.0, "5": 0.0, "6": 0.0, "7": 0.0, "8": 0.0, "9": 0.0}, {"angle": 157.5, "start_angle": 146.25, "end_angle": 168.75, "0": 0.0, "1": 0.0, "2": 0.0, "3": 0.0, "4": 0.0, "5": 0.0, "6": 0.0, "7": 0.0, "8": 0.0, "9": 0.0}, {"angle": 180.0, "start_angle": 168.75, "end_angle": 191.25, "0": 0.0, "1": 0.0, "2": 0.0, "3": 0.0, "4": 0.0, "5": 0.0, "6": 0.0, "7": 0.0, "8": 0.0, "9": 0.0}, {"angle": 202.5, "start_angle": 191.25, "end_angle": 213.75, "0": 0.0, "1": 0.0, "2": 0.0, "3": 0.0, "4": 0.0, "5": 0.0, "6": 0.0, "7": 0.0, "8": 0.0, "9": 0.0}, {"angle": 225.0, "start_angle": 213.75, "end_angle": 236.25, "0": 0.0, "1": 0.0, "2": 0.0, "3": 0.0, "4": 0.0, "5": 0.0, "6": 0.0, "7": 0.0, "8": 0.0, "9": 0.0}, {"angle": 247.5, "start_angle": 236.25, "end_angle": 258.75, "0": 0.0, "1": 0.0, "2": 0.0, "3": 0.0, "4": 0.0, "5": 0.0, "6": 0.0, "7": 0.0, "8": 0.0, "9": 0.0}, {"angle": 270.0, "start_angle": 258.75, "end_angle": 281.25, "0": 0.0, "1": 0.0, "2": 0.0, "3": 0.0, "4": 0.0, "5": 0.0, "6": 0.0, "7": 0.0, "8": 0.0, "9": 0.0}, {"angle": 292.5, "start_angle": 281.25, "end_angle": 303.75, "0": 0.0, "1": 0.0, "2": 0.0, "3": 0.0, "4": 0.0, "5": 0.0, "6": 0.0, "7": 0.0, "8": 0.0, "9": 0.0}, {"angle": 315.0, "start_angle": 303.75, "end_angle": 326.25, "0": 0.0, "1": 0.034722222222222224, "2": 0.0, "3": 0.0, "4": 0.0, "5": 0.0, "6": 0.0, "7": 0.0, "8": 0.0, "9": 0.0}, {"angle": 337.5, "start_angle": 326.25, "end_angle": 348.75, "0": 0.0, "1": 0.006944444444444444, "2": 0.0, "3": 0.0, "4": 0.0, "5": 0.0, "6": 0.0, "7": 0.0, "8": 0.0, "9": 0.0}, {"angle": 360.0, "start_angle": 348.75, "end_angle": 371.25, "0": 0.0, "1": 0.0, "2": 0.1527777777777778, "3": 0.0, "4": 0.0, "5": 0.0, "6": 0.0, "7": 0.0, "8": 0.0, "9": 0.0}]};
data = {"station_id": "198p1", "start_time": 1383289200, "end_time": 1383548400, "wave_height": [{"angle": 22.5, "start_angle": 11.25, "end_angle": 33.75, "0": 0.0, "1": 0.034722222222222224, "2": 0.2777777777777778, "3": 0.04861111111111111, "4": 0.0, "5": 0.0, "6": 0.0, "7": 0.0, "8": 0.0, "9": 0.0}, {"angle": 45.0, "start_angle": 33.75, "end_angle": 56.25, "0": 0.0, "1": 0.1875, "2": 0.2361111111111111, "3": 0.020833333333333332, "4": 0.0, "5": 0.0, "6": 0.0, "7": 0.0, "8": 0.0, "9": 0.0}, {"angle": 67.5, "start_angle": 56.25, "end_angle": 78.75, "0": 0.0, "1": 0.0, "2": 0.0, "3": 0.0, "4": 0.0, "5": 0.0, "6": 0.0, "7": 0.0, "8": 0.0, "9": 0.0}, {"angle": 90.0, "start_angle": 78.75, "end_angle": 101.25, "0": 0.0, "1": 0.0, "2": 0.0, "3": 0.0, "4": 0.0, "5": 0.0, "6": 0.0, "7": 0.0, "8": 0.0, "9": 0.0}, {"angle": 112.5, "start_angle": 101.25, "end_angle": 123.75, "0": 0.0, "1": 0.0, "2": 0.0, "3": 0.0, "4": 0.0, "5": 0.0, "6": 0.0, "7": 0.0, "8": 0.0, "9": 0.0}, {"angle": 135.0, "start_angle": 123.75, "end_angle": 146.25, "0": 0.0, "1": 0.0, "2": 0.0, "3": 0.0, "4": 0.0, "5": 0.0, "6": 0.0, "7": 0.0, "8": 0.0, "9": 0.0}, {"angle": 157.5, "start_angle": 146.25, "end_angle": 168.75, "0": 0.0, "1": 0.0, "2": 0.0, "3": 0.0, "4": 0.0, "5": 0.0, "6": 0.0, "7": 0.0, "8": 0.0, "9": 0.0}, {"angle": 180.0, "start_angle": 168.75, "end_angle": 191.25, "0": 0.0, "1": 0.0, "2": 0.0, "3": 0.0, "4": 0.0, "5": 0.0, "6": 0.0, "7": 0.0, "8": 0.0, "9": 0.0}, {"angle": 202.5, "start_angle": 191.25, "end_angle": 213.75, "0": 0.0, "1": 0.0, "2": 0.0, "3": 0.0, "4": 0.0, "5": 0.0, "6": 0.0, "7": 0.0, "8": 0.0, "9": 0.0}, {"angle": 225.0, "start_angle": 213.75, "end_angle": 236.25, "0": 0.0, "1": 0.0, "2": 0.0, "3": 0.0, "4": 0.0, "5": 0.0, "6": 0.0, "7": 0.0, "8": 0.0, "9": 0.0}, {"angle": 247.5, "start_angle": 236.25, "end_angle": 258.75, "0": 0.0, "1": 0.0, "2": 0.0, "3": 0.0, "4": 0.0, "5": 0.0, "6": 0.0, "7": 0.0, "8": 0.0, "9": 0.0}, {"angle": 270.0, "start_angle": 258.75, "end_angle": 281.25, "0": 0.0, "1": 0.0, "2": 0.0, "3": 0.0, "4": 0.0, "5": 0.0, "6": 0.0, "7": 0.0, "8": 0.0, "9": 0.0}, {"angle": 292.5, "start_angle": 281.25, "end_angle": 303.75, "0": 0.0, "1": 0.0, "2": 0.0, "3": 0.0, "4": 0.0, "5": 0.0, "6": 0.0, "7": 0.0, "8": 0.0, "9": 0.0}, {"angle": 315.0, "start_angle": 303.75, "end_angle": 326.25, "0": 0.0, "1": 0.034722222222222224, "2": 0.0, "3": 0.0, "4": 0.0, "5": 0.0, "6": 0.0, "7": 0.0, "8": 0.0, "9": 0.0}, {"angle": 337.5, "start_angle": 326.25, "end_angle": 348.75, "0": 0.0, "1": 0.006944444444444444, "2": 0.0, "3": 0.0, "4": 0.0, "5": 0.0, "6": 0.0, "7": 0.0, "8": 0.0, "9": 0.0}, {"angle": 360.0, "start_angle": 348.75, "end_angle": 371.25, "0": 0.0, "1": 0.0, "2": 0.1527777777777778, "3": 0.0, "4": 0.0, "5": 0.0, "6": 0.0, "7": 0.0, "8": 0.0, "9": 0.0}]};
console.log(data);
// var colors = ["#23171b","#271a28","#2b1c33","#2f1e3f","#32204a","#362354","#39255f","#3b2768","#3e2a72","#402c7b","#422f83","#44318b","#453493","#46369b","#4839a2","#493ca8","#493eaf","#4a41b5","#4a44bb","#4b46c0","#4b49c5","#4b4cca","#4b4ecf","#4b51d3","#4a54d7","#4a56db","#4959de","#495ce2","#485fe5","#4761e7","#4664ea","#4567ec","#446aee","#446df0","#426ff2","#4172f3","#4075f5","#3f78f6","#3e7af7","#3d7df7","#3c80f8","#3a83f9","#3985f9","#3888f9","#378bf9","#368df9","#3590f8","#3393f8","#3295f7","#3198f7","#309bf6","#2f9df5","#2ea0f4","#2da2f3","#2ca5f1","#2ba7f0","#2aaaef","#2aaced","#29afec","#28b1ea","#28b4e8","#27b6e6","#27b8e5","#26bbe3","#26bde1","#26bfdf","#25c1dc","#25c3da","#25c6d8","#25c8d6","#25cad3","#25ccd1","#25cecf","#26d0cc","#26d2ca","#26d4c8","#27d6c5","#27d8c3","#28d9c0","#29dbbe","#29ddbb","#2adfb8","#2be0b6","#2ce2b3","#2de3b1","#2ee5ae","#30e6ac","#31e8a9","#32e9a6","#34eba4","#35eca1","#37ed9f","#39ef9c","#3af09a","#3cf197","#3ef295","#40f392","#42f490","#44f58d","#46f68b","#48f788","#4af786","#4df884","#4ff981","#51fa7f","#54fa7d","#56fb7a","#59fb78","#5cfc76","#5efc74","#61fd71","#64fd6f","#66fd6d","#69fd6b","#6cfd69","#6ffe67","#72fe65","#75fe63","#78fe61","#7bfe5f","#7efd5d","#81fd5c","#84fd5a","#87fd58","#8afc56","#8dfc55","#90fb53","#93fb51","#96fa50","#99fa4e","#9cf94d","#9ff84b","#a2f84a","#a6f748","#a9f647","#acf546","#aff444","#b2f343","#b5f242","#b8f141","#bbf03f","#beef3e","#c1ed3d","#c3ec3c","#c6eb3b","#c9e93a","#cce839","#cfe738","#d1e537","#d4e336","#d7e235","#d9e034","#dcdf33","#dedd32","#e0db32","#e3d931","#e5d730","#e7d52f","#e9d42f","#ecd22e","#eed02d","#f0ce2c","#f1cb2c","#f3c92b","#f5c72b","#f7c52a","#f8c329","#fac029","#fbbe28","#fdbc28","#feb927","#ffb727","#ffb526","#ffb226","#ffb025","#ffad25","#ffab24","#ffa824","#ffa623","#ffa323","#ffa022","#ff9e22","#ff9b21","#ff9921","#ff9621","#ff9320","#ff9020","#ff8e1f","#ff8b1f","#ff881e","#ff851e","#ff831d","#ff801d","#ff7d1d","#ff7a1c","#ff781c","#ff751b","#ff721b","#ff6f1a","#fd6c1a","#fc6a19","#fa6719","#f96418","#f76118","#f65f18","#f45c17","#f25916","#f05716","#ee5415","#ec5115","#ea4f14","#e84c14","#e64913","#e44713","#e24412","#df4212","#dd3f11","#da3d10","#d83a10","#d5380f","#d3360f","#d0330e","#ce310d","#cb2f0d","#c92d0c","#c62a0b","#c3280b","#c1260a","#be2409","#bb2309","#b92108","#b61f07","#b41d07","#b11b06","#af1a05","#ac1805","#aa1704","#a81604","#a51403","#a31302","#a11202","#9f1101","#9d1000","#9b0f00","#9a0e00","#980e00","#960d00","#950c00","#940c00","#930c00","#920c00","#910b00","#910c00","#900c00","#900c00","#900c00"];
var width = 420;
var height = 420
var svg = d3.select("#rose_plot").append("svg").attr('width', width).attr('height', height)
var g = svg.append('g').attr('transform', `translate(${width/2}, ${height/2})`);
var innerRadius = 16;
var outerRadius = (Math.min(height, width) - innerRadius) / 2;
var angle = d3.scaleLinear()
.range([0, 2 * Math.PI])
.domain([0, 360]);
var color = d3.scaleOrdinal()
.range(['#39255f', '#4567ec', '#2aaaef', '#2adfb8', '#56fb7a', '#9ff84b', '#e5d730', '#ff9e22', '#f25916', '#b61f07']);
var radius = d3.scaleLinear()
.range([innerRadius, outerRadius])
.domain([0, 1]);
// Draw gray bullseye
g.append('g')
.selectAll('g')
.data(radius.ticks(3))
.enter().append('circle')
.attr('fill', 'none')
.attr('stroke', 'gray')
.attr("stroke-dasharray", "5,3")
.attr('r', radius);
// Draw the wave height rose data
g.append('g')
.selectAll('g')
.data(d3.stack().keys(d3.range(0,10))(data.wave_height))
.enter().append('g')
.attr('fill', (d) => { return color(d.key); })
.selectAll('path')
.data(d => { return d; })
.enter().append('path')
//.attr('class', (d, i) => { return JSON.stringify(d);})
.attr('class', (d, i) => { return i;})
.attr('d', d3.arc()
.startAngle((d) => { return angle(d.data.start_angle); })
.endAngle((d) => { return angle(d.data.end_angle); })
.innerRadius((d) => { return radius(d[0]); })
.outerRadius((d) => { return radius(d[1]); })
);
</script>
</body>
</html>