Add support for a world map component, and an example page that displays it.

package.json

@@ -110,6 +110,7 @@
     "node-dir": "0.1.16",
     "node-sass": "4.14.1",
     "pako": "0.2.8",
+    "plotly.js": "1.47.4",
     "po2icu": "0.0.2",
     "postcss-loader": "2.0.10",
     "prop-types": "15.6.0",
@@ -119,6 +120,7 @@
     "react-intl": "2.8.0",
     "react-modal": "3.11.1",
     "react-onclickoutside": "6.7.1",
+    "react-plotly.js": "2.4.0",
     "react-redux": "5.0.7",
     "react-responsive": "3.0.0",
     "react-slick": "0.16.0",

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

@@ -0,0 +1,40 @@
+import Plot from 'react-plotly.js';
+const React = require('react');
+const PropTypes = require('prop-types');
+
+require('./world-map.scss');
+
+const WorldMap = props => (
+    <Plot
+        data={[
+            {
+                type: 'choropleth', // world map with gradient color data
+                locationmode: 'country names',
+                locations: props.countryNames,
+                z: props.colorIndex,
+                text: props.countryData,
+                autocolorscale: false,
+                colorscale: 'Blues',
+                reversescale: true
+            }
+        ]}
+        layout={
+            {
+                title: 'registered users',
+                geo: {
+                    projection: {
+                        type: 'robinson'
+                    }
+                }
+            }
+        }
+    />
+);
+
+WorldMap.propTypes = {
+    colorIndex: PropTypes.arrayOf(PropTypes.string),
+    countryData: PropTypes.arrayOf(PropTypes.string),
+    countryNames: PropTypes.arrayOf(PropTypes.string)
+};
+
+module.exports = WorldMap;

src/routes.json

@@ -175,6 +175,13 @@
         "view": "join/join",
         "title": "Join Scratch"
     },
