Deneb #29: Action Dots

Episodio número veintinueve (29) sobre Deneb. Aquí, crearemos un gráfico llamado Action Dots o Puntos de acción.

Version 1 Point with color: JSON template to import in Deneb

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "usermeta": {
    "deneb": {
      "build": "1.4.0.0",
      "metaVersion": 1,
      "provider": "vegaLite",
      "providerVersion": "5.4.0"
    },
    "interactivity": {
      "tooltip": true,
      "contextMenu": true,
      "selection": false,
      "highlight": false,
      "dataPointLimit": 50
    },
    "information": {
      "name": "Actions Dots - version a color",
      "description": "Action Dots basado en el artículo Why I Stopped Using Bullet Graphs (and What I Now Use Instead) de Nick Desbarats",
      "author": "Sentido Analitica - José Rafael Escalante",
      "uuid": "65222c8a-aa4e-4e00-b9f3-8d0091fab150",
      "generated": "2023-02-26T00:50:14.002Z",
      "previewImageBase64PNG": "data:image/png;base64,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"
    },
    "dataset": [
      {
        "key": "__0__",
        "name": "City",
        "description": "",
        "type": "text",
        "kind": "column"
      },
      {
        "key": "__1__",
        "name": "Units",
        "description": "",
        "type": "numeric",
        "kind": "column"
      },
      {
        "key": "__2__",
        "name": "Best case",
        "description": "",
        "type": "numeric",
        "kind": "column"
      },
      {
        "key": "__3__",
        "name": "Good",
        "description": "",
        "type": "numeric",
        "kind": "column"
      },
      {
        "key": "__4__",
        "name": "Middle",
        "description": "",
        "type": "numeric",
        "kind": "column"
      },
      {
        "key": "__5__",
        "name": "Bad",
        "description": "",
        "type": "numeric",
        "kind": "column"
      },
      {
        "key": "__6__",
        "name": "Crisis",
        "description": "",
        "type": "numeric",
        "kind": "column"
      }
    ]
  },
  "config": {
    "view": {"stroke": "transparent"},
    "font": "Segoe UI",
    "arc": {},
    "area": {
      "line": true,
      "opacity": 0.6
    },
    "bar": {},
    "line": {
      "strokeWidth": 3,
      "strokeCap": "round",
      "strokeJoin": "round"
    },
    "path": {},
    "point": {
      "filled": true,
      "size": 75
    },
    "rect": {},
    "shape": {},
    "symbol": {
      "strokeWidth": 1.5,
      "size": 50
    },
    "text": {
      "font": "Segoe UI",
      "fontSize": 14
    },
    "axis": {
      "ticks": false,
      "grid": false,
      "domain": false,
      "labelFontSize": 12,
      "title": null,
      "titleFont": "wf_standard-font, helvetica, arial, sans-serif",
      "titleFontSize": 16,
      "titleFontWeight": "normal"
    },
    "axisQuantitative": {
      "tickCount": 3,
      "grid": false,
      "gridDash": [1, 5],
      "labelFlush": false
    },
    "axisX": {
      "labelPadding": 5,
      "labels": false
    },
    "axisY": {"labelPadding": 10},
    "header": {
      "titleFont": "wf_standard-font, helvetica, arial, sans-serif",
      "titleFontSize": 16,
      "labelFont": "Segoe UI",
      "labelFontSize": 13.333333333333332
    },
    "legend": {
      "titleFont": "Segoe UI",
      "titleFontWeight": "bold",
      "labelFont": "Segoe UI",
      "labelFontSize": 13.333333333333332,
      "symbolType": "circle",
      "symbolSize": 75
    }
  },
  "data": {"name": "dataset"},
  "hconcat": [
    {
      "encoding": {
        "y": {
          "field": "__0__",
          "sort": {
            "op": "sum",
            "field": "__1__",
            "order": "descending"
          }
        }
      },
      "layer": [
        {
          "mark": {
            "type": "bar",
            "tooltip": true,
            "color": "#d9d9d9",
            "height": {"band": 0.6},
            "yOffset": 2,
            "xOffset": 5
          },
          "encoding": {
            "x": {
              "field": "__1__",
              "type": "quantitative"
            }
          }
        },
        {
          "mark": {
            "type": "text",
            "align": "center",
            "baseline": "top",
            "yOffset": -3,
            "xOffset": 120,
            "fontSize": 11,
            "fontWeight": "bold",
            "color": "#444444"
          },
          "encoding": {
            "text": {
              "field": "__1__",
              "type": "quantitative",
              "format": "0,0",
              "formatType": "pbiFormat"
            }
          }
        },
        {
          "mark": {
            "type": "point",
            "yOffset": 2,
            "xOffset": 150,
            "size": 120
          },
          "encoding": {
            "color": {
              "condition": [
                {
                  "test": "datum['__1__'] > datum['__2__']",
                  "value": "green"
                },
                {
                  "test": "datum['__1__'] > datum['__3__']",
                  "value": "#32cd32"
                },
                {
                  "test": "datum['__1__'] > datum['__4__']",
                  "value": "transparent"
                },
                {
                  "test": "datum['__1__'] > datum['__5__']",
                  "value": "#F08080"
                },
                {
                  "test": "datum['__1__'] > datum['__6__']",
                  "value": "red"
                },
                {
                  "test": "datum['__1__'] <= datum['__6__']",
                  "value": "red"
                }
              ]
            }
          }
        }
      ]
    }
  ]
}

