joyplot.html

<div id="map" style="height: 500px; width: 800px"></div>

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

    //define map with initial view
    const map = new gridviz.Map(document.getElementById('map'), { x: 4000000, y: 2960000, z: 1000, backgroundColor: "black" })
        .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.JoyPlotStyle({
        height: (c) => Math.sqrt(c.population) * 50,
        lineColor: () => 'white',
        lineWidth: (y, ys, r, z) => z < 2000 ? 2 * z : 1 * z,
        fillColor: () => 'black',
    })

    //add layer to map
    map.layers = [new gridviz.GridLayer(dataset, [style])]

</script>