Add the gauge visualization to the score pages

Also:
- Create a generic tooltip
- Minor fixes to some of the other data visualizations

Relates to #52, #51

assets/js/data-viz/aster.js

@@ -44,9 +44,9 @@ let d3 = window.d3;
 /**
  * Creates an aster plot (aka flower plot)
  * @param {Object} options - The configuration for the aster plot
- * @property {HTMLElement} [container] - The element in which the aster plot should be
+ * @property {HTMLElement} container - The element in which the aster plot should be
  * rendered
- * @property {AsterDataItem[]} [data] - The data to use to create the plot
+ * @property {AsterDataItem[]} data - The data to use to create the plot
  * @property {number} [meanScore] - The number to show in the middle of the aster plot
  * @property {boolean} [legend] -  Set to false to not render a legend
  * @property {number} [width] - The relative width of the plot, in pixels

assets/js/data-viz/colorScale.js

@@ -34,12 +34,17 @@ const rangeScore = maxScore - minScore;
 const numSteps = redAndBlues.length - 1;
 const step = rangeScore / numSteps;
 
+// Returns the function that gets a legend color
+const getScale = function () {
+  return d3.scaleLinear()
+    .domain(d3.range(minScore, (maxScore + step), step))
+    .range(redAndBlues)
+    .unknown(missingValueColour);
+}
+
 // A function that, given an OHI score, will give the colour from our continuous colour
 // scale palette.
-const getLegendColor = d3.scaleLinear()
-  .domain(d3.range(minScore, (maxScore + step), step))
-  .range(redAndBlues)
-  .unknown(missingValueColour);
+const getLegendColor = getScale()
 
 // Create the legend
 const getLegend = function (titleClass = "title") {
@@ -53,4 +58,4 @@ const getLegend = function (titleClass = "title") {
   })
 }
 
-export default Object.freeze({ getLegend, getLegendColor })
+export default Object.freeze({ getLegend, getLegendColor, getScale })

assets/js/data-viz/dataviz.js

@@ -2,6 +2,7 @@
 window.d3 = require("d3")
 
 function init() {
+
   // If the scoresGlobe short code is used in this page, then render the interactive globe
   // with scores.
   const scoresGlobeEls = document.querySelectorAll(".global-scores");
@@ -43,6 +44,20 @@ function init() {
         })
       })
   }
+
+  // If this is a gauge plot, then render it
+  const scoreGaugeEls = document.querySelectorAll(".score-gauge");
+  if (scoreGaugeEls) {
+    import('./scoreGauge.js')
+      .then(function (scoreGauge) {
+        scoreGaugeEls.forEach(function (scoreGaugeEl) {
+          scoreGauge.default({
+            container: scoreGaugeEl,
+            regionId: scoreGaugeEl.dataset.regionId,
+          })
+        })
+      })
+  }
 }
 
 export default { init }