Template:Interactive COVID-19 maps/Cumulative confirmed cases

From blackwiki
< Template:Interactive COVID-19 maps
Revision as of 21:55, 20 March 2020 by imported>Wugapodes (fix offscreen drag issue)
Jump to navigation Jump to search

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

 "version": 2, "width": 500, "height": 260,
 "padding": 12,
 "background": "#edf1f7",
 "data": [
   {
     "name": "highlights",
     "url": "wikiraw:///Template:Interactive COVID-19 maps/Cumulative confirmed cases/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/Cumulative confirmed cases/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": "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": "mouseup","expr": "false"},
       {"type": "#covid-map:mouseout","expr":"false"}
     ]
   },
   {
     "name": "handlePosition",
     "init": 0,
     "streams": [
       {
         "type": "mousemove[isDragging]",
         "expr": "clamp(eventX(),0,width)"
       }
     ]
   },
   {
     "name": "scaledHandlePosition",
     "expr": "handlePosition",
     "scale": {"name": "dateScale","invert": true}
   },
   {
     "name": "currentDate",
     "init": "Jan 22",
     "expr": "slice(scaledHandlePosition,4,10)"
   },
   {
   	"name": "dateStamp",
   	"init": "01/22/20",
   	"expr": "timeFormat('%m/%d/%y',scaledHandlePosition)"
   },
   {
     "name": "tooltipSignal",
     "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": [0,100000],
     "domainMin": 1,
     "zero": false,
     "range":  ["#FFEDBC", "#f83600"]
   }
 ],
 "marks": [
   {
     "name": "scrollLine",
     "type": "rule",
     "properties": {
       "enter": {
         "x": {"value": 0},
         "y": {"value": 40},
         "x2": {"value": 500},
         "stroke": {"value": "#000"},
         "strokeWidth": {"value": 2}
       }
     }
   },
   {
     "name": "handle",
     "type": "path",
     "properties": {
       "enter": {
         "x": {"value": 200},
         "y": {"value": 40},
         "path": {"value": "m-5.5,-10l0,20l11.5,-10l-11.5,-10z"},
         "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": "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"}}
     }
   },
   {
     "type": "text",
     "properties": {
       "enter": {
         "x": {"value": 500},
         "y": {"value": 10},  
         "align": {"value": "right"},
         "fontSize": {"value": 17},
         "fill": {"value": "black"}
       },
       "update": {
         "text": {"template": "\u007b{tooltipSignal.datum.Country}\u007d \u007b{tooltipSignal.datum.v}\u007d"}
       }
     }
   }
 ],
 "legends": [
   {
     "fill": "color",
     "title": "Cases",
     "offset": -300,
     "properties": {
       "gradient": {
         "stroke": {"value": "transparent"}
       },
       "title": {
         "fontSize": {"value": 14}
       },
       "legend": {
         "x": {"value": 0},
         "y": {"value": 180}
       }
     }
   }
 ]

} </graph>