index.html
<!DOCTYPE html>
<html>
<head>
<title>Vega-Lite Age Pyramid</title>
<script src="https://cdn.jsdelivr.net/npm/vega@5.17.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@4.17.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6.12.2"></script>
</head>
<body>
<div id="vis"></div>
<script type="text/javascript">
var yourVlSpec = {
"$schema": "https://vega.github.io/schema/vega-lite/v4.json",
"description": "A population pyramid for the US in 2000, created using stack. See https://vega.github.io/vega-lite/examples/concat_population_pyramid.html for a variant of this created using concat.",
"data": { "url": "population.json"},
"transform": [
{"filter": "datum.year == 2000"},
{"calculate": "datum.sex == 2 ? 'Female' : 'Male'", "as": "gender"},
{"calculate": "datum.sex == 2 ? -datum.people : datum.people", "as": "signed_people"}
],
"width": 300,
"height": 200,
"mark": "bar",
"encoding": {
"y": {
"field": "age",
"axis": null, "sort": "descending"
},
"x": {
"aggregate": "sum", "field": "signed_people",
"title": "population",
"axis": {"format": "s"}
},
"color": {
"field": "gender",
"scale": {"range": ["#675193", "#ca8861"]},
"legend": {"orient": "top", "title": null}
}
},
"config": {
"view": {"stroke": null},
"axis": {"grid": false}
}
};
vegaEmbed('#vis', yourVlSpec);
</script>
</body>
</html>