Vega-Liteでグラフが表示されない

前提・実現したいこと

加速度センサーから取得した値を、Vega-Liteを使って可視化させようとしたのですが、ブラウザには描画されず、Vega Editorを使って直接、値を入力してグラフの作成も試みたのですが、やはりダメでした。

使用環境

macOS ver 11.6
node.js ver v16.8.0
express ver 4.16.1
https://cdn.jsdelivr.net/npm/vega@5.20.2
https://cdn.jsdelivr.net/npm/vega-lite@5.1.1
https://cdn.jsdelivr.net/npm/vega-embed@6.18.2

作成したデータセット

データ数は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"}
 }
 ,"mark":"line",
 "encoding":{
   "x":{"field":"time","type":"quantitative"}
 ,"y":{"field":"x","type":"quantitative"}
 }
 ,"title":"Time Series Chart"}

Vega Editorの描画結果

データセットを作成するコード

js
1router.post('/graph', /*async*/ function(req, res, next) {
2    var url = req.body;
3    //console.log(url);
4    //　vega-lite用のデータを作成する
5    async function makeVispec() {
6        var vispec = {"$schema": "https://vega.github.io/schema/vega-lite/v5.json"};
7        // 加速度センサーのデータを取得
8        var values = await valuesObj(url.url);
9        JSON.stringify(values);
10        console.log(values);
11        var mark = "line";
12        var encoding = {
13            "x" : {"field": "Time_Seriesl", "type" :"temporal"},
14            "y" : {"field":"x" , "type": "quantitative"}
15        };
16        var title = "Time Series Chart";
17        // サンプル数+周波数
18        var N = values.values.length;
19        var fs = 60;
20        // x軸のためのシーケンスを作成
21        var sequence = {"start":0,"stop":N/fs,"step":1/60,"as":"Time_Series"};
22        
23        vispec.data = values;
24        vispec.mark = mark;
25        vispec.encoding = encoding;
26        vispec.title = title;
27        data.sequence = sequence;
28        
29        //console.log(vispec);
30        res.json(vispec);
31    }
32    makeVispec();
33}); 
34
35module.exports = router;

色々と調べてはみたのですが、はっきりとは意味がわからなかったです。

追記

ejsのソースコード

ejs
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="UTF-8">
5    <title><%= title%></title>
6    <link rel="stylesheet" href="/stylesheets/style.min.css" />
7    <link rel="stylesheet" href="/stylesheets/style.css" />
8    <script src="/javascripts/jquery-3.6.0.min.js"></script>
9    <script src="/javascripts/jstree.min.js"></script>
10    
11    <script src="https://cdn.jsdelivr.net/npm/vega@5.20.2"></script>
12    <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.1.1"></script>
13    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.18.2"></script>
14    
15  </head>
16  <body>
17    <div id="content">
18        <header>
19        ヘッダー部分
20        </header>
21        <div id="split-panel">
22            <div id="left-panel">
23                <div id="file_tree"></div>
24            </div>
25            <div id="right-panel">
26                <div id="chart"></div>
27                <!-- ここ描画 -->
28                
29            </div>
30        </div>
31
32    </div>
33    <script src="/javascripts/readTree.js"></script>
34  </body>
35</html>

ejsに描画させるコード

js
1$('#file_tree').on("changed.jstree", function (e, data) {
2    var myReg = new RegExp('.+\.\w{3}$');
3    if (myReg.test(data.selected[0])) {
4        // データがあるURL
5        var url = "BASE_URL" + data.node['parent'] + '/' + data.selected[0];
6        console.log(url);
7        $.ajax({
8            async:true,
9            url:"http://localhost:3000/graph",
10            type: 'POST',
11            data:{'url':url},
12            contentType: 'application/x-www-form-urlencoded; charset=UTF-8'
13        }).done((data) => {
14        console.log('成功');
15        // 作成したデータセット
16        var vlSpec = data;
17        // 描画させる　
18        vegaEmbed('#chart', vlSpec);
19    }).fail(() => {
20        console.log('失敗');
21    });
22        
23    } else {
24        console.log("Folder")
25    }
26});

行動規範の内容に同意します

回答1件

自己解決

解決しました

データセットに間違いがありました。データとシーケンスジェネレーターを一緒にしてはいけなかったみたいです。シーケンスデータは自分で作成し、valuesオブジェクトの中に格納しました。

{"$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.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"}
 }
 ,"mark":"line",
 "encoding":{
   "x":{"field":"time","type":"quantitative"}
 ,"y":{"field":"x","type":"quantitative"}
 }
 ,"title":"Time Series Chart"}

投稿2021/09/26 03:02

putaro

総合スコア9