Q&A前提・実現したいこと
加速度センサーから取得した値を、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件
0
自己解決
解決しました
データセットに間違いがありました。データとシーケンスジェネレーターを一緒にしてはいけなかったみたいです。シーケンスデータは自分で作成し、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
総合スコア9
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。