Version 2 Pattern Fills Square: JSON template to import in Deneb

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "usermeta": {
    "deneb": {
      "build": "1.4.0.0",
      "metaVersion": 1,
      "provider": "vegaLite",
      "providerVersion": "5.4.0"
    },
    "interactivity": {
      "tooltip": true,
      "contextMenu": true,
      "selection": false,
      "highlight": false,
      "dataPointLimit": 50
    },
    "information": {
      "name": "Action Dots - pattern fills",
      "description": "Action Dots basado en el artículo Why I Stopped Using Bullet Graphs (and What I Now Use Instead) de Nick Desbarats",
      "author": "Sentido Analitica - José Rafael Escalante",
      "uuid": "2e9e9496-1060-4c11-b3ad-3457b3a1bbf1",
      "generated": "2023-02-26T00:52:56.495Z",
      "previewImageBase64PNG": "data:image/png;base64,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"
    },
    "dataset": [
      {
        "key": "__0__",
        "name": "City",
        "description": "",
        "type": "text",
        "kind": "column"
      },
      {
        "key": "__1__",
        "name": "Units",
        "description": "",
        "type": "numeric",
        "kind": "column"
      },
      {
        "key": "__2__",
        "name": "Best case",
        "description": "",
        "type": "numeric",
        "kind": "column"
      },
      {
        "key": "__3__",
        "name": "Good",
        "description": "",
        "type": "numeric",
        "kind": "column"
      },
      {
        "key": "__4__",
        "name": "Middle",
        "description": "",
        "type": "numeric",
        "kind": "column"
      },
      {
        "key": "__5__",
        "name": "Bad",
        "description": "",
        "type": "numeric",
        "kind": "column"
      },
      {
        "key": "__6__",
        "name": "Crisis",
        "description": "",
        "type": "numeric",
        "kind": "column"
      }
    ]
  },
  "config": {
    "view": {"stroke": "transparent"},
    "font": "Segoe UI",
    "arc": {},
    "area": {
      "line": true,
      "opacity": 0.6
    },
    "bar": {},
    "line": {
      "strokeWidth": 3,
      "strokeCap": "round",
      "strokeJoin": "round"
    },
    "path": {},
    "point": {
      "filled": true,
      "size": 75
    },
    "rect": {},
    "shape": {},
    "symbol": {
      "strokeWidth": 1.5,
      "size": 50
    },
    "text": {
      "font": "Segoe UI",
      "fontSize": 14
    },
    "axis": {
      "ticks": false,
      "grid": false,
      "domain": false,
      "labelFontSize": 12,
      "title": null,
      "titleFont": "wf_standard-font, helvetica, arial, sans-serif",
      "titleFontSize": 16,
      "titleFontWeight": "normal"
    },
    "axisQuantitative": {
      "tickCount": 3,
      "grid": false,
      "gridDash": [1, 5],
      "labelFlush": false
    },
    "axisX": {
      "labelPadding": 5,
      "labels": false
    },
    "axisY": {"labelPadding": 10},
    "header": {
      "titleFont": "wf_standard-font, helvetica, arial, sans-serif",
      "titleFontSize": 16,
      "labelFont": "Segoe UI",
      "labelFontSize": 13.333333333333332
    },
    "legend": {
      "titleFont": "Segoe UI",
      "titleFontWeight": "bold",
      "labelFont": "Segoe UI",
      "labelFontSize": 13.333333333333332,
      "symbolType": "circle",
      "symbolSize": 75
    }
  },
  "data": {"name": "dataset"},
  "hconcat": [
    {
      "encoding": {
        "y": {
          "field": "__0__",
          "sort": {
            "op": "sum",
            "field": "__1__",
            "order": "descending"
          }
        }
      },
      "layer": [
        {
          "mark": {
            "type": "bar",
            "tooltip": true,
            "color": "#d9d9d9",
            "height": {"band": 0.6},
            "yOffset": 2,
            "xOffset": 5
          },
          "encoding": {
            "x": {
              "field": "__1__",
              "type": "quantitative"
            }
          }
        },
        {
          "description": "Line Crisis",
          "mark": {
            "type": "rect",
            "tooltip": true,
            "color": "#252525",
            "height": 10,
            "width": 1,
            "yOffset": 2,
            "xOffset": 5
          },
          "encoding": {
            "x": {
              "field": "__6__",
              "type": "quantitative"
            }
          }
        },
        {
          "description": "Line Best case",
          "mark": {
            "type": "rect",
            "tooltip": true,
            "color": "#252525",
            "height": 10,
            "width": 2,
            "yOffset": 2,
            "xOffset": 5
          },
          "encoding": {
            "x": {
              "field": "__2__",
              "type": "quantitative"
            }
          }
        },
        {
          "mark": {
            "type": "text",
            "align": "center",
            "baseline": "top",
            "yOffset": -3,
            "xOffset": 120,
            "fontSize": 11,
            "fontWeight": "bold",
            "color": "#444444"
          },
          "encoding": {
            "text": {
              "field": "__1__",
              "type": "quantitative",
              "format": "0,0",
              "formatType": "pbiFormat"
            }
          }
        },
        {
          "mark": {
            "type": "square",
            "yOffset": 2,
            "xOffset": 150,
            "size": 120
          },
          "encoding": {
            "color": {
              "condition": [
                {
                  "test": "datum['__1__'] > datum['__2__']",
                  "value": "black"
                },
                {
                  "test": "datum['__1__'] > datum['__3__']",
                  "value": "url(#horizontal-stripe-9)"
                },
                {
                  "test": "datum['__1__'] > datum['__4__']",
                  "value": "white"
                },
                {
                  "test": "datum['__1__'] > datum['__5__']",
                  "value": "url(#horizontal-stripe-1)"
                },
                {
                  "test": "datum['__1__'] > datum['__6__']",
                  "value": "url(#crosshatch)"
                },
                {
                  "test": "datum['__1__'] <= datum['__6__']",
                  "value": "url(#crosshatch)"
                }
              ]
            }
          }
        }
      ]
    }
  ]
}

