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>The correlation between the vascular age predicted from PPG signal and the real age</h1>
<h3>In Taiwan area, due to the economic development and dietary habits change, people usually gains weight without enough exercise. In addition, the ratio for smoking population is getting higher. All of these factors will increase the risk of people suffering from cardiovascular diseases(CVD).
<h3> These two figures show that the relationship between real age and vascular age. According to literature, if the vascular age is larger than the real age,the risk that you suffer from CVD is higher than others.
</h3>
<!-- 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/differenceagename.csv"
},
"vconcat": [
{
"title":"Real age(column) vs Vascular age(red line)",
"width": 300,
"height": 200,
"layer": [
{
"mark": {
"type": "bar",
"point": true
},
"encoding": {
"x": {
"field": "Subjects",
"type": "nominal"
},
"y": {
"field": "Real age",
"type": "quantitative"
},
"color": {"value": "lightblue"}
}
},
{
"mark": {
"type": "line",
"point": true
},
"encoding": {
"x": {
"field": "Subjects",
"type": "nominal"
},
"y": {
"field": "Vascular age",
"type": "quantitative"
},
"color": {"value": "red"}
}
}
]
},
{
"layer": [
{ "title":"Real age(green line) vs Vascular age(red line)",
"mark": {
"type": "line",
"point": true
},
"encoding": {
"x": {
"field": "Subjects",
"type": "nominal"
},
"y": {
"field": "Real age",
"type": "quantitative"
},
"color": {"value": "green"}
}
},
{
"mark": {
"type": "line",
"point": true
},
"encoding": {
"x": {
"field": "Subjects",
"type": "nominal"
},
"y": {
"field": "Vascular age",
"type": "quantitative"
},
"color": {"value": "red"}
}
}
]
}
]
};
// 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