Template:Interactive COVID-19 maps/Per capita confirmed cases/mobilefriendly

From blackwiki
< Template:Interactive COVID-19 maps‎ | Per capita confirmed cases
Revision as of 01:11, 10 November 2020 by imported>*Treker
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to navigation Jump to search

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

 "version": 2, "width": 800, "height": 800,
 "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": "lookup",
         "on": "population",
         "keys": ["id"],
         "onKey": "ISO3",
         "as": ["pop"],
         "default": {"Population": 0}
       },
       {
         "type": "formula",
         "field": "v",
         "expr": "round((parseFloat(datum[+dateStamp])/datum.pop.Population)*100)/100"
       }
     ]
   },
   {
     "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": "mouseup","expr": "false"},
       {"type": "#confirmed-covid-map-per-capita:mouseout","expr":"false"},
       {"type": "@scrollArea:touchstart", "expr": "true"},
       {"type": "touchend", "expr": "false"}
     ]
   },
   {
     "name": "handlePosition",
     "init": 800,
     "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": "Feb 23",
     "expr": "timeFormat('%b %d',scaledHandlePosition)"
     /* %d = day, %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": "02/23/21",
     "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,
       1000],
     "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": 800},
         "stroke": {"value": "#edf1f7"},
         "strokeWidth": {"value": 16}
       }
     }
   },
   {
     "name": "scrollLine",
     "type": "rule",
     "properties": {
       "enter": {
         "x": {"value": 0},
         "y": {"value": 40},
         "x2": {"value": 800},
         "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": 800 },
         "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)"
           },
           {"template": "\u007b{tooltipSignalPop.datum.Country}\u007d \u007b{tooltipSignalZipped.datum.v}\u007d"}
         ]
       }
     }
   }
 ],
 "legends": [
   {
     "fill": "color",
     "title": "Cases per million",
     "offset": -300,
     "properties": {
       "gradient": {
         "stroke": {"value": "transparent"}
       },
       "title": {
         "fontSize": {"value": 14}
       },
       "legend": {
         "x": {"value": 0},
         "y": {"value": 180 }
       }
     }
   }
 ]

} </graph>

Interactive map of confirmed COVID-19 cases per capita. Click the play button in the top left to interact with the map. On mobile devices you will need to use landscape mode and drag the slider at the top of the infographic.
Template documentation[create]