Saltar al contenido

Deneb #20: Gráfico de paleta

 

La versión horizontal tendrá configurado un formato condicional para colorear los círculos de la paleta. Se encuentra de manera estática según un valor arbitrario: Línea 37 – «test»: «datum[‘Cantidades’] < 12».

Versión horizontal: Plantilla JSON para importar en 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": false,
      "dataPointLimit": 50
    },
    "information": {
      "name": "Deneb #20 Grafico de paleta",
      "description": "Grafico de paleta horizontal con formato condicional segun valor arbitrario.",
      "author": "Sentido Analítica - Jose Rafael Escalante",
      "uuid": "75283f01-233c-4e07-bd18-e3a040b5ce5b",
      "generated": "2022-01-21T15:19:40.911Z"
    },
    "dataset": [
      {
        "key": "__0__",
        "name": "Frutas",
        "description": "Categorico",
        "type": "text",
        "kind": "column"
      },
      {
        "key": "__1__",
        "name": "Cantidades",
        "description": "Cuantitativo",
        "type": "numeric",
        "kind": "measure"
      }
    ]
  },
  "config": {
    "autosize": {
      "type": "fit",
      "contains": "padding"
    },
    "axis": {
      "offset": 10,
      "ticks": false,
      "domain": false,
      "gridColor": "#ececec",
      "title": null
    },
    "view": {"stroke": "transparent"}
  },
  "description": "Gráfico de paleta con formato condicional morado o verde",
  "data": {"name": "dataset"},
  "encoding": {
    "y": {
      "field": "__0__",
      "type": "nominal",
      "sort": {
        "op": "sum",
        "field": "__1__",
        "order": "descending"
      }
    },
    "x": {
      "field": "__1__",
      "type": "quantitative"
    }
  },
  "layer": [
    {
      "mark": {
        "type": "bar",
        "height": 2,
        "color": "#333333"
      }
    },
    {
      "mark": {
        "type": "circle",
        "size": 400,
        "stroke": "black",
        "opacity": 1
      },
      "encoding": {
        "color": {
          "condition": {
            "test": "datum['__1__'] < 12",
            "value": "#8a2be2"
          },
          "value": "#83e22b"
        }
      }
    }
  ]
}

La versión vertical contiene un fondo de color azul con letras en blanco, y mantiene el formato condicional para colorear los círculos de la paleta. Se encuentra de manera estática según un valor arbitrario: Línea 37 – «test»: «datum[‘Cantidades’] < 12».

Versión vertical: Plantilla JSON para importar en 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": false,
      "dataPointLimit": 50
    },
    "information": {
      "name": "Deneb #20 Grafico de paleta",
      "description": "Grafico de paleta horizontal con formato condicional segun valor arbitrario",
      "author": "Sentido Analítica - José Rafael Escalante",
      "uuid": "b6e1f19c-06c2-4b27-884f-a1bc6a3c0153",
      "generated": "2022-01-21T15:31:54.524Z"
    },
    "dataset": [
      {
        "key": "__0__",
        "name": "Frutas",
        "description": "Categorico",
        "type": "text",
        "kind": "column"
      },
      {
        "key": "__1__",
        "name": "Cantidades",
        "description": "Cuantitativo",
        "type": "numeric",
        "kind": "measure"
      }
    ]
  },
  "config": {
    "autosize": {
      "type": "fit",
      "contains": "padding"
    },
    "axis": {
      "labelColor": "white",
      "offset": 10,
      "ticks": false,
      "domain": false,
      "gridColor": "#f6f6f6",
      "gridWidth": 0.2,
      "title": null
    },
    "background": "#329acd",
    "view": {"stroke": "transparent"}
  },
  "data": {"name": "dataset"},
  "encoding": {
    "x": {
      "field": "__0__",
      "type": "nominal",
      "axis": {
        "labelLimit": 35,
        "labelAngle": 0
      }
    },
    "y": {
      "field": "__1__",
      "type": "quantitative"
    }
  },
  "layer": [
    {
      "mark": {
        "type": "bar",
        "width": 2,
        "color": "white"
      }
    },
    {
      "mark": {
        "type": "circle",
        "size": 400,
        "stroke": "white",
        "color": "black",
        "opacity": 1
      },
      "encoding": {
        "color": {
          "condition": {
            "test": "datum['__1__'] < 12",
            "value": "black"
          },
          "value": "white"
        }
      }
    }
  ]
}

 

Deja una respuesta

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