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 subjects number and age</h1>
<h2>There are 51 subjects totally. This figure shows that the number of subjects in each age range. Besides, it also shows the mean of age for the whole subjects.
</h2>
<!-- 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",
"title":"Number of subjects vs Age",
"width": 300,
"height": 400,
"data": {"url": "https://raw.githubusercontent.com/wei2517/around-Yintung-community/master/ppgyearsevery.csv"},
"layer": [{
"mark": "bar",
"encoding": {
"x": {
"bin": true,
"field": "age",
"type": "quantitative"
},
"y": {
"title":"Number of subjects",
"aggregate": "count",
"type": "quantitative"
}
}
},{
"mark": "rule",
"encoding": {
"x": {
"aggregate": "mean",
"field": "age",
"type": "quantitative"
},
"color": {"value": "orange"},
"size": {"value": 3}
}
}]
};
// 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