Template:Interactive COVID-19 maps/Cumulative confirmed cases

<graph mode="interactive" title="Cumulative confirmed COVID-19 cases"> {

 "version": 2, "width": 500, "height": 260,
 "padding": 12,
 "background": "#edf1f7",
 "data": [
   {
     "name": "population",
     "url": "wikiraw:///Template:Interactive COVID-19 maps/data/UN 2019 Population by country-csv",
     "format": {
       "type": "csv"
     }
   },
   {
     "name": "highlights",
     "url": "wikiraw:///Template:Interactive COVID-19 maps/data/Confirmed covid cases-csv",
     "format": {
       "type": "csv",
       "parse": {
         "date": "date",
         "cases": "number"
       }
     },
     "transform": [{
         "type": "formula",
         "field": "v",
         "expr": "parseFloat(datum[+dateStamp])"
       }
     ]
   },
   {
     "name": "globalByDate",
     "url": "wikiraw:///Template:Interactive COVID-19 maps/data/global Confirmed covid cases by date-csv",
     "format": {
       "type": "csv",
       "parse": {
         "date": "date",
         "cases": "number"
       }
     }
   },
   {
     "name": "countries",
     "url": "wikiraw:///Template:Interactive COVID-19 maps/data/World map data",
     "format": {"type": "topojson","feature": "countries"},
     "transform": [
       {
         "type": "geopath",
         "value": "data",
         "scale": 80,
         "center": [-180,125],
         "translate": [0,0],
         "projection": "equirectangular"
       },
       {
         "type": "lookup",
         "on": "population",
         "keys": ["id"],
         "onKey": "ISO3",
         "as": ["pop"],
         "default": {"Country": "" }
       },
       {
         "type": "lookup",
         "on": "highlights",
         "keys": ["id"],
         "onKey": "id",
         "as": ["zipped"],
         "default": {"v": null, "Country":"No data"}
       }
     ]
   }
   ],

 "signals": [
   {
     "name": "isDragging",
     "init": false,
     "streams": [
       {"type": "@handle:mousedown","expr": "true"},
       {"type": "@scrollArea:mousedown","expr": "true"},
       {"type": "mouseup","expr": "false"},
       {"type": "#confirmed-covid-map:mouseout","expr":"false"},
       {"type": "@scrollArea:touchstart", "expr": "true"},
       {"type": "touchend", "expr": "false"}
     ]
   },
   {
     "name": "handlePosition",
     "init": 500,
     "streams": [
       {
         "type": "mousemove[isDragging]",
         "expr": "clamp(eventX(),0,width)"
       },
       {
         "type": "touchmove[isDragging]",
         "expr": "clamp(eventX(),0,width)"
       }
     ]
   },
   {
     "name": "scaledHandlePosition",
     "expr": "handlePosition",
     "scale": {"name": "dateScale","invert": true}
   },
   {
     "name": "currentDate",
     // WugBot! humandate
     "init": "May 31",
     "expr": "timeFormat('%B %d %Y',scaledHandlePosition)"
     /* %d = day (0-padded), %e = day (unpadded), %B = month name (English in all wikis), %m = month number, %Y = year. */
     /* Any order and characters between them is allowed. */
   },
   {
     "name": "dateStamp",
       // WugBot! computerdate
     "init": "05/31/22",
     "expr": "timeFormat('%m/%d/%y',scaledHandlePosition)"
   },
   {
     "name": "tooltipSignalPop",
     "init": {"expr": "{x: 0, y: 0, datum: {} }"}, 
     "streams": [
       {  
         "type": "@map:mouseover",    
         "expr": "{x: eventX(), y: eventY(), datum: eventItem().datum.pop}"
       },
       {  
         "type": "@map:mouseout",
         "expr": "{x: 0, y: 0, datum: {} }"
       }
     ] 
   },
   {
     "name": "tooltipSignalZipped",
     "init": {"expr": "{x: 0, y: 0, datum: {} }"}, 
     "streams": [
       {  
         "type": "@map:mouseover",    
         "expr": "{x: eventX(), y: eventY(), datum: eventItem().datum.zipped}"
       },
       {  
         "type": "@map:mouseout",
         "expr": "{x: 0, y: 0, datum: {} }"
       }
     ] 
   }
 ],

 "scales": [
   {
     "name": "dateScale",
     "type": "time",
     "domain": {
       "data": "globalByDate",
       "field":"date"
     },
     "range": "width"
   },
   {
     "name": "color",
     "type": "log",
     "domain": [
       1,
       10000000],
     "domainMin": 1,
     "zero": false,
     "range":  ["#FFEDBC", "#f83600"]
   }
 ],

 "marks": [
   {
     "name": "map",
     "type": "path",
     "from": {"data": "countries"},
     "properties": {
       "enter": {
         "path": {"field": "layout_path"}
       },
       "update": {
         "fill": [
           {
             "test": "datum.zipped.v !== null",
             "scale": "color",
             "field": "zipped.v"
           },
           {"value": "white"}
         ]
       },
     "hover": {"fill": {"value": "#989898"} }
     }
   },
   {
     "name": "scrollArea",
     "type": "rule",
     "properties": {
       "enter": {
         "x": {"value": 0},
         "y": {"value": 40},
         "x2": {"value": 500},
         "stroke": {"value": "#edf1f7"},
         "strokeWidth": {"value": 16}
       }
     }
   },
   {
     "name": "scrollLine",
     "type": "rule",
     "properties": {
       "enter": {
         "x": {"value": 0},
         "y": {"value": 40},
         "x2": {"value": 500},
         "stroke": {"value": "#000"},
         "strokeWidth": {"value": 2}
       }
     }
   },
   {
     "name": "handle",
     "type": "symbol",
     "properties": {
       "enter": {
         "x": {"value": 200},
         "y": {"value": 40},
         "size": {"value": 154},
         "stroke": {"value": "#880"},
         "strokeWidth": {"value": 2.5}
       },
       "update": {
         "fill": {"value": "#fff"},
         "x": {"signal": "handlePosition"}
       },
       "hover": {"fill": {"value": "#f00"} }
     }
   },
   {
     "name": "dateLabel",
     "type": "text",
     "properties": {
       "enter": {
         "x": {"value": 0},
         "y": {"value": 25},
         "fontSize": {"value": 32},
         "fontWeight": {"value": "bold"},
         "fill": {"value": "steelblue"}
       },
       "update": {"text": {"signal": "currentDate"} }
     }
   },
   {
     "name": "HoverText",
     "type": "text",
     "properties": {
       "enter": {
         "x": {"value": 500.8 },
         "y": {"value": 10},  
         "align": {"value": "right"},
         "fontSize": {"value": 17},
         "fill": {"value": "black"}
       },
       "update": {
         "text": [
           {
             "test": "tooltipSignalZipped.datum.v === null",
             "template": "\u007b{tooltipSignalPop.datum.Country}\u007d (No data)"
           },
           {
             "test": "tooltipSignalZipped.datum.v",
             "template": "\u007b{tooltipSignalPop.datum.Country}\u007d \u007b{tooltipSignalZipped.datum.v\u007cnumber:','}\u007d"
           },
           {
             "value": ""
           }
         ]
       }
     }
   }
 ],
 "legends": [
   {
     "fill": "color",
     "title": "Cases",
     "offset": -300,
     "properties": {
       "gradient": {
         "stroke": {"value": "transparent"}
       },
       "title": {
         "fontSize": {"value": 14}
       },
       "legend": {
         "x": {"value": 0},
         "y": {"value": 180 }
       }
     }
   }
 ]

} </graph>

Usage