Issue 714: Group US territories under United States

_includes/charts.html

@@ -134,10 +134,18 @@ <h4>Countries</h4>
             </div>
           </figure>
 
+          <figure id="chart_us_and_territories"
+            data-block="us_and_territories"
+            data-source="{{ site.data_url }}/{{ data_prefix }}/top-countries-realtime.json">
+            <h4>United States &amp; Territories</h4>
+            <div class="data bar-chart">
+            </div>
+          </figure>
+
           <figure id="chart_countries"
             data-block="international_visits"
             data-source="{{ site.data_url }}/{{ data_prefix }}/top-countries-realtime.json">
-            <h4>International &amp; Territories</h4>
+            <h4>International</h4>
             <div class="data bar-chart">
             </div>
           </figure>

js/index.js

@@ -95,9 +95,13 @@ whenRendered(['browsers', 'ie'], () => {
 // chart once they're both rendered
 whenRendered(['countries', 'international_visits'], () => {
   d3.select('#chart_us')
-    .call(nestCharts, (d) => d.key === 'International & Territories', d3.select('#chart_countries'));
+    .call(nestCharts, (d) => d.key === 'International', d3.select('#chart_countries'));
 });
 
+whenRendered(['countries', 'us_and_territories'], () => {
+  d3.select('#chart_us')
+    .call(nestCharts, (d) => d.key === 'United States & Territories', d3.select('#chart_us_and_territories'));
+});
 /*
    * A very primitive, aria-based tab system!
    */

js/lib/blocks.js

@@ -6,6 +6,7 @@ import barChart from './barchart';
 import buildTimeSeries from './timeseries';
 import formatters from './formatters';
 import transformers from './transformers';
+import { isPartOfUnitedStates } from './territories';
 
 /*
  * Define block renderers for each of the different data types.
@@ -88,32 +89,41 @@ export default {
       cityListFiltered,
       (list) => list.map((x) => x.active_visitors),
     );
-    return proportions.slice(0, 10);
+    return proportions.slice(0, 13);
   }, 'city'),
 
   countries: renderBlock.buildBarChart((d) => {
     let totalVisits = 0;
     let USVisits = 0;
     d.data.forEach((c) => {
       totalVisits += parseInt(c.active_visitors, 10);
-      if (c.country === 'United States') {
-        USVisits = c.active_visitors;
+      if (isPartOfUnitedStates(c.country)) {
+        USVisits += parseInt(c.active_visitors, 10);
       }
     });
     const international = totalVisits - USVisits;
     const data = {
-      'United States': USVisits,
-      'International & Territories': international,
+      'United States & Territories': USVisits,
+      International: international,
     };
     return transformers.findProportionsOfMetricFromValue(transformers.listify(data));
   }),
 
+  us_and_territories: renderBlock.buildBarChartWithLabel((d) => {
+    let values = transformers.findProportionsOfMetric(
+      d.data,
+      (list) => list.map((x) => x.active_visitors),
+    );
+    values = values.filter((c) => isPartOfUnitedStates(c.country));
+    return values.slice(0, 3);
+  }, 'country'),
+
   international_visits: renderBlock.buildBarChartWithLabel((d) => {
     let values = transformers.findProportionsOfMetric(
       d.data,
       (list) => list.map((x) => x.active_visitors),
     );
-    values = values.filter((c) => c.country !== 'United States');
+    values = values.filter((c) => !isPartOfUnitedStates(c.country));
     return values.slice(0, 15);
   }, 'country'),
 

js/lib/territories.js

@@ -0,0 +1,17 @@
+const US_AND_TERRITORIES = [
+  'United States',
+  'Puerto Rico',
+  'Guam',
+  'U.S. Virgin Islands',
+  'American Samoa',
+  'Northern Mariana Islands',
+];
+
+const isPartOfUnitedStates = function (name) {
+  return new RegExp(name).test(US_AND_TERRITORIES.join('|'));
+};
+
+export {
+  US_AND_TERRITORIES,
+  isPartOfUnitedStates,
+};