வார்ப்புரு:Interactive COVID-19 maps/common
&lt;includeonly&gt;&lt;div id=&quot;{{{id|covid-map}}}&quot; style=&quot;{{{style|}}}&quot;&gt;
 {{#tag:Graph|
 {
   &quot;version&quot;: 2, &quot;width&quot;: {{#expr:{{{scale|.8}}}*{{{width|625}}}}}, &quot;height&quot;: {{#expr:{{{scale|.8}}}*{{{height|325}}}}},
   &quot;padding&quot;: {{{padding|12}}},
   &quot;background&quot;: &quot;#edf1f7&quot;,
   &quot;data&quot;: [
     {
       &quot;name&quot;: &quot;population&quot;,
       &quot;url&quot;: &quot;wikiraw:///Template:Interactive COVID-19 maps/data/UN 2019 Population by country-csv&quot;,
       &quot;format&quot;: {
         &quot;type&quot;: &quot;csv&quot;
       }
     },
     {
       &quot;name&quot;: &quot;highlights&quot;,
       &quot;url&quot;: &quot;wikiraw:///{{{data-coloring}}}&quot;,
       &quot;format&quot;: {
         &quot;type&quot;: &quot;csv&quot;,
         &quot;parse&quot;: {
           &quot;date&quot;: &quot;date&quot;,
           &quot;cases&quot;: &quot;number&quot;
         }
       },
       &quot;transform&quot;: [{{#if:{{{per-capita|}}}|
         {
           &quot;type&quot;: &quot;lookup&quot;,
           &quot;on&quot;: &quot;population&quot;,
           &quot;keys&quot;: [&quot;id&quot;],
           &quot;onKey&quot;: &quot;ISO3&quot;,
           &quot;as&quot;: [&quot;pop&quot;],
           &quot;default&quot;: {}
         },
         {
           &quot;type&quot;: &quot;formula&quot;,
           &quot;field&quot;: &quot;v&quot;,
           &quot;expr&quot;: &quot;round((parseFloat(datum[''+dateStamp])/datum.pop.Population)*{{#expr:1e{{{round-to|2}}} }})/{{#expr:1e{{{round-to|2}}} }}&quot;
         }
       ]|
         {
           &quot;type&quot;: &quot;formula&quot;,
           &quot;field&quot;: &quot;v&quot;,
           &quot;expr&quot;: &quot;parseFloat(datum[''+dateStamp])&quot;
         }
       ]}}
     },
     {
       &quot;name&quot;: &quot;globalByDate&quot;,
       &quot;url&quot;: &quot;wikiraw:///{{{data-dates}}}&quot;,
       &quot;format&quot;: {
         &quot;type&quot;: &quot;csv&quot;,
         &quot;parse&quot;: {
           &quot;date&quot;: &quot;date&quot;,
           &quot;cases&quot;: &quot;number&quot;
         }
       }
     },
     {
       &quot;name&quot;: &quot;countries&quot;,
       &quot;url&quot;: &quot;wikiraw:///Template:Interactive COVID-19 maps/data/World map data&quot;,
       &quot;format&quot;: {&quot;type&quot;: &quot;topojson&quot;,&quot;feature&quot;: &quot;countries&quot;},
       &quot;transform&quot;: [
         {
           &quot;type&quot;: &quot;geopath&quot;,
           &quot;value&quot;: &quot;data&quot;,
           &quot;scale&quot;: {{#expr:{{{scale|.8}}}*100}},
           &quot;center&quot;: [-180,125],
           &quot;translate&quot;: [0,0],
           &quot;projection&quot;: &quot;equirectangular&quot;
         },
         {
           &quot;type&quot;: &quot;lookup&quot;,
           &quot;on&quot;: &quot;population&quot;,
           &quot;keys&quot;: [&quot;id&quot;],
           &quot;onKey&quot;: &quot;ISO3&quot;,
           &quot;as&quot;: [&quot;pop&quot;],
           &quot;default&quot;: {&quot;Country&quot;: &quot;&quot; }
         },
         {
           &quot;type&quot;: &quot;lookup&quot;,
           &quot;on&quot;: &quot;highlights&quot;,
           &quot;keys&quot;: [&quot;id&quot;],
           &quot;onKey&quot;: &quot;id&quot;,
           &quot;as&quot;: [&quot;zipped&quot;],
           &quot;default&quot;: {&quot;v&quot;: null, &quot;Country&quot;:&quot;No data&quot;}
         }
       ]
     }
     ],
 
   &quot;signals&quot;: [
     {
       &quot;name&quot;: &quot;isDragging&quot;,
       &quot;init&quot;: false,
       &quot;streams&quot;: [
         {&quot;type&quot;: &quot;@handle:mousedown&quot;,&quot;expr&quot;: &quot;true&quot;},
         {&quot;type&quot;: &quot;mouseup&quot;,&quot;expr&quot;: &quot;false&quot;},
         {&quot;type&quot;: &quot;#{{{id|covid-map}}}:mouseout&quot;,&quot;expr&quot;:&quot;false&quot;},
         {&quot;type&quot;: &quot;@scrollArea:touchstart&quot;, &quot;expr&quot;: &quot;true&quot;},
         {&quot;type&quot;: &quot;touchend&quot;, &quot;expr&quot;: &quot;false&quot;}
       ]
     },
     {
       &quot;name&quot;: &quot;handlePosition&quot;,
       &quot;init&quot;: {{#expr:{{{scale|.8}}}*{{{width|625}}}}},
       &quot;streams&quot;: [
         {
           &quot;type&quot;: &quot;mousemove[isDragging]&quot;,
           &quot;expr&quot;: &quot;clamp(eventX(),0,width)&quot;
         },
         {
           &quot;type&quot;: &quot;touchmove[isDragging]&quot;,
           &quot;expr&quot;: &quot;clamp(eventX(),0,width)&quot;
         }
       ]
     },
     {
       &quot;name&quot;: &quot;scaledHandlePosition&quot;,
       &quot;expr&quot;: &quot;handlePosition&quot;,
       &quot;scale&quot;: {&quot;name&quot;: &quot;dateScale&quot;,&quot;invert&quot;: true}
     },
     {
       &quot;name&quot;: &quot;currentDate&quot;,
       // WugBot! humandate
       &quot;init&quot;: &quot;Apr 28&quot;,
       &quot;expr&quot;: &quot;timeFormat({{#ifeq:{{CONTENTLANG}}|en|'%b %d'|'%d/%m'}},scaledHandlePosition)&quot;
       /* %d = day, %b = month name (English in all wikis), %m = month number, %y = year. */
       /* Any order and characters between them is allowed. */
     },
     {
       &quot;name&quot;: &quot;dateStamp&quot;,
         // WugBot! computerdate
       &quot;init&quot;: &quot;04/28/20&quot;,
       &quot;expr&quot;: &quot;timeFormat('%m/%d/%y',scaledHandlePosition)&quot;
     },
     {
       &quot;name&quot;: &quot;tooltipSignalPop&quot;,
       &quot;init&quot;: {&quot;expr&quot;: &quot;{x: 0, y: 0, datum: {} }&quot;}, 
       &quot;streams&quot;: [
         {  
           &quot;type&quot;: &quot;@map:mouseover&quot;,    
           &quot;expr&quot;: &quot;{x: eventX(), y: eventY(), datum: eventItem().datum.pop}&quot;
         },
         {  
           &quot;type&quot;: &quot;@map:mouseout&quot;,
           &quot;expr&quot;: &quot;{x: 0, y: 0, datum: {} }&quot;
         }
       ] 
     },
     {
       &quot;name&quot;: &quot;tooltipSignalZipped&quot;,
       &quot;init&quot;: {&quot;expr&quot;: &quot;{x: 0, y: 0, datum: {} }&quot;}, 
       &quot;streams&quot;: [
         {  
           &quot;type&quot;: &quot;@map:mouseover&quot;,    
           &quot;expr&quot;: &quot;{x: eventX(), y: eventY(), datum: eventItem().datum.zipped}&quot;
         },
         {  
           &quot;type&quot;: &quot;@map:mouseout&quot;,
           &quot;expr&quot;: &quot;{x: 0, y: 0, datum: {} }&quot;
         }
       ] 
     }
   ],
 
   &quot;scales&quot;: [
     {
       &quot;name&quot;: &quot;dateScale&quot;,
       &quot;type&quot;: &quot;time&quot;,
       &quot;domain&quot;: {
         &quot;data&quot;: &quot;globalByDate&quot;,
         &quot;field&quot;:&quot;date&quot;
       },
       &quot;range&quot;: &quot;width&quot;
     },
     {
       &quot;name&quot;: &quot;color&quot;,
       &quot;type&quot;: &quot;{{{color-ramp-type|log}}}&quot;,
       &quot;domain&quot;: [
         &lt;!--Domain minimum--&gt;{{#ifeq:{{{color-ramp-type|log}}}|log|{{#ifeq:{{#expr:{{{domain-min}}}=0}}|1|1|{{{domain-min}}}}}}},
         &lt;!--Domain maximum--&gt;{{#ifeq:{{{color-ramp-type|log}}}|log|{{#expr:1e{{{domain-magnitude|{{{domain-max|2}}} }}} }}|{{{domain-max}}}}}],
       &quot;domainMin&quot;: {{#ifeq:{{{color-ramp-type|log}}}|log|1|{{{domain-min}}}}},
       &quot;zero&quot;: false,
       &quot;range&quot;:  [&quot;#FFEDBC&quot;, &quot;#f83600&quot;]
     }
   ],
 
   &quot;marks&quot;: [
     {
       &quot;name&quot;: &quot;map&quot;,
       &quot;type&quot;: &quot;path&quot;,
       &quot;from&quot;: {&quot;data&quot;: &quot;countries&quot;},
       &quot;properties&quot;: {
         &quot;enter&quot;: {
           &quot;path&quot;: {&quot;field&quot;: &quot;layout_path&quot;}{{#ifexpr:{{{scale|0.8}}}&lt;0.8|,
           &quot;y&quot;: {&quot;value&quot;: 10} }}
         },
         &quot;update&quot;: {
           &quot;fill&quot;: [
             {
               &quot;test&quot;: &quot;datum.zipped.v !== null&quot;,
               &quot;scale&quot;: &quot;color&quot;,
               &quot;field&quot;: &quot;zipped.v&quot;
             },
             {&quot;value&quot;: &quot;white&quot;}
           ]
         },
       &quot;hover&quot;: {&quot;fill&quot;: {&quot;value&quot;: &quot;#989898&quot;} }
       }
     },
     {
       &quot;name&quot;: &quot;scrollArea&quot;,
       &quot;type&quot;: &quot;rule&quot;,
       &quot;properties&quot;: {
         &quot;enter&quot;: {
           &quot;x&quot;: {&quot;value&quot;: 0},
           &quot;y&quot;: {&quot;value&quot;: 40},
           &quot;x2&quot;: {&quot;value&quot;: {{#expr:{{{scale|.8}}}*{{{width|625}}}}}},
           &quot;stroke&quot;: {&quot;value&quot;: &quot;#edf1f7&quot;},
           &quot;strokeWidth&quot;: {&quot;value&quot;: 16}
         }
       }
     },
     {
       &quot;name&quot;: &quot;scrollLine&quot;,
       &quot;type&quot;: &quot;rule&quot;,
       &quot;properties&quot;: {
         &quot;enter&quot;: {
           &quot;x&quot;: {&quot;value&quot;: 0},
           &quot;y&quot;: {&quot;value&quot;: 40},
           &quot;x2&quot;: {&quot;value&quot;: {{#expr:{{{scale|.8}}}*{{{width|625}}}}}},
           &quot;stroke&quot;: {&quot;value&quot;: &quot;#000&quot;},
           &quot;strokeWidth&quot;: {&quot;value&quot;: 2}
         }
       }
     },
     {
       &quot;name&quot;: &quot;handle&quot;,
       &quot;type&quot;: &quot;symbol&quot;,
       &quot;properties&quot;: {
         &quot;enter&quot;: {
           &quot;x&quot;: {&quot;value&quot;: 200},
           &quot;y&quot;: {&quot;value&quot;: 40},
           &quot;size&quot;: {&quot;value&quot;: 154},
           &quot;stroke&quot;: {&quot;value&quot;: &quot;#880&quot;},
           &quot;strokeWidth&quot;: {&quot;value&quot;: 2.5}
         },
         &quot;update&quot;: {
           &quot;fill&quot;: {&quot;value&quot;: &quot;#fff&quot;},
           &quot;x&quot;: {&quot;signal&quot;: &quot;handlePosition&quot;}
         },
         &quot;hover&quot;: {&quot;fill&quot;: {&quot;value&quot;: &quot;#f00&quot;} }
       }
     },
     {
       &quot;name&quot;: &quot;dateLabel&quot;,
       &quot;type&quot;: &quot;text&quot;,
       &quot;properties&quot;: {
         &quot;enter&quot;: {
           &quot;x&quot;: {&quot;value&quot;: 0},
           &quot;y&quot;: {&quot;value&quot;: 25},
           &quot;fontSize&quot;: {&quot;value&quot;: 32},
           &quot;fontWeight&quot;: {&quot;value&quot;: &quot;bold&quot;},
           &quot;fill&quot;: {&quot;value&quot;: &quot;steelblue&quot;}
         },
         &quot;update&quot;: {&quot;text&quot;: {&quot;signal&quot;: &quot;currentDate&quot;} }
       }
     },
     {
       &quot;name&quot;: &quot;HoverText&quot;,
       &quot;type&quot;: &quot;text&quot;,
       &quot;properties&quot;: {
         &quot;enter&quot;: {
           &quot;x&quot;: {&quot;value&quot;: {{#expr:{{{scale|0.8}}}*{{{width|626}}} }} },
           &quot;y&quot;: {&quot;value&quot;: 10},  
           &quot;align&quot;: {&quot;value&quot;: &quot;right&quot;},
           &quot;fontSize&quot;: {&quot;value&quot;: 17},
           &quot;fill&quot;: {&quot;value&quot;: &quot;black&quot;}
         },
         &quot;update&quot;: {
           &quot;text&quot;: [
             {
               &quot;test&quot;: &quot;tooltipSignalZipped.datum.v === null&quot;,
               &quot;template&quot;: &quot;{{#ifexpr:{{{scale|0.8}}}&lt;0.4||\u007b{tooltipSignalPop.datum.Country}\u007d}} (No data)&quot;
             },
             {&quot;template&quot;: &quot;{{#ifexpr:{{{scale|0.8}}}&lt;0.4||\u007b{tooltipSignalPop.datum.Country}\u007d}} \u007b{tooltipSignalZipped.datum.v}\u007d&quot;}
           ]
         }
       }
     }
   ]{{#if:{{{no-legend|}}}||,
   &quot;legends&quot;: [
     {
       &quot;fill&quot;: &quot;color&quot;,
       &quot;title&quot;: &quot;{{{legend-title|}}}&quot;,
       &quot;offset&quot;: -300,
       &quot;properties&quot;: {
         &quot;gradient&quot;: {
           &quot;stroke&quot;: {&quot;value&quot;: &quot;transparent&quot;}
         },
         &quot;title&quot;: {
           &quot;fontSize&quot;: {&quot;value&quot;: 14}
         },
         &quot;legend&quot;: {
           &quot;x&quot;: {&quot;value&quot;: 0},
           &quot;y&quot;: {&quot;value&quot;: {{#expr:{{{scale|.8}}}*225 }} }
         }
       }
     }
   ] }}
 }
 |mode=interactive
 |title={{{title|Interactive COVID-19 Map}}}
 }}
 &lt;/div&gt;&lt;/includeonly&gt;&lt;noinclude&gt;
 {{documentation}}