Difference between revisions of "Template:Interactive COVID-19 maps/common/sandbox"

From blackwiki
Jump to navigation Jump to search
imported>Wugapodes
(test inline comments)
imported>Wugapodes
(sync with main)
Line 2: Line 2:
 
{{#tag:Graph|
 
{{#tag:Graph|
 
{
 
{
   "version": 2, "width": {{#expr:{{{scale|.8}}}*{{{width|625}}}+22}}, "height": {{#expr:{{{scale|.8}}}*{{{height|325}}}}},
+
   "version": 2, "width": {{#expr:{{{scale|.8}}}*{{{width|625}}}}}, "height": {{#expr:{{{scale|.8}}}*{{{height|325}}}}},
   "padding": { "left": 0, "right":{{{padding|12}}}, "top":{{{padding|12}}},"bottom":{{{padding|12}}} },
+
   "padding": {{{padding|12}}},
 
   "background": "#edf1f7",
 
   "background": "#edf1f7",
 
   "data": [
 
   "data": [
 
     {
 
     {
    "name": "population",
+
      "name": "population",
    "url": "wikiraw:///Template:Interactive COVID-19 maps/data/UN 2019 Population by country-csv",
+
      "url": "wikiraw:///Template:Interactive COVID-19 maps/data/UN 2019 Population by country-csv",
    "format": {
+
      "format": {
    "type": "csv"
+
        "type": "csv"
    }
+
      }
 
     },
 
     },
 
     {
 
     {
Line 17: Line 17:
 
       "url": "wikiraw:///{{{data-coloring}}}",
 
       "url": "wikiraw:///{{{data-coloring}}}",
 
       "format": {
 
       "format": {
      "type": "csv",
+
        "type": "csv",
      "parse": {
+
        "parse": {
      "date": "date",
+
          "date": "date",
      "cases": "number"
+
          "cases": "number"
      }
+
        }
 
       },
 
       },
 
       "transform": [{{#if:{{{per-capita|}}}|
 
       "transform": [{{#if:{{{per-capita|}}}|
      {
+
        {
      "type": "lookup",
+
          "type": "lookup",
      "on": "population",
+
          "on": "population",
      "keys": ["id"],
+
          "keys": ["id"],
      "onKey": "ISO3",
+
          "onKey": "ISO3",
      "as": ["pop"],
+
          "as": ["pop"],
      "default": {}
+
          "default": {}
      },
+
        },
 
         {
 
         {
 
           "type": "formula",
 
           "type": "formula",
Line 46: Line 46:
 
     },
 
     },
 
     {
 
     {
    "name": "globalByDate",
+
      "name": "globalByDate",
    "url": "wikiraw:///{{{data-dates}}}",
+
      "url": "wikiraw:///{{{data-dates}}}",
    "format": {
+
      "format": {
      "type": "csv",
+
        "type": "csv",
      "parse": {
+
        "parse": {
      "date": "date",
+
          "date": "date",
      "cases": "number"
+
          "cases": "number"
      }
+
        }
 
       }
 
       }
 
     },
 
     },
Line 70: Line 70:
 
         },
 
         },
 
         {
 
         {
        "type": "lookup",
+
          "type": "lookup",
        "on": "population",
+
          "on": "population",
        "keys": ["id"],
+
          "keys": ["id"],
        "onKey": "ISO3",
+
          "onKey": "ISO3",
        "as": ["pop"],
+
          "as": ["pop"],
        "default": {"Country": "" }
+
          "default": {"Country": "" }
 
         },
 
         },
 
         {
 
         {
Line 97: Line 97:
 
         {"type": "mouseup","expr": "false"},
 
         {"type": "mouseup","expr": "false"},
 
         {"type": "#{{{id|covid-map}}}:mouseout","expr":"false"},
 
         {"type": "#{{{id|covid-map}}}:mouseout","expr":"false"},
        {"type": "@handle:touchstart", "expr": "true"},
 
 
         {"type": "@scrollArea:touchstart", "expr": "true"},
 
         {"type": "@scrollArea:touchstart", "expr": "true"},
 
         {"type": "touchend", "expr": "false"}
 
         {"type": "touchend", "expr": "false"}
 
       ]
 
       ]
    },
 
   
 
    {
 
      "name": "isDraggingMap",
 
      "init": "{val: false}",
 
      "streams": [
 
        {"type": "mousedown[!isDragging]","expr": "{val: true, x: eventX(), y: eventY()}"},
 
        {"type": "mouseup","expr": "{val: false, x: 0, y: 0}"},
 
        {"type": "@map:touchstart","expr": "{val: true, x: eventX(), y: eventY()}"},
 
        {"type": "touchend","expr": "{val: false, x: 0, y: 0}"},
 
        {"type": "#covid-map:mouseout","expr":"{val: false, x: 0, y: 0}"}
 
      ]
 
    },
 
    {
 
    "name": "dragDistance",
 
    "init": {"x":0,"y":0},
 
    "streams": [
 
    {
 
    "type": "[mousedown[!isDragging],mouseup] > mousemove",
 
    "expr": "{x:mousePosition.x - isDraggingMap.x, y: clamp(mousePosition.y - isDraggingMap.y,-10,height)}"
 
            },
 
            {
 
    "type": "touchmove",
 
    "expr": "{x:mousePosition.x - isDraggingMap.x, y: clamp(mousePosition.y - isDraggingMap.y,-10,height)}"
 
            }
 
    ]
 
    },
 
    {
 
    "name": "mousePosition",
 
    "init": {"x": 0, "y":0},
 
    "streams": [
 
    {"type": "mousemove","expr": "{x: eventX(), y: eventY()}"},
 
            {"type": "touchmove","expr": "{x: eventX(), y: eventY()}"}
 
    ]
 
 
     },
 
     },
 
     {
 
     {
 
       "name": "handlePosition",
 
       "name": "handlePosition",
       "init": {{#expr:{{{scale|.8}}}*{{{height|325}}}}},
+
       "init": {{#expr:{{{scale|.8}}}*{{{width|625}}}}},
 
       "streams": [
 
       "streams": [
 
         {
 
         {
 
           "type": "mousemove[isDragging]",
 
           "type": "mousemove[isDragging]",
           "expr": "clamp(eventY(),40,height)"
+
           "expr": "clamp(eventX(),0,width)"
 
         },
 
         },
 
         {
 
         {
 
           "type": "touchmove[isDragging]",
 
           "type": "touchmove[isDragging]",
           "expr": "clamp(eventY(),40,height)"
+
           "expr": "clamp(eventX(),0,width)"
 
         }
 
         }
 
       ]
 
       ]
Line 158: Line 123:
 
       "name": "currentDate",
 
       "name": "currentDate",
 
       // WugBot! humandate
 
       // WugBot! humandate
       "init": "Mar 21",
+
       "init": "Dec 7",
       "expr": "slice(scaledHandlePosition,4,10)"
+
       "expr": "timeFormat({{#ifeq:{{CONTENTLANG}}|en|'%b %d'|'%d/%m'}},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",
+
      "name": "dateStamp",
 
         // WugBot! computerdate
 
         // WugBot! computerdate
    "init": "03/21/20",
+
      "init": "12/07/20",
    "expr": "timeFormat('%m/%d/%y',scaledHandlePosition)"
+
      "expr": "timeFormat('%m/%d/%y',scaledHandlePosition)"
 
     },
 
     },
 
     {
 
     {
Line 194: Line 161:
 
         }
 
         }
 
       ]  
 
       ]  
    },
 
    {
 
    "name": "zoomSignal",
 
    "init": "false",
 
    "streams": [
 
    {"type": "@plus:mousedown", "expr": "{zoom: true, direction: 1}"},
 
    {"type": "mouseup", "expr": "false"},
 
    {"type": "@minus:mousedown", "expr": "{zoom: true, direction: -1}"},
 
    {"type": "mouseup", "expr": "false"}
 
    ]
 
 
     }
 
     }
 
   ],
 
   ],
Line 212: Line 169:
 
       "type": "time",
 
       "type": "time",
 
       "domain": {
 
       "domain": {
      "data": "globalByDate",
+
        "data": "globalByDate",
      "field":"date"
+
        "field":"date"
 
       },
 
       },
       "range": [40,{{#expr:{{{scale|.8}}}*{{{height|325}}}}}]
+
       "range": "width"
 
     },
 
     },
 
     {
 
     {
Line 235: Line 192:
 
       "from": {"data": "countries"},
 
       "from": {"data": "countries"},
 
       "properties": {
 
       "properties": {
         "enter": {"path": {"field": "layout_path"},"x": {"value": 22} },
+
         "enter": {
 +
          "path": {"field": "layout_path"}{{#ifexpr:{{{scale|0.8}}}<0.8|,
 +
          "y": {"value": 10} }}
 +
        },
 
         "update": {
 
         "update": {
 
           "fill": [
 
           "fill": [
          {
+
            {
 
               "test": "datum.zipped.v !== null",
 
               "test": "datum.zipped.v !== null",
 
               "scale": "color",
 
               "scale": "color",
Line 244: Line 204:
 
             },
 
             },
 
             {"value": "white"}
 
             {"value": "white"}
          ],
 
          "x": [
 
          {
 
          "test": "isDraggingMap.val",
 
          "signal": "dragDistance.x"
 
          }
 
          ],
 
          "y": [
 
          {
 
          "test": "isDraggingMap.val",
 
          "signal": "dragDistance.y"
 
          }
 
 
           ]
 
           ]
 
         },
 
         },
Line 266: Line 214:
 
       "properties": {
 
       "properties": {
 
         "enter": {
 
         "enter": {
           "x": {"value": 12},
+
           "x": {"value": 0},
 
           "y": {"value": 40},
 
           "y": {"value": 40},
           "y2": {"value": {{#expr:{{{scale|.8}}}*{{{height|325}}}}}},
+
           "x2": {"value": {{#expr:{{{scale|.8}}}*{{{width|625}}}}}},
 
           "stroke": {"value": "#edf1f7"},
 
           "stroke": {"value": "#edf1f7"},
           "strokeWidth": {"value": 24}
+
           "strokeWidth": {"value": 16}
 
         }
 
         }
 
       }
 
       }
Line 279: Line 227:
 
       "properties": {
 
       "properties": {
 
         "enter": {
 
         "enter": {
           "x": {"value": 12},
+
           "x": {"value": 0},
 
           "y": {"value": 40},
 
           "y": {"value": 40},
           "y2": {"value": {{#expr:{{{scale|.8}}}*{{{height|325}}}}}},
+
           "x2": {"value": {{#expr:{{{scale|.8}}}*{{{width|625}}}}}},
 
           "stroke": {"value": "#000"},
 
           "stroke": {"value": "#000"},
 
           "strokeWidth": {"value": 2}
 
           "strokeWidth": {"value": 2}
Line 292: Line 240:
 
       "properties": {
 
       "properties": {
 
         "enter": {
 
         "enter": {
           "x": {"value": 12},
+
           "x": {"value": 200},
 
           "y": {"value": 40},
 
           "y": {"value": 40},
 
           "size": {"value": 154},
 
           "size": {"value": 154},
Line 299: Line 247:
 
         },
 
         },
 
         "update": {
 
         "update": {
          "fill": {"value": "#fff"},
+
          "fill": {"value": "#fff"},
          "y": {"signal": "handlePosition"}
+
          "x": {"signal": "handlePosition"}
 
         },
 
         },
 
         "hover": {"fill": {"value": "#f00"} }
 
         "hover": {"fill": {"value": "#f00"} }
Line 310: Line 258:
 
       "properties": {
 
       "properties": {
 
         "enter": {
 
         "enter": {
           "x": {"value": 12},
+
           "x": {"value": 0},
 
           "y": {"value": 25},
 
           "y": {"value": 25},
 
           "fontSize": {"value": 32},
 
           "fontSize": {"value": 32},
Line 324: Line 272:
 
       "properties": {
 
       "properties": {
 
         "enter": {
 
         "enter": {
           "x": {"value": 500},
+
           "x": {"value": {{#expr:{{{scale|0.8}}}*{{{width|626}}} }} },
 
           "y": {"value": 10},   
 
           "y": {"value": 10},   
 
           "align": {"value": "right"},
 
           "align": {"value": "right"},
Line 332: Line 280:
 
         "update": {
 
         "update": {
 
           "text": [
 
           "text": [
          {
+
            {
          "test": "tooltipSignalZipped.datum.v === null",
+
              "test": "tooltipSignalZipped.datum.v === null",
          "template": "\u007b{tooltipSignalPop.datum.Country}\u007d (No data)"
+
              "template": "{{#ifexpr:{{{scale|0.8}}}<0.4||\u007b{tooltipSignalPop.datum.Country}\u007d}} (No data)"
          },
+
            },
          {
+
            {"template": "{{#ifexpr:{{{scale|0.8}}}<0.4||\u007b{tooltipSignalPop.datum.Country}\u007d}} \u007b{tooltipSignalZipped.datum.v}\u007d"}
          "test": "isDraggingMap.val !== true",
 
          "template": "\u007b{tooltipSignalPop.datum.Country}\u007d \u007b{tooltipSignalZipped.datum.v}\u007d"
 
            }
 
 
           ]
 
           ]
 
         }
 
         }
 
       }
 
       }
 
     }
 
     }
   ],
+
   ]{{#if:{{{no-legend|}}}||,
 
   "legends": [
 
   "legends": [
 
     {
 
     {
Line 358: Line 303:
 
         },
 
         },
 
         "legend": {
 
         "legend": {
           "x": {"value": 22},
+
           "x": {"value": 0},
           "y": {"value": {{#expr:{{{scale|.8}}}*225}} }
+
           "y": {"value": {{#expr:{{{scale|.8}}}*225 }} }
 
         }
 
         }
 
       }
 
       }
 
     }
 
     }
   ]
+
   ] }}
 
}
 
}
 
|mode=interactive
 
|mode=interactive

Revision as of 22:49, 9 December 2020

50px Template documentation[view] [edit] [history] [purge]

This template serves as a meta-template for the construction of interactive maps. While designed for use with COVID-19 related data, it should be sufficiently general for most purposes as long as the data are in the correct format. Editors interested in using or maintaining this meta-template should read the interactive graph tutorial which this template is based off-of.

Usage

{{Interactive COVID-19 maps/common
 | id               = {{{id|<!--default value-->}}}
 | data-coloring    = <!-- Wikilink without [[]] pointing to page with CSV data used to fill in countries. See [[Template:Interactive COVID-19 maps/data/Confirmed covid cases-csv]] for an example -->
 | data-dates       = <!-- Same as above, but this data is a by-date, global total, rather than by-country-by-date total. See [[Template:Interactive COVID-19 maps/data/global Confirmed covid cases by date-csv]] for an example -->
 | color-ramp-type  = <!-- The type of color ramp to use. Default is log, see [https://github.com/vega/vega/wiki/Scales] for other types. -->
 | domain-min       = <!-- Scale minimum -->
 | domain-magnitude = <!-- If color-ramp-type is log, the order of magnitude for the maximum. For example, a value of 2 would have a scale maximum of 100, 3 -> 1000, 4 -> 10000, etc --> 
 | legend-title     = <!-- Title to use for the legend -->
 | title            = <!-- Title for the entire graph -->
 | scale            = {{{scale|<!-- default value -->}}}
}}

Examples

See Template:Interactive COVID-19 maps for a list of maps which are made using this template.


TemplateData

A meta-template for creating interactive data visualizations using maps

Template parameters

This template prefers block formatting of parameters.

ParameterDescriptionTypeStatus
Titletitle

Title for the graph

Stringsuggested
Country fill datadata-coloring

Dataset used to set the fill color for countries

Example
Template:Interactive COVID-19 maps/data/Deaths by country-csv
Pagerequired
Minimum valuedomain-min

no description

Unknownoptional
Maximum order of magnitudedomain-magnitude

The order of magnitude for the scale maximum

Example
4
Numberrequired
By-date totalsdata-dates

Global totals by date

Example
Template:Interactive COVID-19 maps/data/Cumulative deaths by date-csv
Pagerequired
Legend titlelegend-title

Title for the legend

Example
COVID-19 deaths
Stringsuggested
Scaling coefficientscale

A percentage value (as a decimal) to resize the map

Default
0.8
Example
1.2
Auto value
{{{scale|0.8}}}
Numbersuggested
HTML identifierid

Unique string to identify this graph

Default
covid-map
Example
covid-map
Stringsuggested
Widthwidth

Default width

Default
625
Numberdeprecated
Heightheight

Default height

Default
325
Auto value
Numberdeprecated
Paddingpadding

no description

Default
12
Unknownoptional
Color ramp typecolor-ramp-type

no description

Default
log
Stringoptional