add map key

src/components/world-map/world-map.jsx

@@ -74,7 +74,7 @@ const WorldMap = props => (
 );
 
 WorldMap.propTypes = {
-    colorIndex: PropTypes.arrayOf(PropTypes.string),
+    colorIndex: PropTypes.arrayOf(PropTypes.number),
     countryData: PropTypes.arrayOf(PropTypes.string),
     countryNames: PropTypes.arrayOf(PropTypes.string)
 };

src/views/annual-report/annual-report.jsx

@@ -807,6 +807,18 @@ class AnnualReport extends React.Component {
                                 <p>
                                     <FormattedMessage id="annualReport.reachMapBlurb" />
                                 </p>
+                                <div className="map-key">
+                                    <div className="map-scale">
+                                        <div>0</div>
+                                        <img src="/images/annual-report/reach/Map Key.svg" />
+                                        <div>
+                                            <FormattedMessage id="annualReport.reachMap20M" />
+                                        </div>
+                                    </div>
+                                    <div>
+                                        <FormattedMessage id="annualReport.reachMapLog" />
+                                    </div>
+                                </div>
                                 <div className="map-wrapper">
                                     <MediaQuery minWidth={frameless.desktop}>
                                         <WorldMap

src/views/annual-report/annual-report.scss

@@ -665,6 +665,10 @@ p {
         padding-bottom: 20px;
         text-align: center;
 
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+
         h3, p {
             color: $type-gray;
             padding: 0 48px;
@@ -674,7 +678,23 @@ p {
             width: 100%;
             border-radius: 0px;
         }
-        
+
+        .map-key {
+            font-size: .75rem;
+            margin-bottom: 36px;
+
+            .map-scale {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                font-weight: bold;
+
+                img {
+                    padding: 4px 8px;
+                }
+            }
+        }
+
         .map-wrapper {
           width: 100%;
           height: 0;

src/views/annual-report/l10n.json

@@ -73,6 +73,8 @@
     "annualReport.reachGrowthBlurb": "New accounts created in the Scratch Online Community within the last 5 years.",
     "annualReport.reachGlobalCommunity": "A Global Community",
     "annualReport.reachMapBlurb": "Total accounts registered in the Scratch Online Community through December 31, 2019",
+    "annualReport.reachMap20M": "20M",
+    "annualReport.reachMapLog": "on a logarithmic scale",
     "annualReport.reachTranslationTitle": "Scratch is Translated into 60+ Languages",
     "annualReport.reachTranslationBlurb": "Thanks to volunteer translators from around the world.",
     "annualReport.reachScratchJrBlurb": "ScratchJr is an introductory programming environment that enables young children (ages 5-7) to create their own interactive stories and games.",

static/images/annual-report/reach/Map Key.svg

+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="330px" height="32px" viewBox="0 0 330 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>Map Key</title>
+    <defs>
+        <linearGradient x1="-1.11022302e-14%" y1="50%" x2="100%" y2="50%" id="linearGradient-1">
+            <stop stop-color="#0EBD8C" stop-opacity="0.05" offset="0%"></stop>
+            <stop stop-color="#0EBD8C" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Map-Key" fill="url(#linearGradient-1)">
+            <rect x="0" y="0" width="330" height="32" rx="16"></rect>
+        </g>
+    </g>
+</svg>
\ No newline at end of file