<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width; initial-scale=1"> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vega@5.22.1"></script> <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.6.0"></script> <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.21.0"></script> <style> body { font-family: sans-serif; } .vega { width: min(90vw, 1000px); } th { text-align: left; } </style> </head> <body> {% for t in ts %} <table> {% for k, v in t.description.items() %} <tr> <th> {{ k }} </th> <td> {{ v }} </td> </tr> {% endfor %} <tr> <th> period </th> <td> {{ t.data[0][0] }} .. {{ t.data[-1][0] }} </td> </tr> </table> <div id="vis{{loop.index}}" class="vega"> </div> <script> { const d = { width: "container", data: { values: {{ t.data_json_by_row() | safe }} }, mark: "point", encoding: { x: { field: "utc", // type: "quantitative", type: "temporal", //scale: { domain: [{{t.data[0][0]}}, {{t.data[-1][0]}}] }, timeUnit: "yearmonthdatehoursminutes", }, y: { field: "v", type: "quantitative" }, }, } vegaEmbed("#vis{{loop.index}}", d) } </script> {% endfor %} </body> </html>