【问题标题】:Combing scatterplots on Vegalite在 Vega Lite 上组合散点图
【发布时间】:2022-01-02 18:31:25
【问题描述】:

我正在尝试将 3 个散点图组合起来看起来像这样 示例代码

{
  "$schema": "https://vega.github.io/schema/vega-lite/v5.json",
  "repeat": {
    "row": ["Horsepower", "Acceleration", "Miles_per_Gallon"],
    "column": ["Miles_per_Gallon", "Acceleration", "Horsepower"]
  },
  "spec": {
    "data": {"url": "data/cars.json"},
    "mark": "point",
    "params": [
      {
        "name": "brush",
        "select": {
          "type": "interval",
          "resolve": "union",
          "on": "[mousedown[event.shiftKey], window:mouseup] > window:mousemove!",
          "translate": "[mousedown[event.shiftKey], window:mouseup] > window:mousemove!",
          "zoom": "wheel![event.shiftKey]"
        }
      },
      {
        "name": "grid",
        "select": {
          "type": "interval",
          "resolve": "global",
          "translate": "[mousedown[!event.shiftKey], window:mouseup] > window:mousemove!",
          "zoom": "wheel![!event.shiftKey]"
        },
        "bind": "scales"
      }
    ],
    "encoding": {
      "x": {"field": {"repeat": "column"}, "type": "quantitative"},
      "y": {
        "field": {"repeat": "row"},
        "type": "quantitative",
        "axis": {"minExtent": 30}
      },
      "color": {
        "condition": {
          "param": "brush",
          "field": "Origin",
          "type": "nominal"
        },
        "value": "grey"
      }
    }
  }
}

目前,我有 3 个独立的散点图,它们都是相同的数据集。经过多次尝试,我仍然无法弄清楚如何将它们放在一起/链接它们。我知道我的要复杂一些,因为我的轴不一样。 我真的一直在为此苦苦挣扎,任何帮助都将不胜感激,因为我需要它。谢谢!

图表 1

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "title": {
    "text": "Number of Billionaires and Education Attainment",
    "subtitle": "From 2015-2020. Sources: Forbes & World Bank",
    "subtitleFontStyle": "italic",
    "subtitleFontSize": 10,
    "anchor": "start",
    "color": "black"
  },
  "height": 100,
  "width": 100,
  "data": {
    "url": "https://raw.githubusercontent.com/jamieprince/jamieprince.github.io/main/correlation.csv"
  },
  "transform": [
    {"calculate": "datum.Educationalattainment/100", "as": "percent"},
    {"filter": {"field": "Educationalattainment", "gt": 0}}
  ],
  "selection": {
    "paintbrush": {"type": "multi", "on": "mouseover", "nearest": true},
    "grid": {"type": "interval", "bind": "scales"}
  },
  "mark": {"type": "circle", "opacity": 0.5, "color": "#C96E11"},
  "encoding": {
    "x": {
      "field": "Number of Billionaires",
      "type": "quantitative",
      "axis": {
        "title": "Number of Billionaires",
        "grid": false,
        "tickCount": 10
      }
    },
    "y": {
      "field": "percent",
      "type": "quantitative",
      "axis": {"title": "Educational Attainment", "grid": false, "format": "%"}
    },
    "size": {
      "condition": {
        "selection": "paintbrush",
        "value": 300,
        "init": {"value": 70}
      },
      "value": 70
    },
    "tooltip": [
      {"field": "Year", "type": "nominal", "title": "Year"},
      {"field": "Country", "type": "ordinal", "title": "Country"},
      {
        "field": "Number of Billionaires",
        "type": "nominal",
        "title": "No of Billionaires"
      },
      {
        "field": "Educationalattainment",
        "type": "nominal",
        "title": "Educational attainment at least completed short-cycle tertiary population 25+ total (%) (cumulative)"
      }
    ]
  }
}

