Saltar al contenido

Deneb #24: Design for color blindness

 

Las recomendaciones al diseñar reportes optimizados para daltonismo se inclinan a utilizar paletas de colores que puedan ser vistas correctamente para ambos espectros. Pero, existe una segunda alternativa utilizando Deneb, siendo la mezcla de patrones de relleno y, decolorar por completo el gráfico.

 

JSON template to import in Deneb

{
   "$schema":"https://vega.github.io/schema/vega-lite/v5.json",
   "usermeta":{
      "deneb":{
         "build":"1.0.0.157",
         "metaVersion":1,
         "provider":"vegaLite"
      },
      "interactivity":{
         "tooltip":true,
         "contextMenu":true,
         "selection":true,
         "dataPointLimit":50
      },
      "information":{
         "name":"Deneb #24 Design for color blindness",
         "description":"[EN] Design using a greyscale with pattern fills. [ES] Diseño utilizando una escala de grises con patrones de relleno\n\nEmail: jrescalante@sentidoanalitica.com",
         "author":"Sentido Analítica - José Rafael Escalante",
         "uuid":"9d5d474c-3c59-4381-a875-0d9fa197b7e6",
         "generated":"2022-01-29T18:38:09.218Z"
      },
      "dataset":[
         {
            "key":"__0__",
            "name":"Month",
            "description":"Mes",
            "type":"text",
            "kind":"column"
         },
         {
            "key":"__1__",
            "name":"Expenses",
            "description":"Gastos",
            "type":"numeric",
            "kind":"measure"
         },
         {
            "key":"__2__",
            "name":"Budget",
            "description":"Presupuesto",
            "type":"numeric",
            "kind":"measure"
         },
         {
            "key":"__3__",
            "name":"Variance",
            "description":"Variación porcentual entre el gasto y el presupuesto",
            "type":"numeric",
            "kind":"measure"
         }
      ]
   },
   "config":{
      "autosize":{
         "type":"fit",
         "contains":"padding"
      },
      "axis":{
         "domain":false,
         "ticks":false,
         "title":true,
         "grid":false,
         "labelAngle":0
      },
      "view":{
         "stroke":"transparent"
      }
   },
   "data":{
      "name":"dataset"
   },
   "encoding":{
      "x":{
         "field":"__0__",
         "sort":[
            "jan",
            "feb"
         ],
         "scale":{
            "padding":0.4
         }
      },
      "y":{
         "type":"quantitative",
         "axis":{
            "labels":false
         }
      }
   },
   "layer":[
      {
         "description":"Budget with conditional formatting - Presupuesto con formato condicional",
         "mark":{
            "type":"bar",
            "xOffset":5
         },
         "encoding":{
            "y":{
               "field":"__2__"
            },
            "fill":{
               "condition":{
                  "test":"datum['__1__'] < datum['__2__']",
                  "value":"black"
               },
               "value":"#transparent"
            },
            "opacity":{
               "condition":{
                  "test":{
                     "field":"__selected__",
                     "equal":"off"
                  },
                  "value":0.1
               }
            }
         }
      },
      {
         "description":"Expenses - Gastos",
         "mark":{
            "type":"bar",
            "stroke":"#404040",
            "xOffset":5
         },
         "encoding":{
            "y":{
               "field":"__1__"
            },
            "fill":{
               "condition":{
                  "test":"datum['__1__'] < datum['__2__']",
                  "value":"transparent"
               },
               "value":"url(#diagonal-stripe-2)"
            },
            "opacity":{
               "condition":{
                  "test":{
                     "field":"__selected__",
                     "equal":"off"
                  },
                  "value":0.1
               }
            }
         }
      },
      {
         "description":"Budget - Presupuesto",
         "mark":{
            "type":"bar",
            "color":"#e2e2e2",
            "stroke":"#7f7f7f"
         },
         "encoding":{
            "y":{
               "field":"__2__"
            },
            "opacity":{
               "condition":{
                  "test":{
                     "field":"__selected__",
                     "equal":"off"
                  },
                  "value":0.1
               }
            }
         }
      },
      {
         "description":" Text percentage",
         "mark":{
            "type":"text",
            "align":"center",
            "fill":"black",
            "dx":-1,
            "yOffset":-6,
            "size":10
         },
         "encoding":{
            "text":{
               "field":"__3__",
               "type":"quantitative",
               "format":"0.%",
               "formatType":"pbiFormat"
            },
            "y":{
               "field":"__1__"
            },
            "opacity":{
               "condition":{
                  "test":{
                     "field":"__selected__",
                     "equal":"off"
                  },
                  "value":0.1
               }
            }
         }
      },
      {
         "description":"Expenses - Gastos",
         "mark":{
            "type":"bar",
            "color":"white",
            "stroke":"#7f7f7f",
            "xOffset":10
         },
         "encoding":{
            "y":{
               "field":"__1__"
            },
            "opacity":{
               "condition":{
                  "test":{
                     "field":"__selected__",
                     "equal":"off"
                  },
                  "value":0.1
               }
            }
         }
      },
      {
         "description":" Text integer",
         "mark":{
            "type":"text",
            "align":"center",
            "fill":"#404040",
            "dx":10,
            "yOffset":14,
            "size":10
         },
         "encoding":{
            "text":{
               "field":"__1__",
               "type":"quantitative",
               "format":"0,0",
               "formatType":"pbiFormat"
            },
            "y":{
               "field":"__1__"
            },
            "opacity":{
               "condition":{
                  "test":{
                     "field":"__selected__",
                     "equal":"off"
                  },
                  "value":0.1
               }
            }
         }
      }
   ]
}

 

 

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *