Was trying out map bubbles as my latest work on the website. not sure if it worked or not. can't test now. pushing for posterity.

Author: trumpets

src/visualizations/MapChart.fs

@@ -53,6 +53,7 @@ let (|ConfirmedCasesMsgCase|DeceasedMsgCase|) str =
 
 type DisplayType =
     | AbsoluteValues
+    | Bubbles
     | RegionPopulationWeightedValues
     | RelativeIncrease
 with
@@ -61,6 +62,7 @@ with
     override this.ToString() =
        match this with
        | AbsoluteValues                 -> I18N.t "charts.map.absolute"
+       | Bubbles                        -> I18N.t "charts.map.bubbles"
        | RegionPopulationWeightedValues -> I18N.t "charts.map.populationShare"
        | RelativeIncrease               -> I18N.t "charts.map.relativeIncrease" 
 
@@ -329,6 +331,7 @@ let seriesData (state : State) =
                         let dlabel, value =
                             match state.DisplayType with
                             | AbsoluteValues                 -> ((Some absolute) |> Utils.zeroToNone), absolute
+                            | Bubbles                        -> None, absolute
                             | RegionPopulationWeightedValues -> None,  10. * value100k |> System.Math.Round |> int  //factor 10 for better resolution in graph
                             | RelativeIncrease               -> None, absolute  
                         let weeklyIncrease =    
@@ -352,6 +355,9 @@ let seriesData (state : State) =
                                 | AbsoluteValues -> 
                                     if absolute > 0 then float absolute
                                     else 0.0001
+                                | Bubbles ->
+                                    if absolute > 0 then float absolute
+                                    else 0.0001
                                 | RegionPopulationWeightedValues -> 
                                     if value100k > 0.0 then value100k 
                                     else 0.0001
@@ -396,17 +402,47 @@ let renderMap (state : State) =
 
         let series geoJson =
             {| visible = true
+               ``type`` = null
+               mapData = geoJson
+               data = data
+               keys = [| "code" ; "value" |]
+               joinBy = [| key ; "code" |]
+               colorKey = "value"
+               nullColor = "white"
+               borderColor = "#000"
+               borderWidth = 0.2
+               minSize = 1
+               maxSize = "6%"
+               mapline = {| animation = {| duration = 0 |} |}
+               states =
+                {| normal = {| animation = {| duration = 0 |} |}
+                   hover = {| borderColor = "black" ; animation = {| duration = 0 |} |} |}
+               colorAxis =
+                   match state.DisplayType with
+                   // white-ish background color for municipalities when we use
+                   // bubbles
+                   | Bubbles -> 1
+                   | _ -> 0
+           |}
+
+        let bubbleSeries geoJson =
+            {| visible = true
+               ``type`` = "mapbubble"
                mapData = geoJson
                data = data
                keys = [| "code" ; "value" |]
                joinBy = [| key ; "code" |]
+               colorKey = "value100k"
                nullColor = "white"
                borderColor = "#000"
                borderWidth = 0.2
+               minSize = 1
+               maxSize = "10%"
                mapline = {| animation = {| duration = 0 |} |}
                states =
                 {| normal = {| animation = {| duration = 0 |} |}
                    hover = {| borderColor = "black" ; animation = {| duration = 0 |} |} |}
+               colorAxis = 0
            |}
 
         let sparklineFormatter newCases =
@@ -575,9 +611,48 @@ let renderMap (state : State) =
         let colorMin = 
             match state.DisplayType with 
                 | AbsoluteValues -> 0.9
+                | Bubbles -> colorMax / 7000.
                 | RegionPopulationWeightedValues -> colorMax / 7000.
                 | RelativeIncrease -> -100.
 
+        let whiteMuniColorAxis =
+            {|
+                ``type`` = "linear"
+                visible = false
+                stops = [| (0.000, "#f8f8f8") |]
+            |} |> pojo
+
+        let relativeColorAxis =
+            {|
+                ``type`` = "logarithmic"
+                tickInterval = 0.4
+                max = colorMax
+                min = colorMin
+                endOnTick = false
+                startOnTick = false
+                stops =
+                    [|
+                        (0.000,"#ffffff")
+                        (0.001,"#fff7db")
+                        (0.200,"#ffefb7")
+                        (0.280,"#ffe792")
+                        (0.360,"#ffdf6c")
+                        (0.440,"#ffb74d")
+                        (0.520,"#ff8d3c")
+                        (0.600,"#f85d3a")
+                        (0.680,"#ea1641")
+                        (0.760,"#d0004e")
+                        (0.840,"#ad005b")
+                        (0.920,"#800066")
+                        (0.999,"#43006e")
+                    |]
+                reversed = true
+                labels =
+                    {|
+                        formatter = fun() -> jsThis?value
+                    |} |> pojo
+            |} |> pojo
+
         let colorAxis = 
             match state.ContentType with
                 | Deceased ->
@@ -634,36 +709,8 @@ let renderMap (state : State) =
                                 |} |> pojo
                         |} |> pojo 
 
-                    | RegionPopulationWeightedValues  -> 
-                        {|
-                            ``type`` = "logarithmic"
-                            tickInterval = 0.4
-                            max = colorMax
-                            min = colorMin 
-                            endOnTick = false
-                            startOnTick = false
-                            stops =
-                                [|
-                                    (0.000,"#ffffff")
-                                    (0.001,"#fff7db")
-                                    (0.200,"#ffefb7") 
-                                    (0.280,"#ffe792") 
-                                    (0.360,"#ffdf6c") 
-                                    (0.440,"#ffb74d") 
-                                    (0.520,"#ff8d3c") 
-                                    (0.600,"#f85d3a") 
-                                    (0.680,"#ea1641") 
-                                    (0.760,"#d0004e") 
-                                    (0.840,"#ad005b") 
-                                    (0.920,"#800066") 
-                                    (0.999,"#43006e")
-                                |]
-                            reversed = true
-                            labels = 
-                                {| 
-                                    formatter = fun() -> jsThis?value
-                                |} |> pojo
-                        |} |> pojo
+                    | Bubbles -> relativeColorAxis
+                    | RegionPopulationWeightedValues -> relativeColorAxis
                     | RelativeIncrease -> 
                         {| 
                             ``type`` = "linear"
@@ -708,9 +755,14 @@ let renderMap (state : State) =
         {| Highcharts.optionsWithOnLoadEvent "covid19-map" with
             title = null
             subtitle = {| text = subtitle ; align="left"; verticalAlign="bottom" |}
-            series = [| series geoJson |]
+            series =
+                match state.DisplayType with
+                | Bubbles -> [| series geoJson; bubbleSeries geoJson |]
+                | _ -> [| series geoJson |]
             legend = legend
-            colorAxis = colorAxis
+            colorAxis = [|
+                colorAxis; whiteMuniColorAxis
+            |]
             tooltip =
                 {|
                     formatter = fun () -> tooltipFormatter state jsThis
@@ -753,7 +805,7 @@ let renderSelectors options currentOption dispatch =
 let renderDisplayTypeSelector state dispatch =
     let selectors = 
         if state.ContentType = ConfirmedCases && state.MapToDisplay <> MapToDisplay.SkopjeMunicipality
-        then [ RelativeIncrease; AbsoluteValues; RegionPopulationWeightedValues ]
+        then [ RelativeIncrease; AbsoluteValues; RegionPopulationWeightedValues; Bubbles ]
         else [ AbsoluteValues; RegionPopulationWeightedValues ]
     Html.div [
         prop.className "chart-display-property-selector"