-
Notifications
You must be signed in to change notification settings - Fork 1
/
interactive_plot.js
105 lines (92 loc) · 2.5 KB
/
interactive_plot.js
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
99
100
101
102
103
104
105
"use strict";
var Plotly = require("plotly.js-dist");
module.exports = function interactivePlot (grid, div, call) {
call.before();
var nx = grid.Nx;
var ny = grid.Ny;
// let"s start with deterministic data i.e. member 0
var values = grid.DataValues[0];
var k = 0;
var x = new Array(nx);
var y = new Array(ny);
var z = new Array(ny);
for (var j = 0; j < ny; j++) {
z[j] = new Array(nx);
for (var i = 0; i < nx; i++) {
if (grid.TypeOfProjection === 0) { // Latitude/longitude
var lonLat = grid.getLonLat(i, j);
x[i] = lonLat[0];
y[j] = lonLat[1];
}
z[j][i] = values[k++];
}
}
var data = [{
type: "heatmap",
z: z,
hovertemplate: "%{z:.1f}K<extra>(%{x}, %{y})</extra>",
colorscale: [
[0.0, "rgb(0, 0, 127)"],
[0.2, "rgb(0, 0, 255)"],
[0.5, "rgb(255, 255, 255)"],
[0.8, "rgb(255, 0, 0)"],
[1.0, "rgb(127, 0, 0)"]
],
colorbar: {
len: 0.5
}
}];
if (grid.TypeOfProjection === 0) { // Latitude/longitude
data[0].x = x;
data[0].y = y;
data.push({
type: "scattergeo"
});
}
var title = [
"TypeOfData: " + grid.meta.TypeOfData,
"Variable: " + grid.meta.CategoryOfParametersByProductDiscipline
].join("<br>");
var layout = {
xaxis: {
visible: false,
constrain: "domain",
scaleanchor: "y",
fixedrange: true
},
yaxis: {
visible: false,
constrain: "domain",
scaleratio: 0.5,
fixedrange: true
},
geo: {
projection: { rotation: { lon: 180 + grid.Lo1 } },
bgcolor: "rgba(0,0,0,0)",
dragmode: false
},
annotations: [{
text: title,
showarrow: false,
xref: "paper",
yref: "paper",
xanchor: "left",
yanchor: "top",
x: 0,
y: 0.9
}],
margin: {
t: 0,
b: 0
}
};
var config = {
scrollZoom: false,
responsive: true,
modeBarButtons: [["toggleHover"]]
};
Plotly.newPlot(div, data, layout, config).then(function (gd) {
Plotly.d3.select(gd).select("g.geo > .bg > rect").style("pointer-events", null);
call.after();
});
};