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

From blackwiki
Jump to navigation Jump to search
imported>Wugapodes
(self pad)
imported>Wugapodes
(element positions)
Line 2: Line 2:
 
{{#tag:Graph|
 
{{#tag:Graph|
 
{
 
{
   "version": 2, "width": {{#expr:{{{scale|.8}}}*{{{width|625}}}+10}}, "height": {{#expr:{{{scale|.8}}}*{{{height|325}}}}},
+
   "version": 2, "width": {{#expr:{{{scale|.8}}}*{{{width|625}}}+22}}, "height": {{#expr:{{{scale|.8}}}*{{{height|325}}}}},
 
   "padding": { "left": 0, "right":{{{padding|12}}}, "top":{{{padding|12}}},"bottom":{{{padding|12}}} },
 
   "padding": { "left": 0, "right":{{{padding|12}}}, "top":{{{padding|12}}},"bottom":{{{padding|12}}} },
 
   "background": "#edf1f7",
 
   "background": "#edf1f7",
Line 120: Line 120:
 
     {
 
     {
 
     "type": "[mousedown[!isDragging],mouseup] > mousemove",
 
     "type": "[mousedown[!isDragging],mouseup] > mousemove",
     "expr": "{x:mousePosition.x - isDraggingMap.x, y: clamp(mousePosition.y - isDraggingMap.y,0,height)}"
+
     "expr": "{x:mousePosition.x - isDraggingMap.x, y: clamp(mousePosition.y - isDraggingMap.y,-10,height)}"
 
             },
 
             },
 
             {
 
             {
 
     "type": "touchmove",
 
     "type": "touchmove",
     "expr": "{x:mousePosition.x - isDraggingMap.x, y: clamp(mousePosition.y - isDraggingMap.y,0,height)}"
+
     "expr": "{x:mousePosition.x - isDraggingMap.x, y: clamp(mousePosition.y - isDraggingMap.y,-10,height)}"
 
             }
 
             }
 
     ]
 
     ]
Line 268: Line 268:
 
           "y2": {"value": {{#expr:{{{scale|.8}}}*{{{height|325}}}}}},
 
           "y2": {"value": {{#expr:{{{scale|.8}}}*{{{height|325}}}}}},
 
           "stroke": {"value": "#edf1f7"},
 
           "stroke": {"value": "#edf1f7"},
           "strokeWidth": {"value": 16}
+
           "strokeWidth": {"value": 24}
 
         }
 
         }
 
       }
 
       }

Revision as of 00:07, 26 March 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