Merge pull request #96 from openghg/scatter

Replace the CH4 density map with scatter

src/components/LiveData/LiveData.js

@@ -6,9 +6,9 @@ import LeafletMap from "../LeafletMap/LeafletMap";
 import styles from "../../Dashboard.module.css";
 import ObsBox from "../ObsBox/ObsBox";
 import ObsExplainer from "../ObsExplainer/ObsExplainer";
-import DensityMap from "../DensityMap/DensityMap";
 import GraphContainer from "../GraphContainer/GraphContainer";
 import MobileExplainer from "../MobileExplainer/MobileExplainer";
+import ScatterMap from "../ScatterMap/ScatterMap";
 
 class LiveData extends React.Component {
   createMapExplainer() {
@@ -67,9 +67,9 @@ class LiveData extends React.Component {
             siteInfoOverlay={this.props.setSiteOverlay}
           />
         </div>
-        <div className={styles.mobileMap} >
+        <div className={styles.mobileMap}>
           <GraphContainer divName="densityMapContent">
-            <DensityMap />
+            <ScatterMap />
           </GraphContainer>
         </div>
         <div className={styles.mobileExplainer} id="densityMapContent">

src/components/MobileExplainer/MobileExplainer.js

@@ -13,6 +13,7 @@ class MobileExplainer extends React.Component {
         <div className={styles.intro}>
           This map shows methane detected by a mobile study completed in August, 2021. 
           Methane was measured using a car-mounted instrument which was driven 350km around Glasgow to gather this data.
+          The diameter of the circles on the map is related to the size of the methane emissions measured.
           <br />
           <br />
           <a

src/components/ObsBox/ObsBox.js

@@ -36,12 +36,6 @@ class ObsBox extends React.Component {
         for (const [site, sectorData] of Object.entries(networkData)) {
           for (const [sector, value] of Object.entries(sectorData)) {
             if (value) {
-              //   if (!speciesEmissions.hasOwnProperty(site)) {
-              //     speciesEmissions[site] = {};
-              //   }
-
-              //   speciesEmissions[network][site][sector] = data;
-
               const data = processedData[selectedSpecies][network][site][sector];
               set(speciesEmissions, `${network}.${site}.${sector}`, data);
 

src/components/ScatterMap/ScatterMap.js

@@ -0,0 +1,84 @@
+import React from "react";
+import Plot from "react-plotly.js";
+
+import styles from "./ScatterMap.module.css";
+
+import ch4MobileGlasgow from "../../data/ch4_mobile_glasgow.json";
+
+class ScatterMap extends React.Component {
+  constructor(props) {
+    super(props);
+
+    const ch4Data = ch4MobileGlasgow["ch4"]["data"];
+
+    const measurements = ch4Data["z"];
+    const latitude = ch4Data["lat"];
+    const longitude = ch4Data["lon"];
+
+    const hovertemplate =
+      "<b>Latitude</b>: %{lat:.5f}<br>" +
+      "<b>Longitude</b>: %{lon:.5f}<br><br>" +
+      "<b>Concentration: </b>: %{text:.2f} ppb <br>" +
+      "(enhancement over background)" +
+      "<extra></extra>";
+
+    const sizeVals = [];
+    const divisor = 125;
+    for (var i = 0; i < measurements.length; i++) {
+      sizeVals.push(measurements[i] / divisor);
+    }
+
+    const dataObj = {
+      type: "scattermapbox",
+      mode: "markers",
+      coloraxis: "coloraxis",
+      hovertemplate: hovertemplate,
+      text: measurements,
+      lon: longitude,
+      lat: latitude,
+      marker: {
+        color: measurements,
+        colorscale: "Viridis",
+        cmin: Math.min(measurements),
+        cmax: Math.max(measurements),
+        reversescale: false,
+        size: sizeVals,
+        colorbar: {
+          thickness: 10,
+          titleside: "right",
+          outlinecolor: "rgba(68,68,68,0)",
+          ticks: "outside",
+          ticklen: 3,
+          shoticksuffix: "last",
+          title: { side: "right", text: "Methane (ppb)", font: { size: 16 } },
+        },
+      },
+    };
+
+    this.state = { plotData: [dataObj] };
+  }
+
+  render() {
+    const height = 400;
+    const width = this.props.width;
+    const plotData = this.state.plotData;
+
+    const layout = {
+      mapbox: { center: { lon: -4.212836, lat: 55.843658 }, style: "open-street-map", zoom: 10 },
+      coloraxis: {
+        colorscale: "Viridis",
+        colorbar: { title: { side: "right", text: "Methane (ppb)", font: { size: 16 } } },
+      },
+      margin: { t: 30, b: 30, l: 30, r: 30 },
+      width: width,
+      height: height,
+    };
+    return (
+      <div className={styles.content}>
+        <Plot data={plotData} layout={layout} />
+      </div>
+    );
+  }
+}
+
+export default ScatterMap;

src/components/ScatterMap/ScatterMap.module.css

@@ -0,0 +1,4 @@
+.content {
+  width: 100%;
+  height: 100%;
+}