<div id="map" style="height: 100%; width: 100%"></div>

<script src="../../dist/gridviz.js"></script>

<script src="https://cdn.jsdelivr.net/npm/d3-color@3"></script>

<script src="https://cdn.jsdelivr.net/npm/d3-interpolate@3"></script>

<script src="https://cdn.jsdelivr.net/npm/d3-scale-chromatic@3"></script>

<script src="https://cdn.jsdelivr.net/npm/d3-format@3"></script>

<script>

//define map with initial view

const map = new gridviz.Map(document.getElementById('map'), {

x: 4500000,

y: 2900000,

z: 1000,

}).addZoomButtons()

//define dataset

const dataset = new gridviz.CSVGrid(

map,

'https://raw.githubusercontent.com/eurostat/gridviz/master/assets/csv/Europe/pop_2018_10km.csv',

10000

)

//define style

const style = new gridviz.ShapeColorSizeStyle({

size: (cell) => 20 * Math.sqrt(cell.population),

color: () => 'black',

shape: () => 'circle',

})

//define legends

style.legends = gridviz.sizeLegend([500000, 200000, 10000], (v) => 20 * Math.sqrt(v), {

title: 'Population',

labelFormat: d3.format(',.2r'),

fillColor: 'black',

})

//add layer to map

map.layers = [new gridviz.GridLayer(dataset, [style])]

</script>