Template:Interactive COVID-19 maps/common

{{#tag:Graph|

{

"version": 2, "width": {{#expr:{{{scale|.8}}}*{{{width|625}}}}}, "height": {{#expr:{{{scale|.8}}}*{{{height|325}}}}},

"padding": {{{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:///{{{data-coloring}}}",

"format": {

"type": "csv",

"parse": {

"date": "date",

"cases": "number"

}

},

"transform": [{{#if:{{{per-capita|}}}|

{

"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)*{{#expr:1e{{{round-to|2}}} }})/{{#expr:1e{{{round-to|2}}} }}"

}

]|

{

"type": "formula",

"field": "v",

"expr": "parseFloat(datum[''+dateStamp])"

}

]}}

},

{

"name": "globalByDate",

"url": "wikiraw:///{{{data-dates}}}",

"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": {{#expr:{{{scale|.8}}}*100}},

"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": "#{{{id|covid-map}}}:mouseout","expr":"false"},

{"type": "@scrollArea:touchstart", "expr": "true"},

{"type": "touchend", "expr": "false"}

]

},

{

"name": "handlePosition",

"init": {{#expr:{{{scale|.8}}}*{{{width|625}}}}},

"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({{#ifeq:{{CONTENTLANG}}|en|'%B %d %Y'|'%d/%m/%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": "{{{color-ramp-type|log}}}",

"domain": [

{{#ifeq:{{{color-ramp-type|log}}}|log|{{#ifeq:{{#expr:{{{domain-min}}}=0}}|1|1|{{{domain-min}}}}}}},

{{#ifeq:{{{color-ramp-type|log}}}|log|{{#expr:1e{{{domain-magnitude|{{{domain-max|2}}} }}} }}|{{{domain-max}}}}}],

"domainMin": {{#ifeq:{{{color-ramp-type|log}}}|log|1|{{{domain-min}}}}},

"zero": false,

"range": ["#FFEDBC", "#f83600"]

}

],

"marks": [

{

"name": "map",

"type": "path",

"from": {"data": "countries"},

"properties": {

"enter": {

"path": {"field": "layout_path"}{{#ifexpr:{{{scale|0.8}}}<0.8|,

"y": {"value": 10} }}

},

"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": {{#expr:{{{scale|.8}}}*{{{width|625}}}}}},

"stroke": {"value": "#edf1f7"},

"strokeWidth": {"value": 16}

}

}

},

{

"name": "scrollLine",

"type": "rule",

"properties": {

"enter": {

"x": {"value": 0},

"y": {"value": 40},

"x2": {"value": {{#expr:{{{scale|.8}}}*{{{width|625}}}}}},

"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": {{#expr:{{{scale|0.8}}}*{{{width|626}}} }} },

"y": {"value": 10},

"align": {"value": "right"},

"fontSize": {"value": 17},

"fill": {"value": "black"}

},

"update": {

"text": [

{

"test": "tooltipSignalZipped.datum.v === null",

"template": "{{#ifexpr:{{{scale|0.8}}}<0.4||\u007b{tooltipSignalPop.datum.Country}\u007d}} (No data)"

},

{

"test": "tooltipSignalZipped.datum.v",

"template": "{{#ifexpr:{{{scale|0.8}}}<0.4||\u007b{tooltipSignalPop.datum.Country}\u007d}} \u007b{tooltipSignalZipped.datum.v\u007cnumber:','}\u007d"

},

{

"value": ""

}

]

}

}

}

]{{#if:{{{no-legend|}}}||,

"legends": [

{

"fill": "color",

"title": "{{{legend-title|}}}",

"offset": -300,

"properties": {

"gradient": {

"stroke": {"value": "transparent"}

},

"title": {

"fontSize": {"value": 14}

},

"legend": {

"x": {"value": 0},

"y": {"value": {{#expr:{{{scale|.8}}}*225 }} }

}

}

}

] }}

}

|mode=interactive

|title={{{title|Interactive COVID-19 Map}}}

}}