Built with blockbuilder.org
xxxxxxxxxx
<head>
<title>Vega Lite Bar Chart</title>
<meta charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/vega@4.0.0-rc.2/build/vega.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@2.5.0/build/vega-lite.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@3.14.0/build/vega-embed.js"></script>
<style media="screen">
/* Add space between Vega-Embed links */
.vega-actions a {
margin-right: 5px;
}
</style>
</head>
<body>
<h1>PPG signal</h1>
<!-- Container for the visualization -->
<div id="vis"></div>
<script>
// Assign the specification to a local variable vlSpec.
var vlSpec = {
"$schema": "https://vega.github.io/schema/vega-lite/v2.json",
"data": {
"url": "https://raw.githubusercontent.com/wei2517/around-Yintung-community/master/ppgtest_vega2222.csv"
},
"vconcat": [
{
"title":"PPG signal(sampling f=100HZ) for three subjects",
"width": 500,
"height": 250,
"mark": "line",
"encoding": {
"x": {"field": "Time", "type": "quantitative"},
"y": {"field": "Voltage", "type": "quantitative"},
"color": {"field": "Name", "type": "nominal"}
}
},
{
"width": 500,
"height": 100,
"mark": "line",
"encoding": {
"x": {
"field": "Time",
"type": "quantitative"
},
"y": {
"field": "Voltage",
"type": "quantitative"
},
"color": {
"field": "Name",
"type": "nominal",
"legend": null
},
"row": {
"title":null,
"field": "Name",
"type": "nominal"
}
}
}
]
};
// Embed the visualization in the container with id `vis`
vegaEmbed("#vis", vlSpec);
</script>
</body>
</html>
https://cdn.jsdelivr.net/npm/vega@4.0.0-rc.2/build/vega.js
https://cdn.jsdelivr.net/npm/vega-lite@2.5.0/build/vega-lite.js
https://cdn.jsdelivr.net/npm/vega-embed@3.14.0/build/vega-embed.js