編集履歴

質問編集履歴

写真の追加

2021/09/23 23:34

投稿

putaro

スコア9

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -36,7 +36,7 @@
  ,"step":0.01666666666666
- ,"as":"time_series"}
+ ,"as":"time"}
  }
@@ -44,7 +44,7 @@
  "encoding":{
-   "x":{"field":"time_series","type":"quantitative"}
+   "x":{"field":"time","type":"quantitative"}
  ,"y":{"field":"x","type":"quantitative"}
@@ -54,6 +54,10 @@
 ```
+### Vega Editorの描画結果
+![グラフ](c6057e2258ffe535db2817e0c92425db.png)
 ### データセットを作成するコード

問題点の一部改善

2021/09/23 23:34

投稿

putaro

スコア9

test CHANGED Viewed

	@@ -1 +1 @@
1	- Vega-Liteで~~WARN Infinite extent for field "Time_Seriesl": [Infinity, -Infinity]の警告~~が表示される
1	+ Vega-Liteでグラフが表示されない

test CHANGED Viewed

@@ -1,8 +1,6 @@
 ### 前提・実現したいこと
-加速度センサーから取得した値を、**Vega-Lite**を使って可視化させようとしたのですが、画面には描画されず、エラーを確認したところ
+加速度センサーから取得した値を、**Vega-Lite**を使って可視化させようとしたのですが、ブラウザには描画されず、**Vega Editor**を使って直接、値を入力してグラフの作成も試みたのですが、やはりダメでした。
-**WARN Infinite extent for field "Time_Seriesl": [Infinity, -Infinity]**と表示されていました。自分では原因がわからずどのようにすれば描画できるでしょうか。
 ### 使用環境
@@ -20,308 +18,256 @@
 ### 作成したデータセット
-```
-{
-  '$schema': 'https://vega.github.io/schema/vega-lite/v5.json',
-  // 加速度センサーのデータ
-  data: {
-    values: [
-      //　加速度センサーのデータ
-      [Object], [Object], [Object], [Object], [Object], [Object],
-      [Object], [Object], [Object], [Object],
-      ... 107201 more items
-    ],
-    // x軸用のシーケンスを作成
-    sequence: {
-      start: 0,
-      stop: 1788.35,
-      step: 0.016666666666666666,
-      as: 'Time_Series'
+データ数は54個　X軸が計測時間のシーケンス、Y軸が加速度センサーの軸のどれかの値（今回はx軸）
+```
+ {"$schema":"https://vega.github.io/schema/vega-lite/v5.json",
+"data":{
+   "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}],
+ "sequence":
+ {"start":0
+ ,"stop":0.9
+ ,"step":0.01666666666666
+ ,"as":"time_series"}
+ }
+ ,"mark":"line",
+ "encoding":{
+   "x":{"field":"time_series","type":"quantitative"}
+ ,"y":{"field":"x","type":"quantitative"}
+ }
+ ,"title":"Time Series Chart"}
+```
+### データセットを作成するコード
+```js
+router.post('/graph', /*async*/ function(req, res, next) {
+    var url = req.body;
+    //console.log(url);
+    //　vega-lite用のデータを作成する
+    async function makeVispec() {
+        var vispec = {"$schema": "https://vega.github.io/schema/vega-lite/v5.json"};
+        // 加速度センサーのデータを取得
+        var values = await valuesObj(url.url);
+        JSON.stringify(values);
+        console.log(values);
+        var mark = "line";
+        var encoding = {
+            "x" : {"field": "Time_Seriesl", "type" :"temporal"},
+            "y" : {"field":"x" , "type": "quantitative"}
+        };
+        var title = "Time Series Chart";
+        // サンプル数+周波数
+        var N = values.values.length;
+        var fs = 60;
+        // x軸のためのシーケンスを作成
+        var sequence = {"start":0,"stop":N/fs,"step":1/60,"as":"Time_Series"};
+        vispec.data = values;
+        vispec.mark = mark;
+        vispec.encoding = encoding;
+        vispec.title = title;
+        data.sequence = sequence;
+        //console.log(vispec);
+        res.json(vispec);
     }
-  },
-  // 折線グラフ
-  mark: 'line',
-  encoding: {
-    // 先ほど作成したシーケンス
-    x: { field: 'Time_Seriesl', type: 'temporal' },
-    // 加速度センサーのx軸の値
-    y: { field: 'x', type: 'quantitative' }
-  },
-  title: 'Time Series Chart'
-}
-```
-### 加速度センサーのデータ
-```
-{
-  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.02, y: 0.038, z: 0.071 },
-    { x: 0.015, y: 0.04, z: 0.072 },
-    { x: 0.017, y: 0.026, z: 0.069 },
-    { x: 0.015, y: 0.042, z: 0.069 },
-    ... 107201 more items
-  ]
-}
-```
-### データセットを作成するコード
+    makeVispec();
+});
+module.exports = router;
+```
+色々と調べてはみたのですが、はっきりとは意味がわからなかったです。
+### 追記
+ejsのソースコード
+```ejs
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title><%= title%></title>
+    <link rel="stylesheet" href="/stylesheets/style.min.css" />
+    <link rel="stylesheet" href="/stylesheets/style.css" />
+    <script src="/javascripts/jquery-3.6.0.min.js"></script>
+    <script src="/javascripts/jstree.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vega@5.20.2"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.1.1"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.18.2"></script>
+  </head>
+  <body>
+    <div id="content">
+        <header>
+        ヘッダー部分
+        </header>
+        <div id="split-panel">
+            <div id="left-panel">
+                <div id="file_tree"></div>
+            </div>
+            <div id="right-panel">
+                <div id="chart"></div>
+                <!-- ここ描画 -->
+            </div>
+        </div>
+    </div>
+    <script src="/javascripts/readTree.js"></script>
+  </body>
+</html>
+```
+### ejsに描画させるコード
 ```js
-router.post('/graph', /*async*/ function(req, res, next) {
+$('#file_tree').on("changed.jstree", function (e, data) {
-    var url = req.body;
-    //console.log(url);
+    var myReg = new RegExp('.+\.\w{3}$');
-    //　vega-lite用のデータを作成する
-    async function makeVispec() {
+    if (myReg.test(data.selected[0])) {
-        var vispec = {"$schema": "https://vega.github.io/schema/vega-lite/v5.json"};
-        // 加速度センサーのデータを取得
+        // データがあるURL
-        var values = await valuesObj(url.url);
+        var url = "BASE_URL" + data.node['parent'] + '/' + data.selected[0];
-        JSON.stringify(values);
-        console.log(values);
+        console.log(url);
+        $.ajax({
+            async:true,
+            url:"http://localhost:3000/graph",
+            type: 'POST',
+            data:{'url':url},
+            contentType: 'application/x-www-form-urlencoded; charset=UTF-8'
+        }).done((data) => {
-        var mark = "line";
+        console.log('成功');
+        // 作成したデータセット
-        var encoding = {
+        var vlSpec = data;
-            "x" : {"field": "Time_Seriesl", "type" :"temporal"},
+        // 描画させる
-            "y" : {"field":"x" , "type": "quantitative"}
+        vegaEmbed('#chart', vlSpec);
+    }).fail(() => {
+        console.log('失敗');
-        };
+    });
-        var title = "Time Series Chart";
-        // サンプル数+周波数
-        var N = values.values.length;
-        var fs = 60;
-        // x軸のためのシーケンスを作成
-        var sequence = {"start":0,"stop":N/fs,"step":1/60,"as":"Time_Series"};
-        vispec.data = values;
+    } else {
-        vispec.mark = mark;
-        vispec.encoding = encoding;
-        vispec.title = title;
-        data.sequence = sequence;
-        //console.log(vispec);
+        console.log("Folder")
-        res.json(vispec);
     }
-    makeVispec();
-});
-module.exports = router;
-```
-色々と調べてはみたのですが、はっきりとは意味がわからなかったです。
-### 追記
-ejsのソースコード
-```ejs
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8">
-    <title><%= title%></title>
-    <link rel="stylesheet" href="/stylesheets/style.min.css" />
-    <link rel="stylesheet" href="/stylesheets/style.css" />
-    <script src="/javascripts/jquery-3.6.0.min.js"></script>
-    <script src="/javascripts/jstree.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/vega@5.20.2"></script>
-    <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.1.1"></script>
-    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.18.2"></script>
-  </head>
-  <body>
-    <div id="content">
-        <header>
-        ヘッダー部分
-        </header>
-        <div id="split-panel">
-            <div id="left-panel">
-                <div id="file_tree"></div>
-            </div>
-            <div id="right-panel">
-                <div id="chart"></div>
-                <!-- ここ描画 -->
-            </div>
-        </div>
-    </div>
-    <script src="/javascripts/readTree.js"></script>
-  </body>
-</html>
-```
-### ejsに描画させるコード
-```js
-$('#file_tree').on("changed.jstree", function (e, data) {
-    var myReg = new RegExp('.+\.\w{3}$');
-    if (myReg.test(data.selected[0])) {
-        // データがあるURL
-        var url = "BASE_URL" + data.node['parent'] + '/' + data.selected[0];
-        console.log(url);
-        $.ajax({
-            async:true,
-            url:"http://localhost:3000/graph",
-            type: 'POST',
-            data:{'url':url},
-            contentType: 'application/x-www-form-urlencoded; charset=UTF-8'
-        }).done((data) => {
-        console.log('成功');
-        // 作成したデータセット
-        var vlSpec = data;
-        // 描画させる
-        vegaEmbed('#chart', vlSpec);
-    }).fail(() => {
-        console.log('失敗');
-    });
-    } else {
-        console.log("Folder")
-    }
 });
 ```

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

2021/09/23 23:32

投稿

putaro

スコア9

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -187,3 +187,141 @@
 ```
 色々と調べてはみたのですが、はっきりとは意味がわからなかったです。
+### 追記
+ejsのソースコード
+```ejs
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title><%= title%></title>
+    <link rel="stylesheet" href="/stylesheets/style.min.css" />
+    <link rel="stylesheet" href="/stylesheets/style.css" />
+    <script src="/javascripts/jquery-3.6.0.min.js"></script>
+    <script src="/javascripts/jstree.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vega@5.20.2"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.1.1"></script>
+    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.18.2"></script>
+  </head>
+  <body>
+    <div id="content">
+        <header>
+        ヘッダー部分
+        </header>
+        <div id="split-panel">
+            <div id="left-panel">
+                <div id="file_tree"></div>
+            </div>
+            <div id="right-panel">
+                <div id="chart"></div>
+                <!-- ここ描画 -->
+            </div>
+        </div>
+    </div>
+    <script src="/javascripts/readTree.js"></script>
+  </body>
+</html>
+```
+### ejsに描画させるコード
+```js
+$('#file_tree').on("changed.jstree", function (e, data) {
+    var myReg = new RegExp('.+\.\w{3}$');
+    if (myReg.test(data.selected[0])) {
+        // データがあるURL
+        var url = "BASE_URL" + data.node['parent'] + '/' + data.selected[0];
+        console.log(url);
+        $.ajax({
+            async:true,
+            url:"http://localhost:3000/graph",
+            type: 'POST',
+            data:{'url':url},
+            contentType: 'application/x-www-form-urlencoded; charset=UTF-8'
+        }).done((data) => {
+        console.log('成功');
+        // 作成したデータセット
+        var vlSpec = data;
+        // 描画させる
+        vegaEmbed('#chart', vlSpec);
+    }).fail(() => {
+        console.log('失敗');
+    });
+    } else {
+        console.log("Folder")
+    }
+});
+```