Template:Interactive COVID-19 maps/Per capita confirmed cases/mobilefriendly
Jump to navigation
Jump to search
Template documentation[create]
<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.
| Editors can experiment in this template's sandbox (create | mirror) and testcases (create) pages. Please add categories to the /doc subpage. Subpages of this template. |