图表 2

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "title": {
    "text": "GDP per capita and Education Attainment",
    "subtitle": "From 2015-2020. Sources: World Bank",
    "subtitleFontStyle": "italic",
    "subtitleFontSize": 10,
    "anchor": "start",
    "color": "black"
  },
  "height": 100,
  "width": 100,
  "data": {
    "url": "https://raw.githubusercontent.com/jamieprince/jamieprince.github.io/main/correlation.csv"
  },
  "transform": [
    {"calculate": "datum.Educationalattainment/100", "as": "percent"},
    {"filter": {"field": "Educationalattainment", "gt": 0}}
  ],
  "selection": {
    "paintbrush": {"type": "multi", "on": "mouseover", "nearest": true},
    "grid": {"type": "interval", "bind": "scales"}
  },
  "mark": {"type": "circle", "opacity": 0.5, "color": "#EC9D3E"},
  "encoding": {
    "x": {
      "field": "GDP per capita",
      "type": "quantitative",
      "axis": {
        "title": "GDP per capita",
        "grid": false,
        "tickCount": 10,
        "labelOverlap": "greedy"
      }
    },
    "y": {
      "field": "percent",
      "type": "quantitative",
      "axis": {"title": "Educational Attainment", "grid": false, "format": "%"}
    },
    "size": {
      "condition": {
        "selection": "paintbrush",
        "value": 300,
        "init": {"value": 70}
      },
      "value": 70
    },
    "tooltip": [
      {"field": "Year", "type": "nominal", "title": "Year"},
      {"field": "Country", "type": "ordinal", "title": "Country"},
      {"field": "GDP per capita", "type": "nominal", "title": "GDP per capita"},
      {
        "field": "Educationalattainment",
        "type": "nominal",
        "title": "Educational attainment at least completed short-cycle tertiary population 25+ total (%) (cumulative)"
      }
    ]
  }
}

图表 3

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "title": {
    "text": "No of billionaires and GDP per capita",
    "subtitle": "From 2015-2020. Sources: Forbes & World Bank",
    "subtitleFontStyle": "italic",
    "subtitleFontSize": 10,
    "anchor": "start",
    "color": "black"
  },
  "height": 100,
  "width": 100,
  "data": {
    "url": "https://raw.githubusercontent.com/jamieprince/jamieprince.github.io/main/correlation.csv"
  },
  "selection": {
    "paintbrush": {"type": "multi", "on": "mouseover", "nearest": true},
    "grid": {"type": "interval", "bind": "scales"}
  },
  "mark": {"type": "circle", "opacity": 0.5, "color": "#FBCA8B"},
  "encoding": {
    "x": {
      "field": "Number of Billionaires",
      "type": "quantitative",
      "axis": {
        "title": "Number of Billionaires",
        "grid": false,
        "tickCount": 14
      }
    },
    "y": {
      "field": "GDP per capita",
      "type": "quantitative",
      "axis": {"title": "GDP per capita", "grid": false}
    },
    "size": {
      "condition": {
        "selection": "paintbrush",
        "value": 300,
        "init": {"value": 70}
      },
      "value": 70
    },
    "tooltip": [
      {"field": "Year", "type": "nominal", "title": "Year"},
      {"field": "Country", "type": "ordinal", "title": "Country"},
      {"field": "GDP per capita", "type": "nominal", "title": "GDP per capita"},
      {
        "field": "Number of Billionaires",
        "type": "nominal",
        "title": "Number of Billionaires"
      }
    ]
  }
}

