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>West Central Dist., Tainan City</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",
"width": 700,
"height": 500,
"layer": [
{
"data": {
"url": "https://raw.githubusercontent.com/jason2506/Taiwan.TopoJSON/master/topojson/villages/villages-67000370.json",
"format": {
"type": "topojson",
"feature": "map"
}
},
"mark": {
"type": "geoshape",
"fill": "lightgray",
"stroke": "white",
"strokeWidth": 1
}
}
]
};
// 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