+    {
+        "name": "map",
+        "pattern": "^/map/?$",
+        "routeAlias": "/map/?$",
+        "view": "map/map",
+        "title": "Map"
+    },
     {
         "name": "messages",
         "pattern": "^/messages/?$",

src/views/map/map.jsx

@@ -0,0 +1,23 @@
+const React = require('react');
+const render = require('../../lib/render.jsx');
+
+const Page = require('../../components/page/www/page.jsx');
+const WorldMap = require('../../components/world-map/world-map.jsx');
+
+const data = require('./user-data.json');
+
+const countryNames = Object.keys(data);
+const countryData = countryNames.map(key => data[key].count);
+const colorIndex = countryNames.map(key => data[key]['log count']);
+
+const Map = () => (
+    <div>
+        <WorldMap
+            colorIndex={colorIndex}
+            countryData={countryData}
+            countryNames={countryNames}
+        />
+    </div>
+);
+
+render(<Page><Map /></Page>, document.getElementById('app'));

src/views/map/user-data.csv

@@ -0,0 +1,266 @@
+country,count,log count
+China,2969283,6.472651592
+United Kingdom,2691412,6.429980184
+Australia,1546300,6.189293756
+Poland,1309467,6.117094558
+Spain,1201108,6.07958206
+Canada,1151264,6.061174924
+South Korea,858855,5.933919848
+France,839091,5.923809063
+Turkey,620216,5.792542966
+Brazil,559111,5.747498037
+Taiwan,481550,5.682641387
+Japan,468109,5.670346991
+Colombia,454989,5.658000897
+New Zealand,445256,5.64860978
+Albania,414386,5.617405074
+Sweden,393448,5.594887342
+Netherlands,393230,5.594646643
+"Mexico, United States of",355613,5.550977629
+Italy,325007,5.511892715
+India,292890,5.466704544
+Ireland,260147,5.415218822
+Germany,251937,5.401291954
+Afghanistan,226370,5.354818871
+Thailand,205987,5.313839813
+Portugal,204789,5.311306625
+Hong Kong,201645,5.304587458
+Russia,195854,5.291932446
+"Bonaire, Sint Eustatius and Saba",193529,5.286746053
+Denmark,191842,5.282943693
+Algeria,189672,5.278003224
+Belgium,189176,5.276866038
+Argentina,180881,5.25739295
+United States Minor Outlying Islands,177024,5.24803215
+Aland Islands,176973,5.247907013
+Israel,175846,5.245132494
+Malaysia,171292,5.23373708
+Norway,163183,5.212674913
+Romania,133137,5.124298767
+Finland,123926,5.093162432
+Ukraine,118728,5.074553152
+United Arab Emirates,115730,5.063445953
+Switzerland,112377,5.050677434
+Chile,111372,5.046776019
+Greece,105093,5.02157379
+Singapore,103850,5.016406501
+Antarctica,94859,4.977078542
+Hungary,91034,4.959203626
+Philippines,87343,4.941228105
+Vietnam,86304,4.936030925
+Austria,85807,4.933522718
+Peru,83708,4.922766966
+Ecuador,83246,4.920363375
+South Africa,72803,4.862149276
+Czechia,70717,4.849523828
+Andorra,65723,4.817717379
+Pakistan,63415,4.802191997
+Egypt,61704,4.790313318
+Indonesia,60433,4.781274154
+American Samoa,59969,4.777926807
+Uruguay,56491,4.751979263
+Slovenia,56104,4.748993826
+Serbia,46005,4.662805035
+Slovakia,43917,4.642632666
+Bulgaria,42228,4.625600513
+"Korea, Republic of",41614,4.619239463
+Estonia,41018,4.612974481
+North Korea,37382,4.572662533
+Angola,36462,4.561840487
+Zimbabwe,36395,4.561041724
+Latvia,35465,4.549799964
+Saudi Arabia,34396,4.53650794
+Belarus,34135,4.533199907
+Bahamas,33008,4.518619211
+Armenia,32633,4.513657001
+Lithuania,31808,4.502536363
+Georgia,31395,4.496860487
+Morocco,31264,4.495044542
+Anguilla,30293,4.481342285
+Costa Rica,27999,4.447142521
+Nigeria,27794,4.443951053
+Guatemala,27535,4.439885081
+Kazakhstan,26518,4.423540766
+Azerbaijan,26263,4.419344334
+Venezuela,26181,4.417986231
+Bangladesh,25750,4.410777233
+El Salvador,24284,4.385320224
+Croatia,23567,4.372304302
+Aruba,22720,4.356408327
+Dominican Republic,21559,4.333628613
+Antigua and Barbuda,21136,4.3250228
+Bolivia,20161,4.30451207
+Tunisia,18793,4.273996114
+Qatar,18068,4.256910082
+Puerto Rico,17483,4.242615958
+Iceland,16464,4.216535357
+Jamaica,15865,4.200440076
+Iran,15079,4.178372541
+Sri Lanka,13468,4.129303108
+Christmas Island,13012,4.114344055
+Kuwait,12903,4.110690697
+Jordan,12876,4.109780968
+Uganda,12667,4.102673771
+Bosnia and Herzegovina,12394,4.093211492
+Kenya,12327,4.090857396
+"Palestine, State of",12106,4.08300067
+Panama,11911,4.075948225
+Bahrain,11429,4.058008233
+Syria,11331,4.05426824
+Iraq,11206,4.049450618
+Oman,11077,4.044422156
+"Virgin Islands, U.S.",10750,4.031408464
+Fiji,10279,4.011950866
+Cambodia,9918,3.996424104
+Honduras,9489,3.977220447
+Cyprus,9175,3.962606073
+Somalia,9057,3.956984368
+Ghana,9044,3.956360554
+Lebanon,8988,3.953663064
+Cuba,8963,3.952453396
+Bermuda,8934,3.951045948
+Trinidad and Tobago,8805,3.94472936
+Niger,8770,3.942999593
+Nicaragua,8633,3.936161741
+Moldova,8430,3.925827575
+British Indian Ocean Territory,8417,3.925157327
+Russian Federation,8335,3.920905604
+Heard Island and Mcdonald Islands,8261,3.917032622
+Jersey,8240,3.915927212
+Nepal,8083,3.907572579
+Macao,8006,3.903415586
+Luxembourg,7826,3.893539844
+Yemen,7518,3.876102321
+Barbados,7508,3.875524264
+Zambia,7319,3.864451747
+Belize,7080,3.850033258
+Ethiopia,7080,3.850033258
+Mongolia,7044,3.847819347
+"Macedonia, The Former Yugoslav Republic of",6982,3.843979844
+Kosovo,6782,3.831357785
+Reunion,6410,3.80685803
+Malta,6348,3.802636918
+Guernsey,6158,3.789439685
+Congo,5787,3.762453482
+Uzbekistan,5663,3.753046562
+Paraguay,5478,3.738622028
+Brunei,5418,3.733839001
+Kyrgyzstan,5305,3.724685388
+Isle of Man,5269,3.721728199
+"Virgin Islands, British",5150,3.711807229
+Cameroon,5045,3.702861171
+Madagascar,4899,3.690107439
+South Georgia and The South Sandwich Islands,4482,3.651471852
+Djibouti,4453,3.648652695
+Myanmar,4367,3.640183192
+Haiti,4313,3.634779458
+Botswana,4147,3.617734035
+Samoa,4123,3.615213335
+Mauritius,3922,3.593507589
+Bhutan,3896,3.590618948
+Benin,3504,3.544564097
+Cote D'ivoire,3456,3.538573734
+Chad,3411,3.532881719
+"Congo, The Democratic Republic of The",3404,3.531989551
+Netherlands Antilles,3370,3.527629901
+Guadeloupe,3272,3.514813295
+Eritrea,3232,3.509471352
+Tanzania,3167,3.500648063
+Libya,3156,3.499136995
+Cayman Islands,3142,3.497206181
+Senegal,3137,3.496514519
+Tonga,3125,3.494850022
+Cook Islands,3107,3.492341253
+Viet Nam,3106,3.492201451
+Dominica,3015,3.479287316
+Gabon,3011,3.478710756
+Swaziland,2973,3.473194909
+Sudan,2953,3.470263447
+Guam,2951,3.469969209
+Martinique,2939,3.468199586
+New Caledonia,2923,3.465828815
+Cocos (Keeling) Islands,2849,3.454692449
+Cape Verde,2788,3.445292769
+French Guiana,2754,3.439963936
+Burkina Faso,2589,3.41313205
+Togo,2537,3.404320467
+Tuvalu,2488,3.395850376
+Greenland,2431,3.385784959
+Montenegro,2393,3.378942699
+Gibraltar,2385,3.377488383
+Bouvet Island,2347,3.37051309
+Namibia,2328,3.366982976
+Vatican City,2302,3.362105319
+Maldives,2189,3.340245762
+Gambia,2173,3.337059726
+Vanuatu,2163,3.335056519
+Turks and Caicos Islands,2109,3.32407658
+Monaco,2099,3.322012439
+Guyana,2095,3.321184027
+Western Sahara,2087,3.319522449
+Wallis and Futuna,2039,3.309417226
+Mozambique,1910,3.281033367
+Grenada,1899,3.278524965
+French Polynesia,1885,3.275311355
+Burundi,1838,3.264345507
+Laos,1832,3.262925469
+Tajikistan,1766,3.246990699
+Central African Republic,1758,3.245018871
+Mali,1731,3.238297068
+Rwanda,1689,3.22762965
+Papua New Guinea,1619,3.209246849
+Liechtenstein,1597,3.203304916
+Comoros,1533,3.185542155
+Equatorial Guinea,1508,3.178401342
+Turkmenistan,1500,3.176091259
+Palau,1454,3.162564407
+Guinea,1446,3.160168293
+Falkland Islands (Malvinas),1445,3.159867847
+Malawi,1445,3.159867847
+Faroe Islands,1418,3.151676231
+French Southern Territories,1330,3.123851641
+Kiribati,1288,3.109915863
+Seychelles,1284,3.108565024
+Marshall Islands,1234,3.09131516
+Sierra Leone,1194,3.077004327
+"Iran, Islamic Republic of",1162,3.065206128
+Timor-leste,1150,3.06069784
+Norfolk Island,1143,3.05804623
+Montserrat,1138,3.056142262
+"Micronesia, Federated States of",1135,3.054995862
+Serbia and Montenegro,1132,3.053846427
+Liberia,1112,3.046104787
+San Marino,1099,3.040997692
+Suriname,1089,3.03702788
+Pitcairn,1072,3.030194785
+Saint Lucia,1067,3.028164419
+South Sudan,1052,3.02201574
+Mayotte,1012,3.005180513
+Niue,985,2.99343623
+Saint Vincent and The Grenadines,936,2.971275849
+Saint Kitts and Nevis,931,2.968949681
+Tokelau,930,2.968482949
+Saint Martin,900,2.954242509
+Northern Mariana Islands,883,2.945960704
+Guinea-bissau,877,2.942999593
+Svalbard and Jan Mayen,825,2.916453949
+"Taiwan, Province of China",808,2.907411361
+Solomon Islands,796,2.900913068
+Mauritania,785,2.894869657
+Lesotho,777,2.890421019
+Macedonia,768,2.88536122
+Syrian Arab Republic,744,2.871572936
+Sao Tome and Principe,687,2.836956737
+Nauru,686,2.836324116
+Saint Helena,662,2.820857989
+Saint Barthelemy,607,2.783188691
+Palestine,572,2.757396029
+Saint Pierre and Miquelon,465,2.667452953
+Brunei Darussalam,355,2.550228353
+"Korea, Dem. People's Rep.",308,2.488550717
+"Congo, Dem. Rep. of The",260,2.414973348
+Libyan Arab Jamahiriya,235,2.371067862
+"Korea, Democratic People's Republic of",210,2.322219295
+Holy See (Vatican City State),210,2.322219295
+"Tanzania, United Republic of",207,2.315970345
+United States,18757164,7.273167176