Version 3 SVG: JSON template to import in Deneb

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "usermeta": {
    "deneb": {
      "build": "1.4.0.0",
      "metaVersion": 1,
      "provider": "vegaLite",
      "providerVersion": "5.4.0"
    },
    "interactivity": {
      "tooltip": true,
      "contextMenu": true,
      "selection": false,
      "highlight": false,
      "dataPointLimit": 50
    },
    "information": {
      "name": "Action Dots - version SVG",
      "description": "Action Dots basado en el artículo Why I Stopped Using Bullet Graphs (and What I Now Use Instead) de Nick Desbarats",
      "author": "Sentido Analitica - José Rafael Escalante",
      "uuid": "8c7d0989-68a2-424a-add8-0f16b66392aa",
      "generated": "2023-02-26T00:53:57.345Z",
      "previewImageBase64PNG": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIwAAABKCAYAAABpcbyXAAAAAXNSR0IArs4c6QAADpBJREFUeF7tnXuMXGUZxp/vnN1StgWrIEoplG53OltBVERQFGh3dwpqCkSN+AcioDEi8R40GKlAhBSFhH+IGtB4QRPUSMVLLN2FAoUCBov10p1LC1Zdb4gC2tvOnM/8xu/U2d2Zzuzs2Z0zw/mSTTsz5zbv98x7vvd5n/c9RslILDANC5hpbJtsmlhACWASEEzLAglgpmWuZONDAeYVks6S9EtJuxow1bGSDkj6h6SjJM2T9Oca+x0maVxScKjj5vP5lzdw3mQTSalU6u9RGGLx4sU9PT09w8YYT9LzzJPnee/JZrMvcPxDAWaJJHbql/R7SX2SCu7frKSTJO2U1O2AcaKkv0g6WdIfJfmSjpH0H0lHSNouaYWkPZLeIOkxd0EcZ0TSPyd/4Ww2u1fS/CgM0eHHuDOdTr83iu/Y29t7mud5QaFQwFGot7c31dXVdUIul2OODgkYAHCK8wI5SW9y3uMpSXiTrZJeIwkvMCrptZLGJL1E0h8kLZP0tAMO6B90QAIAAPVXkgAlQAI0jyaAaXrKJwBmaGjoBGvthyUNj4yMDA8NDV1ujDnJGHN7EAQXW2uZfH7Mp/q+f/29997Lj7o8+vr6HikUCmdWXkkqlXo0n8+/sRHAAAK8DJPMpHMryUs6QVLReZceSV3us90OIAvcZwCG8YyktzjA4ZUACuB6taR/ub9tCWCiAcyqVasW+r5/red5d2/atOmRwcHBT3iet9QY81lr7dskPVsqlcaNMefv2bPnmq1bt+LJQ8Cca63dtnPnzr/xxvLly4/xPG9DPp8vg2gmi97DJaUlPdn016yzY3JLatiyEzxMJpNJWWvfLekpY8wz1tpTrbVHWGuf9DzvSt/315dKJX78Q/v27Vu3ZcuWg8uBvr6+I40xPzXG3FIqlZ7zPO/q/fv3X7R79+7yNjMBDPviWVi8zsrI5XK9s3LgDjzoihUrpgQma9eu7dm7d+8pw8PDU2739UzQ29uL99euXbt+XbntTABT75zJ5x1ogQQwHTips/mVogRMStIZkh5wUdKMr3vHjh3nzvggbXCAlStXbmyDyyxfYlSAWSwJoo9IB15mSNKf3HtEQ0RVREwQeysdEUjYTWjO6pv92H7CeJEsem9Pp9MfjBIwAwMDx3medwXhc6lUeqirq+syY8zxRDvFYvHaIAhu8H1/OXzYvn37rq9c9IbXkUqlvirpSEkL8/n82vD9qADzKrf4JeQmejoN8tGRcfx6Xu8iqh2SHpYEx3OOJPgdWGF4gYOhXXhxCWCahpHJZDLvInzu6uracuDAges8z3ulMWZDEASXBUFwm+d5kKfP+77/4MaNG+HEJgwWvSx4+/r6NhQKhQujBgy8yxoHEKImmF3+8Cghb8M2pALwNHgZeJ1/O/6GmP93iYdpGiATdhwYGDjT87wbjTE3BkHAfPjGmDM8z/tuEAQXWmvHjDEw94uKxeJNmzdvhiebMFKp1EZjjB8EwVWFQuEgRxaVh4nmm069JUHqdfr4XtS3pNBgMwmraxk91oDpdKS04/dLANOOs9bCa44aMCSoWEDtI7EliUUubC3rE9YvZL7JJXFfDbPdbJuMGFlgyZIlh8+fP/90Y8xz1todhUJhf9SL3vB4F0t6wkkaVrmIiIz2b11kxIlZQBFKk9RkAUzEdF+1KCmfz39mNuwYBEFkP5SxsbGbV69eTSK2I8ayZcuW+r7/Y2vtO3zf7wqC4A7P8z6Qy+VQJETGw4TGOtvxMCVJVtJxJMBcdppcB1lqIiJ0NXAzpNUh+x6qJtJqh7B6bGysO26AqeRhRkZG7h8aGkIpcE6xWPxmd3f3VdZafqBErVN4mOXLl5/X1dX1cCiYwtv09PQ8mMvlCMMjB8ybXWiN5IFfHQBB8kCSklvSUudVjnaaGkAFgLhNTUmeJYBp2mkd5GE2bdo0Mjg4CKn6fmPME8aYY621eHWWBVN4mFQq9Xg+nz+98syN6mGavtqodkwA05wlJ/Mw8+bNyx84cOAS3/c3BkFwuUvfQKxO4WGc4m5hoVDYzNnT6XTaWrukEcVdc1cb4V7ZbBbXGesxNja2Jm63pNBgzfAwaHoXLFhwgTHmk9ZaApKbPM97oBFNb6wnKrm41lggsmihNZefnHWuLRAFYBCKk2mmvIT/s3glR5SMDrRAFIChGoAICG0vWc37HXCIjlidU5ICkCD0CLOJjMhMI4mAh6F2iQw3MogJI5vN3hVDm+9Ip9PXxvC65uSSogAMlQUAg3ojapGoYULuQBkDJSRwLvAAlKM86HgZPocVBizPuow2HmoyYOJYl3Rd3AGzZs2aBUEQXC3pO8ViMR/qYSR921r7viAI7kPucCg9TC30RQWY55zehdtRWKwW1hwhwoGHgXuBqKNmiWoDwIDEgXTBt5znSQATkZ/IZDKXep63zfO80VAPI+lWdErWWn7c/NBr6mFmEzDNfkXASj6J0A0vNGXElIeJvYfBkA4w24vFIoWFZT1MEARbPc9bh07GWgtzW1MPE1fAUBtTM/mYzWZvaRaNs7jfC3G/JYXfvRkepp7dorgl1TtH8nkHWSABTAdN5lx8lekCZqGLgB53inIyzr9p8EKpJgijp00N7pNsFjMLTBcwKPzPl7TBrbLRtIT9YOBUiHh4TeocUBE6o8ul2wMhNqEcC104F8o3w9dV233kcjmqClo2rLWXp9PpLS27gBae2OWUlubzeURwB0czgKHmFr0LEgakCVQGAAwkCn91wiheE2LjffgcHoZzQdAhewAglKIgqIpzu4+z2hEwlTzM8PDwjkwmMxgEAZKFYUnXNFiX9H26dnietz6bzVIaVB7NAAY+hSI0kAfXAmMLp0KHIlICSDJ5TelCuRDKeRk6UlF6gpei9ITtYX7j3O6jLQFTEVZvQ9qwd+/eL1EyYoyhzORTjdQlpVKpH1ACZIz5Yi6XQ+DWFGDm1EnGgIdpd8BsHx8fX2SMOZmGQqVS6eu+75/ZSF1SOp0+Ynx8/MS26t4wOjqKRrhlwxjzdDvekkKDJTxMy6CTnLgtbknJNMXPAtNd9Fb7BixyofenyBPcxvVasNa0yujoKIvklo3+/v5yq9Fk/N8CMwUM+9NkD8A84sJnWq8SPYXtPsiMImOA5GMQetMvDW6GaIq2E1Xrklq56LXWDvb398deUzzXYJ4pYJh0mv4QOsOnEGoTWle2++A9JA9wMiQb0ckAKkg+xFWxrEtqZ8DU4mF837/bWkvfmJp1SfUAOFPAUIcEQQftD6FHrQtEHW1aw3YfVMyF3oXbEwTfyyr6x8SyLqmdAcOkh3qYSh7GlZccdqi6pNkGTL3jh5+TKoDEe50kqHZaktcdyS2prolqbhDqYSp5GEk/c318aCtXtS6p3hln6mHqHT/8nPMAGNYseKCGRj6fJ1nZspFKpaY0OWrZxTRx4oSHacJoyS7RWmCuPEy0V50crWUWqAaYsH0qUQ8i7cmPsKnW1wUuhlCZRe95LvohKqKkhAUwj9EhGYkEYspTS2p9+1wuRzeIlowVK1ZQ4ZCMSRaYDJjK9qloVcgmAxoiHqIZwuXKvi4YlQ6ZCI1D3QjZbMpO4FtY5P7CPRKH14Tc8DOE1lQOAEoASg0TIfaE0apFr7X2rf39/T9vV7RUCavXBUHQY4y5y1p7XSPyhlrffTJgKtunMqF0u8QrUFOEjgWvUdnXhZIRPodfKT/9QhKNhFjYUqP0EyI897AtPuMYbMcfz1Xi/ITkCLLwRglgIkJpGFbTUjWTyayz1i7yff/OUqn0+UbkDY0CprJ9KuwthBwTSl8XOkfxGrIu7OuCx+A9+JVQdglgAAa3ItIFeCeOwQBcaGkoXqNWCY0MYPtRtQtMPEzz6KlSZvJ2a+2XjTH8W7ftaqOAaf4KZ2FPB5g5X5hbay9s51tSOBVJWD0LoEwOOT0LzPmvd3qXl2wdNwtEARjWJFQKEFKzviG3RJiN4JvumdUGaxqy1OXOjMmInQVYV5InZJ1J9cfBjuxRAIaoiTCagvzj3WKXp8pyskUub8TillCa0hKqDUhUwu/AzZC1ripvGB0d/XgLTLmrv7//nhacNy6nhBZZ7+aUa6KBwjVOuD/tqoFqX4rwmR4xlJ4QZvP0WbgWoidOFmau4WnoGIA34hG3PMyCnjE81SQ2bVettRe0O2Bq8TClUumO7u7uj9SRN1wq6Z2TJpoGieU69yg8DMeByYW84zaE+yLsDo+NnAGPQsNn/gVAEHUQdoCM7WPTdrUTAMOEVONhkDcYY15aR95wlaTJDDuapk9HCZhZcaet4GE6DDCV7T7gX+4xxvAcpUPJGyBaPzppQu+UVO4GFpWHmRXA5HI5ZJ9zOoIgWN/ut6TQYDPgYS5xOUHuGDwg7SvhMWMNmDlFSnKyhiyQAKYhMyUb1fIwZJ7JUhPRECZXG4TLAG3yA85Z9BItkVgMM9dIIVDZVT5HgPcI3Qipa/E0yQy11gIEJESvzDXLAlQF5THZwxD2wqGslvRYhawBZX/YRhVAwatA6JDRphMD4TOREospEo8ch4QkoAurA+Bd6CAAUOBiqBygewMAqtruI5vNfmO27Ubft5UrV/IE1WT8zwLM6c2TjHGD49CmAAZ2D7KNAi6E2sgaABVeAnKOgcQBMDDCVh2EXWhfiNfZPmyrSrgMMAAIz02C2YXhBTRhkVhL230EQfChTgPMZB5mcHDwIvfAs695nndlHR7mCldrVokZnMcXankYhEyABi+BrAGSDdkD/XfhUWjgzKSzDeo5eBTew4VB+fOax6sAMiQSbAffwi0MLxU+cRYCj4K3lrb76ETAMLGVPMzAwMDZxpjzrbUP+L5/VB0e5mPuueOVgIFg/Vw1wMTKLc8FD9PhgNkeBMHR1lp+pKustT9sgIdh2UAqoHLcJqmsQIx1lJTNZrnQWR1BEGzvtFtSaLAZ8DCI4IbcHYN1KfVM5RFrwMwqUpKDN2WBBDBNme3Fu9N/Ae2zzJZ+efbwAAAAAElFTkSuQmCC"
    },
    "dataset": [
      {
        "key": "__0__",
        "name": "City",
        "description": "",
        "type": "text",
        "kind": "column"
      },
      {
        "key": "__1__",
        "name": "Units",
        "description": "",
        "type": "numeric",
        "kind": "column"
      },
      {
        "key": "__2__",
        "name": "Good",
        "description": "",
        "type": "numeric",
        "kind": "column"
      },
      {
        "key": "__3__",
        "name": "Best case",
        "description": "",
        "type": "numeric",
        "kind": "column"
      },
      {
        "key": "__4__",
        "name": "Middle",
        "description": "",
        "type": "numeric",
        "kind": "column"
      },
      {
        "key": "__5__",
        "name": "Bad",
        "description": "",
        "type": "numeric",
        "kind": "column"
      },
      {
        "key": "__6__",
        "name": "Crisis",
        "description": "",
        "type": "numeric",
        "kind": "column"
      }
    ]
  },
  "config": {
    "view": {"stroke": "transparent"},
    "font": "Segoe UI",
    "arc": {},
    "area": {
      "line": true,
      "opacity": 0.6
    },
    "bar": {},
    "line": {
      "strokeWidth": 3,
      "strokeCap": "round",
      "strokeJoin": "round"
    },
    "path": {},
    "point": {
      "filled": true,
      "size": 75
    },
    "rect": {},
    "shape": {},
    "symbol": {
      "strokeWidth": 1.5,
      "size": 50
    },
    "text": {
      "font": "Segoe UI",
      "fontSize": 14
    },
    "axis": {
      "ticks": false,
      "grid": false,
      "domain": false,
      "labelFontSize": 12,
      "title": null,
      "titleFont": "wf_standard-font, helvetica, arial, sans-serif",
      "titleFontSize": 16,
      "titleFontWeight": "normal"
    },
    "axisQuantitative": {
      "tickCount": 3,
      "grid": false,
      "gridDash": [1, 5],
      "labelFlush": false
    },
    "axisX": {
      "labelPadding": 5,
      "labels": false
    },
    "axisY": {"labelPadding": 10},
    "header": {
      "titleFont": "wf_standard-font, helvetica, arial, sans-serif",
      "titleFontSize": 16,
      "labelFont": "Segoe UI",
      "labelFontSize": 13.333333333333332
    },
    "legend": {
      "titleFont": "Segoe UI",
      "titleFontWeight": "bold",
      "labelFont": "Segoe UI",
      "labelFontSize": 13.333333333333332,
      "symbolType": "circle",
      "symbolSize": 75
    }
  },
  "data": {"name": "dataset"},
  "hconcat": [
    {
      "encoding": {
        "y": {
          "field": "__0__",
          "sort": {
            "op": "sum",
            "field": "__1__",
            "order": "descending"
          }
        }
      },
      "layer": [
        {
          "mark": {
            "type": "bar",
            "tooltip": true,
            "color": "#d9d9d9",
            "height": {"band": 0.6},
            "yOffset": 2,
            "xOffset": 5
          },
          "encoding": {
            "x": {
              "field": "__1__",
              "type": "quantitative"
            }
          }
        },
        {
          "mark": {
            "type": "text",
            "align": "center",
            "baseline": "top",
            "yOffset": -3,
            "xOffset": 120,
            "fontSize": 11,
            "fontWeight": "bold",
            "color": "#444444"
          },
          "encoding": {
            "text": {
              "field": "__1__",
              "type": "quantitative",
              "format": "0,0",
              "formatType": "pbiFormat"
            }
          }
        },
        {
          "description": "__3__",
          "mark": {
            "type": "point",
            "size": 0.003,
            "yOffset": -6,
            "xOffset": 144,
            "shape": {
              "expr": "datum['__1__'] > datum['__3__'] ? 'M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 48C141.1 48 48 141.1 48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48z' : 'M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 48C141.1 48 48 141.1 48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48z'"
            },
            "color": {
              "expr": "datum['__1__'] > datum['__3__'] ? '#252525' : 'transparent'"
            }
          }
        },
        {
          "description": "__2__",
          "mark": {
            "type": "point",
            "size": 0.0007,
            "yOffset": -2,
            "xOffset": 148,
            "shape": {
              "expr": "datum['__1__'] > datum['__2__'] && datum['__1__'] < datum['__3__'] ? 'M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 48C141.1 48 48 141.1 48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48z' : 'M512 256C512 397.4 397.4 512 256 512C114.6 512 0 397.4 0 256C0 114.6 114.6 0 256 0C397.4 0 512 114.6 512 256zM256 48C141.1 48 48 141.1 48 256C48 370.9 141.1 464 256 464C370.9 464 464 370.9 464 256C464 141.1 370.9 48 256 48z'"
            },
            "color": {
              "expr": "datum['__1__'] > datum['__2__'] && datum['__1__'] < datum['__3__'] ? '#252525' : 'transparent'"
            }
          }
        },
        {
          "description": "__4__",
          "mark": {
            "type": "point",
            "size": 120,
            "yOffset": -2,
            "xOffset": 148,
            "color": {
              "expr": "datum['__1__'] > datum['__5__'] && datum['__1__'] < datum['__2__'] ? 'transparent' : 'transparent'"
            }
          }
        },
        {
          "description": "__5__",
          "mark": {
            "type": "point",
            "size": 0.0007,
            "yOffset": -2,
            "xOffset": 148,
            "shape": {
              "expr": "datum['__1__'] > datum['__5__'] && datum['__1__'] < datum['__4__'] ? 'M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512z' : 'M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512z'"
            },
            "color": {
              "expr": "datum['__1__'] > datum['__5__'] && datum['__1__'] < datum['__4__'] ? '#252525' : 'transparent'"
            }
          }
        },
        {
          "description": "__6__",
          "mark": {
            "type": "point",
            "size": 0.003,
            "yOffset": -6,
            "xOffset": 144,
            "shape": {
              "expr": "datum['__1__'] > 0 && datum['__1__'] <= datum['__6__'] ? 'M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512z' : 'M256 512c141.4 0 256-114.6 256-256S397.4 0 256 0S0 114.6 0 256S114.6 512 256 512z'"
            },
            "color": {
              "expr": "datum['__1__'] > 0 && datum['__1__'] <= datum['__6__'] ? 'black' : 'transparent'"
            }
          }
        }
      ]
    }
  ]
}

