kernelsmoothing_small.html

<div>
    <input type="range" min="0.001" max="30" value="10" class="slider" id="sigma" style="width: 400px" />
</div>
<div id="map" style="height: 500px; width: 800px"></div>

<script src="https://cdn.jsdelivr.net/npm/gridviz@3.0.0"></script>
<script src="../dist/gridviz-smoothing.js"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-array@3"></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>

    //define map with initial view
    const map = new gridviz.Map(document.getElementById('map'), { x: 0, y: 0, z: 0.02 })

    //define dataset
    const dataset = new gridviz.CSVGrid(map, "https://raw.githubusercontent.com/jgaffuri/tiledgrids/master/data/test/single.csv", 1)
    //"https://raw.githubusercontent.com/jgaffuri/tiledgrids/master/data/test/small.csv",

    //define style
    const style =
        new gridviz_smoothing.KernelSmoothingStyle({
            value: (cell) => +cell.value,
            sigma: (resolution) => (resolution * 10) / 10,
            factor: 30,
            filterSmoothed: (value) => value > 0.0005,
            styles:
                [
                    new gridviz.ShapeColorSizeStyle({
                        color: (cell, resolution, z, max) => d3.interpolateSpectral(1 - cell.ksmval / max),
                        viewScale: (cells) => d3.max(cells, cell => cell.ksmval)
                    }),
                    new gridviz.TextStyle({
                        text: (cell) => Math.floor(1000 * cell.ksmval) / 1000,
                        color: () => 'black',
                        fontSize: (cell, r) => r * 0.3,
                    }),
                ],
        })


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

    //sigma selection
    document.getElementById('sigma').oninput = function () {
        //set sigma
        map.layers[0].styles[0].sigma = (r, zf) => (r * +this.value) / 10
        //redraw
        map.redraw()
    }

</script>