Covid 19 vega

vega.json

{
    "$schema": "https://vega.github.io/schema/vega/v5.json",
    "description": "An interactive world map supporting pan and zoom.",
    "width": {"signal": "width"},
    "height": {"signal": "height"},
    "autosize": "none",
    "padding": {
        "top": 25,
        "left": 0,
        "right": 0,
        "bottom": 0
    },
    "signals": [
        {
            "name": "width",
            "value": 100
        },
        {
            "name": "height",
            "value": 100
        },
        {
            "name": "last_date",
            "value": "2020-01-22"
        },
        {
            "name": "sld_date",
            "value": 48,
            "bind": {
                "name": "Days after 22.01",
                "input": "range",
                "max": 48,
                "min": 0,
                "step": 1
            }
        },
        {
            "name": "case_scale",
            "value": "population",
            "bind": {
                "input": "select",
                "options": [
                    "population",
                    "daily_change",
                    "none"
                ],
                "name": "Scaling by "
            }
        },
        {
            "name": "scl_exponent",
            "value": 1,
            "on": [
                {
                    "events": {
                        "signal": "case_scale"
                    },
                    "update": "case_scale == 'none' ? 0.1 : 1"
                }
            ]
        },
        {
            "name": "scl_domain",
            "value": [
                0,
                20
            ],
            "on": [
                {
                    "events": [{
                        "signal": "case_scale"
                    },{
                        "signal": "type"
                    }],
                    "update": "case_scale == 'daily_change' ? [0.8, 2.5] : (type == 'deaths' ? (case_scale == 'population' ? [0,1] : [1, 10000]) : (case_scale == 'population' ? [0,20] : [1, 100000]))"
                }
            ]
        },
        {
            "name": "scale_title",
            "value": "Cases per 100,000 people",
            "on": [
                {
                    "events": {
                        "signal": "case_scale"
                    },
                    "update": "case_scale == 'population' ? ['Cases per','100,000 people'] : (case_scale == 'daily_change' ? ['X increase from','prev day'] : 'Number of cases')"
                }
            ]
        },
        {
            "name": "type",
            "value": "active",
            "bind": {
                "input": "select",
                "options": [
                    "active",
                    "confirmed",
                    "deaths",
                    "recovered"
                ],
                "name": "Cases   "
            }
        },
        {
            "name": "scheme",
            "value": "inferno",
            "bind": {
                "input": "select",
                "options": [
                    "inferno",
                    "reds",
                    "viridis"
                ],
                "name": "Colorscheme "
            }
        },
        {
            "name": "reverse_scheme",
            "value": true,
            "on": [
                {
                    "events": {
                        "signal": "scheme"
                    },
                    "update": "scheme == 'inferno' || scheme == 'viridis' ? true : false"
                }
            ]
        },
        {
            "name": "tx",
            "update": "width / 2"
        },
        {
            "name": "ty",
            "update": "height / 2"
        },
        {
            "name": "scale",
            "value": 150,
            "on": [
                {
                    "events": {
                        "type": "wheel",
                        "consume": true
                    },
                    "update": "clamp(scale * pow(1.0005, -event.deltaY * pow(16, event.deltaMode)), 150, 3000)"
                },
                {
                    "events": {
                        "type": "touchstart", 
                        "filter": "event.touches.length===2",
                        "consume": true
                    },
                    "update": "clamp(scale * pow(1.0005, -event.deltaY * pow(16, event.deltaMode)), 150, 3000)"
                }
            ]
        },
        {
            "name": "angles",
            "value": [
                0,
                0
            ],
            "on": [
                {
                    "events": "mousedown",
                    "update": "[rotateX, centerY]"
                }
            ]
        },
        {
            "name": "cloned",
            "value": null,
            "on": [
                {
                    "events": "mousedown",
                    "update": "copy('projection')"
                }
            ]
        },
        {
            "name": "start",
            "value": null,
            "on": [
                {
                    "events": "mousedown",
                    "update": "invert(cloned, xy())"
                }
            ]
        },
        {
            "name": "drag",
            "value": null,
            "on": [
                {
                    "events": "[mousedown, window:mouseup] > window:mousemove",
                    "update": "invert(cloned, xy())"
                }
            ]
        },
        {
            "name": "delta",
            "value": null,
            "on": [
                {
                    "events": {
                        "signal": "drag"
                    },
                    "update": "[drag[0] - start[0], start[1] - drag[1]]"
                }
            ]
        },
        {
            "name": "rotateX",
            "value": 0,
            "on": [
                {
                    "events": {
                        "signal": "delta"
                    },
                    "update": "angles[0] + delta[0]"
                }
            ]
        },
        {
            "name": "centerY",
            "value": 0,
            "on": [
                {
                    "events": {
                        "signal": "delta"
                    },
                    "update": "clamp(angles[1] + delta[1], -60, 60)"
                }
            ]
        }
    ],
    "scales": [
        {
            "name": "scl_cases",
            "type": "pow",
            "exponent": {
                "signal": "scl_exponent"
            },
            "domain": {
                "signal": "scl_domain"
            },
            "scheme": {"signal": "scheme"},
            "reverse": {"signal": "reverse_scheme"},
            "clamp": true
        }
    ],
    "projections": [
        {
            "name": "projection",
            "type": "mercator",
            "scale": {
                "signal": "scale"
            },
            "rotate": [
                {
                    "signal": "rotateX"
                },
                0,
                0
            ],
            "center": [
                0,
                {
                    "signal": "centerY"
                }
            ],
            "translate": [
                {
                    "signal": "tx"
                },
                {
                    "signal": "ty"
                }
            ]
        }
    ],
    "data": [
        {
            "name": "world",
            "url": "./data/provinces-and-countries.geojson",
            "format": {
               "property":"features"
            }
        },
        {
            "name": "graticule",
            "transform": [
                {
                    "type": "graticule",
                    "step": [
                        15,
                        15
                    ]
                }
            ]
        },
        {
            "name": "cases",
            "url": "./data/summarized.csv",
            "format": {
                "type": "csv",
                "parse": "auto",
                "delimiter": ","
            },
            "transform": [
                {
                    "type": "lookup",
                    "from": "world",
                    "key": "properties.name",
                    "fields": [
                        "Country"
                    ],
                    "as": [
                        "country_outline"
                    ]
                },
                {
                    "type": "filter",
                    "expr": "datum[last_date+'_confirmed_scl_none'] > 0"
                }
            ]
        },
        {
            "name": "world_empty",
            "url": "./data/summarized.csv",
            "format": {
                "type": "csv",
                "parse": "auto",
                "delimiter": ","
            },
            "transform": [
                {
                    "type": "lookup",
                    "from": "world",
                    "key": "properties.name",
                    "fields": [
                        "Country"
                    ],
                    "as": [
                        "country_outline"
                    ]
                },
                {
                    "type": "filter",
                    "expr": "datum[last_date+'_confirmed_scl_none'] == 0.0"
                }
            ]
        },
        {
            "name": "dates",
            "url": "./data/dates.csv",
            "format": {
                "type": "csv",
                "format": {
                    "parse": {
                        "date": "'%Y %m %d'"
                    },
                    "delimiter": ","
                }
            }
        }
    ],
    "marks": [
        {
            "type": "shape",
            "from": {
                "data": "graticule"
            },
            "encode": {
                "enter": {
                    "strokeWidth": {
                        "value": 1
                    },
                    "stroke": {
                        "value": "#ddd"
                    },
                    "fill": {
                        "value": null
                    }
                }
            },
            "transform": [
                {
                    "type": "geoshape",
                    "projection": "projection"
                }
            ]
        },
        {
            "type": "shape",
            "from": {
                "data": "world_empty"
            },
            "encode": {
                "enter": {
                    "strokeWidth": {
                        "value": 0.5
                    },
                    "stroke": {
                        "value": "#bbb"
                    },
                    "fill": {
                        "value": "#aaa"
                    }
                }
            },
           "transform": [
                {
                    "type": "geoshape",
                    "field": "datum.country_outline",
                    "projection": "projection"
                }
            ]
        },
        {
            "type": "shape",
            "from": {
                "data": "cases"
            },
            "encode": {
                "enter": {
                    "strokeWidth": {
                        "value": 0.5
                    },
                    "stroke": {
                        "value": "#bbb"
                    },
                    "fill": {
                        "field": "0",
                        "type": "quantitative",
                        "scale": "scl_cases"
                    },
                    "tooltip": {"signal": "datum.Country"}
                },
                "update": {
                    "fill": {
                        "field": {
                            "signal": "data('dates')[0][sld_date]+'_'+type+'_scl_'+case_scale"
                        },
                        "type": "quantitative",
                        "scale": "scl_cases"
                    }
                }                
            },
            "transform": [
                {
                    "type": "geoshape",
                    "field": "datum.country_outline",
                    "projection": "projection"
                }
            ]
        },
        {
            "type": "text",
            "interactive": false,
            "encode": {
                "enter": {
                    "y": {
                        "value": 0
                    },
                    "fill": {
                        "value": "black"
                    },
                    "fontSize": {
                        "value": 20
                    },
                    "align": {
                        "value": "right"
                    }
                },
                "update": {
                    "x": {
                        "signal": "width",
                        "offset": -5
                    },
                    "text": {
                        "signal": "data('dates')[0][sld_date]"
                    }
                }
            }
        }
    ],
    "legends": [
        {
            "orient": "bottom-left",
            "fill": "scl_cases",
            "title": {
                "signal": "scale_title"
            }
        }
    ]
}