Liberia Land Cover Composition Widget

lbr_landcover.json

{
    "$schema": "https://vega.github.io/schema/vega/v4.0.json",
    "width": 240,
    "height": 240,
    "padding": 2,
    "title": {
        "text": "Land Cover Composition",
        "font": "Fira Sans",
        "fontSize": 16,
        "offset": 20,
        "anchor": "middle"
    },
    "data": [
        {
            "name": "histogram",
            "format": {
                "property": "histograms[0].counts"
            },
            "url": "https://production-api.globalforestwatch.org/v1/arcgis-proxy/ImageServer/computeHistograms?server=gfw&service=image_services/analysis&pixelSize=100&renderingRule={\"rasterFunction\":\"Identity\",\"rasterFunctionArguments\":{\"Raster\":\"$567\"},\"outputPixelType\":\"U8\" }&geostore=5e044c11ec1580a92b1a1d16b1a30233",
            "transform": [
                {
                    "type": "identifier",
                    "as": "id"
                }
            ]
        },
        {
            "name": "table",
            "values": [
                {
                    "id": "1",
                    "label": "No Data",
                    "hex": "#000"
                },
                {
                    "id": "2",
                    "label": "Forest > 80%",
                    "hex": "#006100"
                },
                {
                    "id": "3",
                    "label": "Forest 30 - 80%",
                    "hex": "#458A40"
                },
                {
                    "id": "4",
                    "label": "Forest < 30%",
                    "hex": "#8FCC51"
                },
                {
                    "id": "5",
                    "label": "Mangrove Swamps",
                    "hex": "#8F73E8"
                },
                {
                    "id": "6",
                    "label": "Settlements",
                    "hex": "#FF5454"
                },
                {
                    "id": "7",
                    "label": "Surface Water Bodies",
                    "hex": "#82BDF8"
                },
                {
                    "id": "8",
                    "label": "Grassland",
                    "hex": "#FAF887"
                },
                {
                    "id": "9",
                    "label": "Shrub",
                    "hex": "#FFC533"
                },
                {
                    "id": "10",
                    "label": "Bare Soil",
                    "hex": "#DEC7AB"
                },
                {
                    "id": "11",
                    "label": "Ecosystem Complex (rock/ sand)",
                    "hex": "#A6A6A6"
                },
                {
                    "id": "12",
                    "label": "Clouds",
                    "hex": "#4C4C4C"
                }
            ],
            "transform": [
                {
                    "type": "lookup",
                    "from": "histogram",
                    "key": "id",
                    "fields": [
                        "id"
                    ],
                    "values": [
                        "data"
                    ],
                    "as": [
                        "value"
                    ]
                },
                {
                    "type": "filter",
                    "expr": "datum.value > 0"
                },
                {
                    "type": "pie",
                    "field": "value"
                }
            ]
        }
    ],
    "scales": [
        {
            "name": "y",
            "type": "band",
            "range": "height",
            "padding": 0.15,
            "domain": {
                "data": "table",
                "field": "group"
            }
        },
        {
            "name": "x",
            "type": "linear",
            "range": "width",
            "nice": true,
            "zero": true,
            "domain": {
                "data": "table",
                "field": "y1"
            }
        },
        {
            "name": "color",
            "type": "ordinal",
            "domain": {
                "data": "table",
                "field": "label"
            },
            "range": {
                "data": "table",
                "field": "hex"
            }
        },
        {
            "name": "colorStroke",
            "type": "ordinal",
            "domain": {
                "data": "table",
                "field": "label"
            },
            "range": [
                "#FFF"
            ]
        }
    ],
    "marks": [
        {
            "type": "arc",
            "from": {
                "data": "table"
            },
            "encode": {
                "enter": {
                    "fill": {
                        "scale": "color",
                        "field": "label"
                    },
                    "tooltip": {
                        "signal": "datum.label + ': ' + format(datum.value, ',') + ' ha'"
                    },
                    "x": {
                        "signal": "width / 2"
                    },
                    "y": {
                        "signal": "height / 2"
                    },
                    "startAngle": {
                        "field": "startAngle"
                    },
                    "endAngle": {
                        "field": "endAngle"
                    },
                    "padAngle": {
                        "value": 0
                    },
                    "innerRadius": {
                        "value": 0
                    },
                    "outerRadius": {
                        "signal": "width / 2"
                    },
                    "cornerRadius": {
                        "value": 0
                    },
                    "sort": true
                }
            }
        }
    ],
    "legends": [
        {
            "fill": "color",
            "orient": "bottom",
            "direction": "horizontal",
            "titleFontSize": 14,
            "labelFontSize": 12,
            "font": "Fira Sans",
            "titleLimit": 240,
            "columns": 2,
            "rowPadding": 2,
            "columnPadding": 10
        }
    ]
}