teratail
回答率
85.47%
質問するログイン新規登録
トップに関する質問Vega-Liteでグラフが表示されない

編集履歴

質問編集履歴

3

写真の追加

2021/09/23 23:34

投稿

putaro
putaro

スコア9

test CHANGED
File without changes
test CHANGED
@@ -36,7 +36,7 @@
36
36
 
37
37
  ,"step":0.01666666666666
38
38
 
39
- ,"as":"time_series"}
39
+ ,"as":"time"}
40
40
 
41
41
  }
42
42
 
@@ -44,7 +44,7 @@
44
44
 
45
45
  "encoding":{
46
46
 
47
- "x":{"field":"time_series","type":"quantitative"}
47
+ "x":{"field":"time","type":"quantitative"}
48
48
 
49
49
  ,"y":{"field":"x","type":"quantitative"}
50
50
 
@@ -54,6 +54,10 @@
54
54
 
55
55
  ```
56
56
 
57
+ ### Vega Editorの描画結果
58
+
59
+ ![グラフ](c6057e2258ffe535db2817e0c92425db.png)
60
+
57
61
 
58
62
 
59
63
  ### データセットを作成するコード

2

問題点の一部改善

2021/09/23 23:34

投稿

putaro
putaro

スコア9

test CHANGED
@@ -1 +1 @@
1
- Vega-LiteでWARN Infinite extent for field "Time_Seriesl": [Infinity, -Infinity]の警告が表示される
1
+ Vega-Liteでグラフが表示されない
test CHANGED
@@ -1,8 +1,6 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
- 加速度センサーから取得した値を、**Vega-Lite**を使って可視化させようとしたのですが、画面には描画されず、エラーを確認したところ
3
+ 加速度センサーから取得した値を、**Vega-Lite**を使って可視化させようとしたのですが、ブラウザには描画されず、**Vega Editor**を使って直接、値を入力してグラフの作成も試みたのですが、やはりダメでした。
4
-
5
- **WARN Infinite extent for field "Time_Seriesl": [Infinity, -Infinity]**と表示されていました。自分では原因がわからずどのようにすれば描画できるでしょうか。
6
4
 
7
5
  ### 使用環境
8
6
 
@@ -20,308 +18,256 @@
20
18
 
21
19
  ### 作成したデータセット
22
20
 
23
- ```
24
-
25
- {
26
-
27
- '$schema': 'https://vega.github.io/schema/vega-lite/v5.json',
28
-
29
- // 加速度センサーのデータ
30
-
31
- data: {
32
-
33
- values: [
34
-
35
- //　加速度センサーのデータ
36
-
37
- [Object], [Object], [Object], [Object], [Object], [Object],
38
-
39
- [Object], [Object], [Object], [Object],
40
-
41
- ... 107201 more items
42
-
43
- ],
44
-
45
- // x軸用のシーケンスを作成
46
-
47
- sequence: {
48
-
49
- start: 0,
50
-
51
- stop: 1788.35,
52
-
53
- step: 0.016666666666666666,
54
-
55
- as: 'Time_Series'
21
+ データ数は54個　X軸が計測時間のシーケンス、Y軸が加速度センサーの軸のどれかの値（今回はx軸）
22
+
23
+ ```
24
+
25
+ {"$schema":"https://vega.github.io/schema/vega-lite/v5.json",
26
+
27
+ "data":{
28
+
29
+ "values":[{"x":0.018,"y":0.034,"z":0.066},{"x":0.01,"y":0.044,"z":0.079},{"x":0.018,"y":0.031,"z":0.069},{"x":0.021,"y":0.032,"z":0.072},{"x":0.02,"y":0.038,"z":0.071},{"x":0.015,"y":0.04,"z":0.072},{"x":0.024,"y":0.039,"z":0.067},{"x":0.02,"y":0.032,"z":0.067},{"x":0.017,"y":0.033,"z":0.065},{"x":0.022,"y":0.038,"z":0.074},{"x":0.019,"y":0.03,"z":0.072},{"x":0.015,"y":0.042,"z":0.068},{"x":0.019,"y":0.044,"z":0.074},{"x":0.01,"y":0.045,"z":0.075},{"x":0.015,"y":0.034,"z":0.072},{"x":0.016,"y":0.032,"z":0.063},{"x":0.02,"y":0.042,"z":0.065},{"x":0.02,"y":0.032,"z":0.065},{"x":0.019,"y":0.036,"z":0.077},{"x":0.017,"y":0.037,"z":0.08},{"x":0.028,"y":0.031,"z":0.065},{"x":0.022,"y":0.037,"z":0.067},{"x":0.015,"y":0.043,"z":0.06},{"x":0.022,"y":0.037,"z":0.072},{"x":0.019,"y":0.037,"z":0.065},{"x":0.018,"y":0.033,"z":0.069},{"x":0.023,"y":0.033,"z":0.073},{"x":0.022,"y":0.031,"z":0.055},{"x":0.022,"y":0.039,"z":0.058},{"x":0.015,"y":0.038,"z":0.065},{"x":0.025,"y":0.035,"z":0.067},{"x":0.015,"y":0.048,"z":0.074},{"x":0.012,"y":0.037,"z":0.079},{"x":0.021,"y":0.023,"z":0.067},{"x":0.013,"y":0.026,"z":0.067},{"x":0.01,"y":0.037,"z":0.072},{"x":0.022,"y":0.036,"z":0.067},{"x":0.019,"y":0.035,"z":0.072},{"x":0.019,"y":0.04,"z":0.075},{"x":0.016,"y":0.028,"z":0.067},{"x":0.023,"y":0.041,"z":0.076},{"x":0.018,"y":0.033,"z":0.064},{"x":0.019,"y":0.029,"z":0.066},{"x":0.018,"y":0.032,"z":0.071},{"x":0.028,"y":0.042,"z":0.065},{"x":0.022,"y":0.031,"z":0.06},{"x":0.018,"y":0.034,"z":0.072},{"x":0.02,"y":0.035,"z":0.065},{"x":0.018,"y":0.029,"z":0.064},{"x":0.019,"y":0.036,"z":0.081},{"x":0.013,"y":0.038,"z":0.07},{"x":0.014,"y":0.033,"z":0.075},{"x":0.02,"y":0.036,"z":0.069},{"x":0.016,"y":0.04,"z":0.071}],
30
+
31
+ "sequence":
32
+
33
+ {"start":0
34
+
35
+ ,"stop":0.9
36
+
37
+ ,"step":0.01666666666666
38
+
39
+ ,"as":"time_series"}
40
+
41
+ }
42
+
43
+ ,"mark":"line",
44
+
45
+ "encoding":{
46
+
47
+ "x":{"field":"time_series","type":"quantitative"}
48
+
49
+ ,"y":{"field":"x","type":"quantitative"}
50
+
51
+ }
52
+
53
+ ,"title":"Time Series Chart"}
54
+
55
+ ```
56
+
57
+
58
+
59
+ ### データセットを作成するコード
60
+
61
+ ```js
62
+
63
+ router.post('/graph', /*async*/ function(req, res, next) {
64
+
65
+ var url = req.body;
66
+
67
+ //console.log(url);
68
+
69
+ //　vega-lite用のデータを作成する
70
+
71
+ async function makeVispec() {
72
+
73
+ var vispec = {"$schema": "https://vega.github.io/schema/vega-lite/v5.json"};
74
+
75
+ // 加速度センサーのデータを取得
76
+
77
+ var values = await valuesObj(url.url);
78
+
79
+ JSON.stringify(values);
80
+
81
+ console.log(values);
82
+
83
+ var mark = "line";
84
+
85
+ var encoding = {
86
+
87
+ "x" : {"field": "Time_Seriesl", "type" :"temporal"},
88
+
89
+ "y" : {"field":"x" , "type": "quantitative"}
90
+
91
+ };
92
+
93
+ var title = "Time Series Chart";
94
+
95
+ // サンプル数+周波数
96
+
97
+ var N = values.values.length;
98
+
99
+ var fs = 60;
100
+
101
+ // x軸のためのシーケンスを作成
102
+
103
+ var sequence = {"start":0,"stop":N/fs,"step":1/60,"as":"Time_Series"};
104
+
105
+
106
+
107
+ vispec.data = values;
108
+
109
+ vispec.mark = mark;
110
+
111
+ vispec.encoding = encoding;
112
+
113
+ vispec.title = title;
114
+
115
+ data.sequence = sequence;
116
+
117
+
118
+
119
+ //console.log(vispec);
120
+
121
+ res.json(vispec);
56
122
 
57
123
  }
58
124
 
59
- },
60
-
61
- // 折線グラフ
62
-
63
- mark: 'line',
64
-
65
- encoding: {
66
-
67
- // 先ほど作成したシーケンス
68
-
69
- x: { field: 'Time_Seriesl', type: 'temporal' },
70
-
71
- // 加速度センサーのx軸の値
72
-
73
- y: { field: 'x', type: 'quantitative' }
74
-
75
- },
76
-
77
- title: 'Time Series Chart'
78
-
79
- }
80
-
81
- ```
82
-
83
- ### 加速度センサーのデータ
84
-
85
- ```
86
-
87
- {
88
-
89
- values: [
90
-
91
- { x: 0.018, y: 0.034, z: 0.066 },
92
-
93
- { x: 0.01, y: 0.044, z: 0.079 },
94
-
95
- { x: 0.018, y: 0.031, z: 0.069 },
96
-
97
- { x: 0.02, y: 0.038, z: 0.071 },
98
-
99
- { x: 0.015, y: 0.04, z: 0.072 },
100
-
101
- { x: 0.017, y: 0.026, z: 0.069 },
102
-
103
- { x: 0.015, y: 0.042, z: 0.069 },
104
-
105
- ... 107201 more items
106
-
107
- ]
108
-
109
- }
110
-
111
- ```
112
-
113
- ### データセットを作成するコード
125
+ makeVispec();
126
+
127
+ });
128
+
129
+
130
+
131
+ module.exports = router;
132
+
133
+ ```
134
+
135
+ 色々と調べてはみたのですが、はっきりとは意味がわからなかったです。
136
+
137
+
138
+
139
+ ### 追記
140
+
141
+ ejsのソースコード
142
+
143
+ ```ejs
144
+
145
+ <!DOCTYPE html>
146
+
147
+ <html>
148
+
149
+ <head>
150
+
151
+ <meta charset="UTF-8">
152
+
153
+ <title><%= title%></title>
154
+
155
+ <link rel="stylesheet" href="/stylesheets/style.min.css" />
156
+
157
+ <link rel="stylesheet" href="/stylesheets/style.css" />
158
+
159
+ <script src="/javascripts/jquery-3.6.0.min.js"></script>
160
+
161
+ <script src="/javascripts/jstree.min.js"></script>
162
+
163
+
164
+
165
+ <script src="https://cdn.jsdelivr.net/npm/vega@5.20.2"></script>
166
+
167
+ <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.1.1"></script>
168
+
169
+ <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.18.2"></script>
170
+
171
+
172
+
173
+ </head>
174
+
175
+ <body>
176
+
177
+ <div id="content">
178
+
179
+ <header>
180
+
181
+ ヘッダー部分
182
+
183
+ </header>
184
+
185
+ <div id="split-panel">
186
+
187
+ <div id="left-panel">
188
+
189
+ <div id="file_tree"></div>
190
+
191
+ </div>
192
+
193
+ <div id="right-panel">
194
+
195
+ <div id="chart"></div>
196
+
197
+ <!-- ここ描画 -->
198
+
199
+
200
+
201
+ </div>
202
+
203
+ </div>
204
+
205
+
206
+
207
+ </div>
208
+
209
+ <script src="/javascripts/readTree.js"></script>
210
+
211
+ </body>
212
+
213
+ </html>
214
+
215
+ ```
216
+
217
+ ### ejsに描画させるコード
114
218
 
115
219
  ```js
116
220
 
117
- router.post('/graph', /*async*/ function(req, res, next) {
221
+ $('#file_tree').on("changed.jstree", function (e, data) {
118
-
119
- var url = req.body;
222
+
120
-
121
- //console.log(url);
223
+ var myReg = new RegExp('.+\.\w{3}$');
122
-
123
- //　vega-lite用のデータを作成する
224
+
124
-
125
- async function makeVispec() {
225
+ if (myReg.test(data.selected[0])) {
126
-
127
- var vispec = {"$schema": "https://vega.github.io/schema/vega-lite/v5.json"};
226
+
128
-
129
- // 加速度センサーのデータを取得
227
+ // データがあるURL
130
-
228
+
131
- var values = await valuesObj(url.url);
229
+ var url = "BASE_URL" + data.node['parent'] + '/' + data.selected[0];
132
-
133
- JSON.stringify(values);
230
+
134
-
135
- console.log(values);
231
+ console.log(url);
232
+
136
-
233
+ $.ajax({
234
+
235
+ async:true,
236
+
237
+ url:"http://localhost:3000/graph",
238
+
239
+ type: 'POST',
240
+
241
+ data:{'url':url},
242
+
243
+ contentType: 'application/x-www-form-urlencoded; charset=UTF-8'
244
+
245
+ }).done((data) => {
246
+
137
- var mark = "line";
247
+ console.log('成功');
248
+
138
-
249
+ // 作成したデータセット
250
+
139
- var encoding = {
251
+ var vlSpec = data;
140
-
252
+
141
- "x" : {"field": "Time_Seriesl", "type" :"temporal"},
253
+ // 描画させる　
142
-
254
+
143
- "y" : {"field":"x" , "type": "quantitative"}
255
+ vegaEmbed('#chart', vlSpec);
256
+
144
-
257
+ }).fail(() => {
258
+
259
+ console.log('失敗');
260
+
145
- };
261
+ });
146
-
147
- var title = "Time Series Chart";
148
-
149
- // サンプル数+周波数
150
-
151
- var N = values.values.length;
152
-
153
- var fs = 60;
154
-
155
- // x軸のためのシーケンスを作成
156
-
157
- var sequence = {"start":0,"stop":N/fs,"step":1/60,"as":"Time_Series"};
158
262
 
159
263
 
160
264
 
161
- vispec.data = values;
265
+ } else {
162
-
163
- vispec.mark = mark;
266
+
164
-
165
- vispec.encoding = encoding;
166
-
167
- vispec.title = title;
168
-
169
- data.sequence = sequence;
170
-
171
-
172
-
173
- //console.log(vispec);
267
+ console.log("Folder")
174
-
175
- res.json(vispec);
176
268
 
177
269
  }
178
270
 
179
- makeVispec();
180
-
181
- });
182
-
183
-
184
-
185
- module.exports = router;
186
-
187
- ```
188
-
189
- 色々と調べてはみたのですが、はっきりとは意味がわからなかったです。
190
-
191
-
192
-
193
- ### 追記
194
-
195
- ejsのソースコード
196
-
197
- ```ejs
198
-
199
- <!DOCTYPE html>
200
-
201
- <html>
202
-
203
- <head>
204
-
205
- <meta charset="UTF-8">
206
-
207
- <title><%= title%></title>
208
-
209
- <link rel="stylesheet" href="/stylesheets/style.min.css" />
210
-
211
- <link rel="stylesheet" href="/stylesheets/style.css" />
212
-
213
- <script src="/javascripts/jquery-3.6.0.min.js"></script>
214
-
215
- <script src="/javascripts/jstree.min.js"></script>
216
-
217
-
218
-
219
- <script src="https://cdn.jsdelivr.net/npm/vega@5.20.2"></script>
220
-
221
- <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.1.1"></script>
222
-
223
- <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.18.2"></script>
224
-
225
-
226
-
227
- </head>
228
-
229
- <body>
230
-
231
- <div id="content">
232
-
233
- <header>
234
-
235
- ヘッダー部分
236
-
237
- </header>
238
-
239
- <div id="split-panel">
240
-
241
- <div id="left-panel">
242
-
243
- <div id="file_tree"></div>
244
-
245
- </div>
246
-
247
- <div id="right-panel">
248
-
249
- <div id="chart"></div>
250
-
251
- <!-- ここ描画 -->
252
-
253
-
254
-
255
- </div>
256
-
257
- </div>
258
-
259
-
260
-
261
- </div>
262
-
263
- <script src="/javascripts/readTree.js"></script>
264
-
265
- </body>
266
-
267
- </html>
268
-
269
- ```
270
-
271
- ### ejsに描画させるコード
272
-
273
- ```js
274
-
275
- $('#file_tree').on("changed.jstree", function (e, data) {
276
-
277
- var myReg = new RegExp('.+\.\w{3}$');
278
-
279
- if (myReg.test(data.selected[0])) {
280
-
281
- // データがあるURL
282
-
283
- var url = "BASE_URL" + data.node['parent'] + '/' + data.selected[0];
284
-
285
- console.log(url);
286
-
287
- $.ajax({
288
-
289
- async:true,
290
-
291
- url:"http://localhost:3000/graph",
292
-
293
- type: 'POST',
294
-
295
- data:{'url':url},
296
-
297
- contentType: 'application/x-www-form-urlencoded; charset=UTF-8'
298
-
299
- }).done((data) => {
300
-
301
- console.log('成功');
302
-
303
- // 作成したデータセット
304
-
305
- var vlSpec = data;
306
-
307
- // 描画させる　
308
-
309
- vegaEmbed('#chart', vlSpec);
310
-
311
- }).fail(() => {
312
-
313
- console.log('失敗');
314
-
315
- });
316
-
317
-
318
-
319
- } else {
320
-
321
- console.log("Folder")
322
-
323
- }
324
-
325
271
  });
326
272
 
327
273
  ```

1

問題点を全部確認するため

2021/09/23 23:32

投稿

putaro
putaro

スコア9

test CHANGED
File without changes
test CHANGED
@@ -187,3 +187,141 @@
187
187
  ```
188
188
 
189
189
  色々と調べてはみたのですが、はっきりとは意味がわからなかったです。
190
+
191
+
192
+
193
+ ### 追記
194
+
195
+ ejsのソースコード
196
+
197
+ ```ejs
198
+
199
+ <!DOCTYPE html>
200
+
201
+ <html>
202
+
203
+ <head>
204
+
205
+ <meta charset="UTF-8">
206
+
207
+ <title><%= title%></title>
208
+
209
+ <link rel="stylesheet" href="/stylesheets/style.min.css" />
210
+
211
+ <link rel="stylesheet" href="/stylesheets/style.css" />
212
+
213
+ <script src="/javascripts/jquery-3.6.0.min.js"></script>
214
+
215
+ <script src="/javascripts/jstree.min.js"></script>
216
+
217
+
218
+
219
+ <script src="https://cdn.jsdelivr.net/npm/vega@5.20.2"></script>
220
+
221
+ <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.1.1"></script>
222
+
223
+ <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.18.2"></script>
224
+
225
+
226
+
227
+ </head>
228
+
229
+ <body>
230
+
231
+ <div id="content">
232
+
233
+ <header>
234
+
235
+ ヘッダー部分
236
+
237
+ </header>
238
+
239
+ <div id="split-panel">
240
+
241
+ <div id="left-panel">
242
+
243
+ <div id="file_tree"></div>
244
+
245
+ </div>
246
+
247
+ <div id="right-panel">
248
+
249
+ <div id="chart"></div>
250
+
251
+ <!-- ここ描画 -->
252
+
253
+
254
+
255
+ </div>
256
+
257
+ </div>
258
+
259
+
260
+
261
+ </div>
262
+
263
+ <script src="/javascripts/readTree.js"></script>
264
+
265
+ </body>
266
+
267
+ </html>
268
+
269
+ ```
270
+
271
+ ### ejsに描画させるコード
272
+
273
+ ```js
274
+
275
+ $('#file_tree').on("changed.jstree", function (e, data) {
276
+
277
+ var myReg = new RegExp('.+\.\w{3}$');
278
+
279
+ if (myReg.test(data.selected[0])) {
280
+
281
+ // データがあるURL
282
+
283
+ var url = "BASE_URL" + data.node['parent'] + '/' + data.selected[0];
284
+
285
+ console.log(url);
286
+
287
+ $.ajax({
288
+
289
+ async:true,
290
+
291
+ url:"http://localhost:3000/graph",
292
+
293
+ type: 'POST',
294
+
295
+ data:{'url':url},
296
+
297
+ contentType: 'application/x-www-form-urlencoded; charset=UTF-8'
298
+
299
+ }).done((data) => {
300
+
301
+ console.log('成功');
302
+
303
+ // 作成したデータセット
304
+
305
+ var vlSpec = data;
306
+
307
+ // 描画させる　
308
+
309
+ vegaEmbed('#chart', vlSpec);
310
+
311
+ }).fail(() => {
312
+
313
+ console.log('失敗');
314
+
315
+ });
316
+
317
+
318
+
319
+ } else {
320
+
321
+ console.log("Folder")
322
+
323
+ }
324
+
325
+ });
326
+
327
+ ```