Version 4 Pattern Fills Point: JSON template to import in Deneb

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "usermeta": {
    "deneb": {
      "build": "1.4.0.0",
      "metaVersion": 1,
      "provider": "vegaLite",
      "providerVersion": "5.4.0"
    },
    "interactivity": {
      "tooltip": true,
      "contextMenu": true,
      "selection": false,
      "highlight": false,
      "dataPointLimit": 50
    },
    "information": {
      "name": "Action Dots - pattern fills point",
      "description": "Action Dots basado en el artículo Why I Stopped Using Bullet Graphs (and What I Now Use Instead) de Nick Desbarats",
      "author": "Sentido Analitica - José Rafael Escalante",
      "uuid": "400a3012-c01d-444e-a1be-48acb142809d",
      "generated": "2023-02-26T00:55:30.332Z",
      "previewImageBase64PNG": "data:image/png;base64,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"
    },
    "dataset": [
      {
        "key": "__0__",
        "name": "City",
        "description": "",
        "type": "text",
        "kind": "column"
      },
      {
        "key": "__1__",
        "name": "Units",
        "description": "",
        "type": "numeric",
        "kind": "column"
      },
      {
        "key": "__2__",
        "name": "Best case",
        "description": "",
        "type": "numeric",
        "kind": "column"
      },
      {
        "key": "__3__",
        "name": "Good",
        "description": "",
        "type": "numeric",
        "kind": "column"
      },
      {
        "key": "__4__",
        "name": "Middle",
        "description": "",
        "type": "numeric",
        "kind": "column"
      },
      {
        "key": "__5__",
        "name": "Bad",
        "description": "",
        "type": "numeric",
        "kind": "column"
      },
      {
        "key": "__6__",
        "name": "Crisis",
        "description": "",
        "type": "numeric",
        "kind": "column"
      }
    ]
  },
  "config": {
    "view": {"stroke": "transparent"},
    "font": "Segoe UI",
    "arc": {},
    "area": {
      "line": true,
      "opacity": 0.6
    },
    "bar": {},
    "line": {
      "strokeWidth": 3,
      "strokeCap": "round",
      "strokeJoin": "round"
    },
    "path": {},
    "point": {
      "filled": true,
      "size": 75
    },
    "rect": {},
    "shape": {},
    "symbol": {
      "strokeWidth": 1.5,
      "size": 50
    },
    "text": {
      "font": "Segoe UI",
      "fontSize": 14
    },
    "axis": {
      "ticks": false,
      "grid": false,
      "domain": false,
      "labelFontSize": 12,
      "title": null,
      "titleFont": "wf_standard-font, helvetica, arial, sans-serif",
      "titleFontSize": 16,
      "titleFontWeight": "normal"
    },
    "axisQuantitative": {
      "tickCount": 3,
      "grid": false,
      "gridDash": [1, 5],
      "labelFlush": false
    },
    "axisX": {
      "labelPadding": 5,
      "labels": false
    },
    "axisY": {"labelPadding": 10},
    "header": {
      "titleFont": "wf_standard-font, helvetica, arial, sans-serif",
      "titleFontSize": 16,
      "labelFont": "Segoe UI",
      "labelFontSize": 13.333333333333332
    },
    "legend": {
      "titleFont": "Segoe UI",
      "titleFontWeight": "bold",
      "labelFont": "Segoe UI",
      "labelFontSize": 13.333333333333332,
      "symbolType": "circle",
      "symbolSize": 75
    }
  },
  "data": {"name": "dataset"},
  "hconcat": [
    {
      "encoding": {
        "y": {
          "field": "__0__",
          "sort": {
            "op": "sum",
            "field": "__1__",
            "order": "descending"
          }
        }
      },
      "layer": [
        {
          "mark": {
            "type": "bar",
            "tooltip": true,
            "color": "#d9d9d9",
            "height": {"band": 0.6},
            "yOffset": 2,
            "xOffset": 5
          },
          "encoding": {
            "x": {
              "field": "__1__",
              "type": "quantitative"
            }
          }
        },
        {
          "mark": {
            "type": "text",
            "align": "center",
            "baseline": "top",
            "yOffset": -3,
            "xOffset": 120,
            "fontSize": 11,
            "fontWeight": "bold",
            "color": "#444444"
          },
          "encoding": {
            "text": {
              "field": "__1__",
              "type": "quantitative",
              "format": "0,0",
              "formatType": "pbiFormat"
            }
          }
        },
        {
          "mark": {
            "type": "point",
            "yOffset": 2,
            "xOffset": 150,
            "size": 120
          },
          "encoding": {
            "color": {
              "condition": [
                {
                  "test": "datum['__1__'] > datum['__2__']",
                  "value": "black"
                },
                {
                  "test": "datum['__1__'] > datum['__3__']",
                  "value": "url(#horizontal-stripe-9)"
                },
                {
                  "test": "datum['__1__'] > datum['__4__']",
                  "value": "white"
                },
                {
                  "test": "datum['__1__'] > datum['__5__']",
                  "value": "url(#horizontal-stripe-1)"
                },
                {
                  "test": "datum['__1__'] > datum['__6__']",
                  "value": "url(#crosshatch)"
                },
                {
                  "test": "datum['__1__'] <= datum['__6__']",
                  "value": "url(#crosshatch)"
                }
              ]
            }
          }
        }
      ]
    }
  ]
}