Difference between revisions of "Template:Interactive COVID-19 maps/Cumulative confirmed cases"

From blackwiki
Jump to navigation Jump to search
imported>Wugapodes
(fix offscreen drag issue)
imported>Wugapodes
(use template)
Line 1: Line 1:
<div id="covid-map">
+
{{Interactive COVID-19 maps/common
<graph mode=interactive title="Global confirmed COVID-19 cases">
+
|id=confirmed-covid-map
{
+
|data-coloring=Template:Interactive COVID-19 maps/Cumulative confirmed cases/Confirmed covid cases-csv
  "version": 2, "width": 500, "height": 260,
+
|data-dates=Template:Interactive COVID-19 maps/Cumulative confirmed cases/global Confirmed covid cases by date-csv
  "padding": 12,
+
|domain-min=0
  "background": "#edf1f7",
+
|domain-max=100000
  "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>
 
</div>
 

Revision as of 22:46, 20 March 2020

<graph mode="interactive" title="Interactive COVID-19 Map"> {

 "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/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": "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: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": "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,
       INF],
     "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)"
           },
           {"template": "\u007b{tooltipSignalPop.datum.Country}\u007d \u007b{tooltipSignalZipped.datum.v}\u007d"}
         ]
       }
     }
   }
 ],
 "legends": [
   {
     "fill": "color",
     "title": "",
     "offset": -300,
     "properties": {
       "gradient": {
         "stroke": {"value": "transparent"}
       },
       "title": {
         "fontSize": {"value": 14}
       },
       "legend": {
         "x": {"value": 0},
         "y": {"value": 180 }
       }
     }
   }
 ]

} </graph>