【问题讨论】:

    标签: charts vega-lite


    【解决方案1】:

    您可以简单地使用hconcat 来并排显示您的散点图,而不是使用重复。参考documentation

    以下是修改后的配置或参考editor

    {
      "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
      "title": {
        "text": "Number of Billionaires and Education Attainment",
        "subtitle": "From 2015-2020. Sources: Forbes & World Bank",
        "subtitleFontStyle": "italic",
        "subtitleFontSize": 10,
        "anchor": "start",
        "color": "black"
      },
      "data": {
        "url": "https://raw.githubusercontent.com/jamieprince/jamieprince.github.io/main/correlation.csv"
      },
      "transform": [
        {"calculate": "datum.Educationalattainment/100", "as": "percent"},
        {"filter": {"field": "Educationalattainment", "gt": 0}}
      ],
      "hconcat": [
        {
          "height": 100,
          "width": 100,
          "selection": {
            "paintbrush": {"type": "multi", "on": "mouseover", "nearest": true},
            "grid": {"type": "interval", "bind": "scales"}
          },
          "mark": {"type": "circle", "opacity": 0.5, "color": "#C96E11"},
          "encoding": {
            "x": {
              "field": "Number of Billionaires",
              "type": "quantitative",
              "axis": {
                "title": "Number of Billionaires",
                "grid": false,
                "tickCount": 10
              }
            },
            "y": {
              "field": "percent",
              "type": "quantitative",
              "axis": {
                "title": "Educational Attainment",
                "grid": false,
                "format": "%"
              }
            },
            "size": {
              "condition": {
                "selection": "paintbrush",
                "value": 300,
                "init": {"value": 70}
              },
              "value": 70
            },
            "tooltip": [
              {"field": "Year", "type": "nominal", "title": "Year"},
              {"field": "Country", "type": "ordinal", "title": "Country"},
              {
                "field": "Number of Billionaires",
                "type": "nominal",
                "title": "No of Billionaires"
              },
              {
                "field": "Educationalattainment",
                "type": "nominal",
                "title": "Educational attainment at least completed short-cycle tertiary population 25+ total (%) (cumulative)"
              }
            ]
          }
        },
        {
          "height": 100,
          "width": 100,
          "selection": {
            "paintbrush": {"type": "multi", "on": "mouseover", "nearest": true},
            "grid": {"type": "interval", "bind": "scales"}
          },
          "mark": {"type": "circle", "opacity": 0.5, "color": "#EC9D3E"},
          "encoding": {
            "x": {
              "field": "GDP per capita",
              "type": "quantitative",
              "axis": {
                "title": "GDP per capita",
                "grid": false,
                "tickCount": 10,
                "labelOverlap": "greedy"
              }
            },
            "y": {
              "field": "percent",
              "type": "quantitative",
              "axis": {
                "title": "Educational Attainment",
                "grid": false,
                "format": "%"
              }
            },
            "size": {
              "condition": {
                "selection": "paintbrush",
                "value": 300,
                "init": {"value": 70}
              },
              "value": 70
            },
            "tooltip": [
              {"field": "Year", "type": "nominal", "title": "Year"},
              {"field": "Country", "type": "ordinal", "title": "Country"},
              {
                "field": "GDP per capita",
                "type": "nominal",
                "title": "GDP per capita"
              },
              {
                "field": "Educationalattainment",
                "type": "nominal",
                "title": "Educational attainment at least completed short-cycle tertiary population 25+ total (%) (cumulative)"
              }
            ]
          }
        },
        {
          "height": 100,
          "width": 100,
          "selection": {
            "paintbrush": {"type": "multi", "on": "mouseover", "nearest": true},
            "grid": {"type": "interval", "bind": "scales"}
          },
          "mark": {"type": "circle", "opacity": 0.5, "color": "#FBCA8B"},
          "encoding": {
            "x": {
              "field": "Number of Billionaires",
              "type": "quantitative",
              "axis": {
                "title": "Number of Billionaires",
                "grid": false,
                "tickCount": 14
              }
            },
            "y": {
              "field": "GDP per capita",
              "type": "quantitative",
              "axis": {"title": "GDP per capita", "grid": false}
            },
            "size": {
              "condition": {
                "selection": "paintbrush",
                "value": 300,
                "init": {"value": 70}
              },
              "value": 70
            },
            "tooltip": [
              {"field": "Year", "type": "nominal", "title": "Year"},
              {"field": "Country", "type": "ordinal", "title": "Country"},
              {
                "field": "GDP per capita",
                "type": "nominal",
                "title": "GDP per capita"
              },
              {
                "field": "Number of Billionaires",
                "type": "nominal",
                "title": "Number of Billionaires"
              }
            ]
          }
        }
      ]
    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2020-03-19
      • 1970-01-01
      • 2020-03-27
      • 1970-01-01
      • 2021-05-28
      相关资源
      最近更新 更多