examples/bubble.html

<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Tangerine">
</head>

<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
<script src="https://cdn.jsdelivr.net/npm/geoviz@0.5.0" charset="utf-8"></script>

<script>

let geojson =   "./world.json"
d3.json(geojson).then(data => {
let svg = geoviz.create({projection: d3.geoEqualEarth()})
svg.outline()
svg.graticule({stroke: "white", strokeWidth: 0.4})
svg.path({datum: data, fill: "white", fillOpacity:0.4})
svg.circle({data: data, r: "pop", fill: "#f07d75", tip:d => `${d.properties.NAMEen}
${d.properties.pop / 1000} thousands inh.`})
svg.legend.circles_nested({pos:[50, 250], data: data.features.map(d => d.properties.pop), title: "Word Population" })
svg.header({fontSize: 30, text: "A World Map With Bubbles", fill: "#267A8A", fontWeight: "bold", fontFamily: "Tangerine"})
document.body.appendChild(svg.render())
})

</script>