Блог

У меня есть точечная диаграмма, сгенерированная с помощью кода контуров в Веге.

График выглядит следующим образом

Основываясь на 3-м поле, различил точки по цвету как синие и зеленые точки, но не смог четко увидеть разницу.

Возможно ли изменить форму и цвет (хотя бы один) точек, чтобы сделать разницу более заметной

Код

 {
  "$schema": "https://vega.github.io/schema/vega/v5.json",
    "title": {
    "text": "Outlier Distribution between Duration Vs Age",
    "anchor": "middle",
    "fontSize": 16,
    "frame": "group",
    "offset": 4
  },
  "signals": [
    {
      "name": "bandwidth", "value": 0.5,
      "bind": {"input": "range", "min": -1, "max": 1, "step": 0.1}
    }
  ],
  "data": [
    {
      "name": "source",
      "url" : {
          "index": "tenant_id.model_training_artefact",
          "body": {
            "size":10000,
            "_source": ["duration", "credit_amount", "asnm", "age", "outlier"]          
          }
        }  
        "format": {"property": "hits.hits"},
    },
    {
      "name": "density",
      "source": "source",
      "transform": [
        {
          "type": "kde2d",
          "groupby": ["_source.outlier"],
          "size": [{"signal": "width"}, {"signal": "height"}],
          "x": {"expr": "scale('x', datum.duration)"},
          "y": {"expr": "scale('y', datum.age)"},
          "bandwidth": {"signal": "[bandwidth, bandwidth]"}
        }
      ]
    },
    {
      "name": "contours",
      "source": "density",
      "transform": [
        {
          "type": "isocontour",
          "field": "grid",
          "levels": 4
        }
      ]
    }
  ],
  "scales": [
    {
      "name": "x",
      "type": "linear",
      "round": true,
      "nice": true,
      "zero": true,
      "domain": {"data": "source", "field": "_source.duration"},
      "range": "width"
    },
    {
      "name": "y",
      "type": "linear",
      "round": true,
      "nice": true,
      "zero": true,
      "domain": {"data": "source", "field": "_source.age"},
      "range": "height"
    },
    {
      "name": "color",
      "type": "ordinal",
      "domain": {
        "data": "source", "field": "_source.outlier",
        "sort": {"order": "descending"}
      },
      "range": "category"
    }
  ],

  "axes": [
    {
      "scale": "x",
      "grid": true,
      "domain": false,
      "orient": "bottom",
      "tickCount": 5,
      "title": "Duration"
    },
    {
      "scale": "y",
      "grid": true,
      "domain": false,
      "orient": "left",
      "titlePadding": 5,
      "title": "Age"
    }
  ],

  "legends": [
    {"stroke": "color", "symbolType": "stroke"}
  ],

  "marks": [
    {
      "name": "marks",
      "type": "symbol",
      "from": {"data": "source"},
      "encode": {
        "update": {
          "x": {"scale": "x", "field": "_source.duration"},
          "y": {"scale": "y", "field": "_source.age"},
          "size": {"value": 50},
          "fill": {"scale": "color" , "field": "_source.outlier"}
        }
      }      
    },
    {
      "type": "image",
      "from": {"data": "density"},
      "encode": {
        "update": {
          "x": {"value": 0},
          "y": {"value": 0},
          "width": {"signal": "width"},
          "height": {"signal": "height"},
          "aspect": {"value": false}
        }
      },
      "transform": [
        {
          "type": "heatmap",
          "field": "datum.grid",
          "color": {"expr": "scale('color', datum.datum.outlier)"}
        }
      ]
    },
    {
      "type": "path",
      "clip": true,
      "from": {"data": "contours"},
      "encode": {
        "enter": {
          "strokeWidth": {"value": 1},
          "strokeOpacity": {"value": 1},
          "stroke": {"scale": "color", "field": "outlier"}
        }
      },
      "transform": [
        { "type": "geopath", "field": "datum.contour" }
      ]
    }
  ]
}

 

Попробуйте определить масштабы для цвета, формы и размера символа метки. Например, предположим, что ваш выброс поля имеет 3 возможных значения:

 "scales": [

...

  {
      "name": "scale_symbol_color",
      "type": "ordinal",
      "domain": {
        "data": "source", "field": "_source.outlier",
        "sort": {"order": "descending"}
      },
      "range": ["red", "orange", "blue"]
    },


  {
      "name": "scale_symbol_shape",
      "type": "ordinal",
      "domain": {
        "data": "source", "field": "_source.outlier",
        "sort": {"order": "descending"}
      },
      "range": ["triangle", "square", "circle"]
    },

  {
      "name": "scale_symbol_size",
      "type": "ordinal",
      "domain": {
        "data": "source", "field": "_source.outlier",
        "sort": {"order": "descending"}
      },
      "range": [400, 300, 200]
    }

],
...

  "marks": [
    {
      "name": "marks",
      "type": "symbol",
      "from": {"data": "source"},
      "encode": {
        "update": {
          "x": {"scale": "x", "field": "_source.duration"},
          "y": {"scale": "y", "field": "_source.age"},
          "size": {"value": 50},
          "fill": {"scale": "scale_symbol_color" , "field": "_source.outlier"},
      "shape": {"scale": "scale_symbol_shape" , "field": "_source.outlier"},
      "size": {"scale": "scale_symbol_size" , "field": "_source.outlier"},
      
        }
      }      
    },
...
 

Документы Vega:

https://vega.github.io/vega/docs/scales/#ordinal

https://vega.github.io/vega/docs/marks/symbol/