Display median o - b and quartiles (#289)

Replace the mean line with the median, and display Q1 and Q3 in addition to min and max to provide a better sense for the distribution of observations.
NOAA-GSL · Nov 15, 2023 · 736bc39 · 736bc39
2 parents d8ce5e3 + f491f18
commit 736bc39
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 45 deletions.
diff --git a/src/unified_graphics/diag.py b/src/unified_graphics/diag.py
@@ -357,6 +357,6 @@ def history(
         .describe()
         .droplevel(0, axis=1)  # Drop a level from the columns created by the groupby
         .reset_index()
-    )
+    )[["initialization_time", "min", "25%", "50%", "75%", "max", "mean", "count"]]
 
-    return df[["initialization_time", "min", "max", "mean", "count"]]
+    return df
diff --git a/src/unified_graphics/static/js/component/ChartMap.js b/src/unified_graphics/static/js/component/ChartMap.js
@@ -228,7 +228,6 @@ export default class ChartMap extends ChartElement {
     const fill = this.scale;
     const radius = 2;
 
-    console.log(observations);
     observations.forEach((feature) => {
       const value = get(feature, fillProp);
       const [x, y] = this.#projection([feature.longitude, feature.latitude]);

diff --git a/src/unified_graphics/static/js/component/ChartTimeSeries.js b/src/unified_graphics/static/js/component/ChartTimeSeries.js
@@ -2,7 +2,6 @@ import {
   area,
   axisBottom,
   axisLeft,
-  curveBumpX,
   extent,
   format,
   line,
@@ -37,7 +36,8 @@ export default class ChartTimeSeries extends ChartElement {
   static #TEMPLATE = `<svg>
     <g class="data">
       <path id="range"></path>
-      <path id="mean"></path>
+      <path id="iqr"></path>
+      <path id="median"></path>
       <line id="current"></line>
     </g>
     <g class="x-axis"></g>
@@ -50,11 +50,15 @@ export default class ChartTimeSeries extends ChartElement {
   }
 
   #range {
-    fill: #dfe1e2;
+    fill: #f0f0f0;
+  }
+
+  #iqr {
+    fill: #a9aeb1;
   }
 
   #current,
-  #mean {
+  #median {
     fill: transparent;
     stroke: #1b1b1b;
   }`;
@@ -194,19 +198,22 @@ export default class ChartTimeSeries extends ChartElement {
     const rangeArea = area()
       .x((d) => xScale(d.initialization_time))
       .y0((d) => yScale(d.min))
-      .y1((d) => yScale(d.max))
-      .curve(curveBumpX);
-    const meanLine = line()
+      .y1((d) => yScale(d.max));
+    const interquartileRange = area()
+      .x((d) => xScale(d.initialization_time))
+      .y0((d) => yScale(d["25%"]))
+      .y1((d) => yScale(d["75%"]));
+    const medianLine = line()
       .x((d) => xScale(d.initialization_time))
-      .y((d) => yScale(d.mean))
-      .curve(curveBumpX);
+      .y((d) => yScale(d["50%"]));
 
     this.#svg.attr("viewBox", `0 0 ${this.width} ${this.height}`);
     this.#svg
       .select(".data")
       .attr("transform", `translate(${this.margin.left}, ${this.margin.top})`);
     this.#svg.select("#range").datum(data).attr("d", rangeArea);
-    this.#svg.select("#mean").datum(data).attr("d", meanLine);
+    this.#svg.select("#iqr").datum(data).attr("d", interquartileRange);
+    this.#svg.select("#median").datum(data).attr("d", medianLine);
 
     if (this.current) {
       this.#svg

diff --git a/tests/test_diag.py b/tests/test_diag.py
@@ -263,19 +263,21 @@ def test_history(tmp_path, test_dataset, diag_parquet):
     run_list = [
         {
             "initialization_time": "2022-05-16T04:00",
-            "observation": [10, 20],
-            "forecast_unadjusted": [5, 10],
-            "is_used": [True, True],
-            # O - F [5, 10]
+            "observation": [10, 14, 18, 20],
+            "forecast_unadjusted": [5, 7, 10, 10],
+            "longitude": [0, 0, 0, 0],
+            "latitude": [0, 0, 0, 0],
+            "is_used": [True, True, True, True],
+            # O - F [5, 7, 8, 10]
         },
         {
             "initialization_time": "2022-05-16T07:00",
-            "observation": [1, 2, 3],
-            "forecast_unadjusted": [5, 10, 3],
-            "longitude": [0, 0, 0],
-            "latitude": [0, 0, 0],
-            "is_used": [True, True, True],
-            # O - F [-4, -8, 0]
+            "observation": [1, 2, 3, 4, 5],
+            "forecast_unadjusted": [3, 5, 6, 7, 10],
+            "longitude": [0, 0, 0, 0, 0],
+            "latitude": [0, 0, 0, 0, 0],
+            "is_used": [True, True, True, True, True],
+            # O - F [-2, -3, -3, -3, -5]
         },
     ]
 
@@ -309,10 +311,13 @@ def test_history(tmp_path, test_dataset, diag_parquet):
         pd.DataFrame(
             {
                 "initialization_time": ["2022-05-16T04:00", "2022-05-16T07:00"],
-                "min": [5.0, -8.0],
-                "max": [10.0, 0.0],
-                "mean": [7.5, -4.0],
-                "count": [2.0, 3.0],
+                "min": [5.0, -5.0],
+                "25%": [6.5, -3.0],
+                "50%": [7.5, -3.0],
+                "75%": [8.5, -3.0],
+                "max": [10.0, -2.0],
+                "mean": [7.5, -3.2],
+                "count": [4.0, 5.0],
             }
         ),
     )
@@ -333,19 +338,21 @@ def test_history_s3(aws_credentials, moto_server, s3_client, test_dataset, monke
     run_list = [
         {
             "initialization_time": "2022-05-16T04:00",
-            "observation": [10, 20],
-            "forecast_unadjusted": [5, 10],
-            "is_used": [True, True],
-            # O - F [5, 10]
+            "observation": [10, 14, 18, 20],
+            "forecast_unadjusted": [5, 7, 10, 10],
+            "longitude": [0, 0, 0, 0],
+            "latitude": [0, 0, 0, 0],
+            "is_used": [True, True, True, True],
+            # O - F [5, 7, 8, 10]
         },
         {
             "initialization_time": "2022-05-16T07:00",
-            "observation": [1, 2, 3],
-            "forecast_unadjusted": [5, 10, 3],
-            "longitude": [0, 0, 0],
-            "latitude": [0, 0, 0],
-            "is_used": [True, True, True],
-            # O - F [-4, -8, 0]
+            "observation": [1, 2, 3, 4, 5],
+            "forecast_unadjusted": [3, 5, 6, 7, 10],
+            "longitude": [0, 0, 0, 0, 0],
+            "latitude": [0, 0, 0, 0, 0],
+            "is_used": [True, True, True, True, True],
+            # O - F [-2, -3, -3, -3, -5]
         },
     ]
 
@@ -388,10 +395,13 @@ def test_history_s3(aws_credentials, moto_server, s3_client, test_dataset, monke
         pd.DataFrame(
             {
                 "initialization_time": ["2022-05-16T04:00", "2022-05-16T07:00"],
-                "min": [5.0, -8.0],
-                "max": [10.0, 0.0],
-                "mean": [7.5, -4.0],
-                "count": [2.0, 3.0],
+                "min": [5.0, -5.0],
+                "25%": [6.5, -3.0],
+                "50%": [7.5, -3.0],
+                "75%": [8.5, -3.0],
+                "max": [10.0, -2.0],
+                "mean": [7.5, -3.2],
+                "count": [4.0, 5.0],
             }
         ),
     )
diff --git a/tests/test_unified_graphics.py b/tests/test_unified_graphics.py
@@ -170,16 +170,22 @@ def test_scalar_history(model, diag_parquet, client, test_dataset):
         {
             "initialization_time": "2022-05-16T04:00",
             "min": 5.0,
+            "25%": 6.25,
+            "50%": 7.5,
+            "75%": 8.75,
             "max": 10.0,
             "mean": 7.5,
-            "count": 2,
+            "count": 2.0,
         },
         {
             "initialization_time": "2022-05-16T07:00",
             "min": -8.0,
+            "25%": -6.0,
+            "50%": -4.0,
+            "75%": -2.0,
             "max": 0.0,
             "mean": -4.0,
-            "count": 3,
+            "count": 3.0,
         },
     ]
 
@@ -220,16 +226,22 @@ def test_scalar_history_unused(model, diag_parquet, client, test_dataset):
         {
             "initialization_time": "2022-05-16T04:00",
             "min": 5.0,
+            "25%": 5.0,
+            "50%": 5.0,
+            "75%": 5.0,
             "max": 5.0,
             "mean": 5.0,
-            "count": 1,
+            "count": 1.0,
         },
         {
             "initialization_time": "2022-05-16T07:00",
             "min": -8.0,
+            "25%": -8.0,
+            "50%": -8.0,
+            "75%": -8.0,
             "max": -8.0,
             "mean": -8.0,
-            "count": 1,
+            "count": 1.0,
         },
     ]