Простая диаграмма с накоплением с использованием VegaLite с текстовыми метками

Question

У меня проблема с маркировкой моего столбца. Я хотел бы, чтобы общее число покровителей было отмечено на правой стороне каждого бара. Не указывается сумма «Сторонников США» и «Сторонников из других стран», как показано.

Используемый мной набор данных показывает наиболее популярные категории на веб-сайте проекта Kickstarter, и я выделил проекты, запущенные в США, чтобы показать популярность веб-сайта в Штатах по сравнению с мировым.

введите описание изображения здесь

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "url": "https://raw.githubusercontent.com/taramcgirl/InfoVisProject/master/graphone.csv",
    "format": {
      "type": "csv"
    }
  },

  "title": {
    "text": "Total Backers per Category",
    "anchor": "middle",
    "fontSize":24
  },
   "width":400,
    "height":400,
    "mark": {
      "type": "bar", 
      "cornerRadiusEnd": 4
      },
    "encoding": {
      "x": {
         "axis": {
          "title": "Number of Backers",
          "labelFontSize":10, 
          "titleFontSize":15
          },
          "field" : "Backers",
          "type" :  "quantitative",
          "aggregate": "sum"
        },
      "y": {
        "axis": {
        "title": "Category",
        "labelFontSize":10, 
        "titleFontSize":15
        },
        "field":"Main_Category",
        "type" : "nominal",
        "sort": "-x"
      },
      "color": {
        "field": "USA or ELSEWHERE", 
        "type": "nominal",
        "scale": {
          "domain":["US","Other"], 
          "range": ["#8101FA", "#00C7A9"]
          }
        },
      "opacity": {
          "value" : 0.5
      }
    },
    "layer": [{
    "mark": "bar"
    }, {
      "mark": {
        "type": "text",
        "align": "left",
        "baseline": "bottom",
        "stroke":"black",
        "dx": 3,
        "fontSize": 9,
        "fontWeight": "normal",
        "stack":"false" 
      },
      "encoding": {
        "text": {
          "field": "Backers", 
          "type": "quantitative",
          "aggregate": "sum",
          "stack": "true"          
        }

    }
    }]
}

Answer 1

Если вы сделаете так, чтобы цветовая кодировка применялась только к слою полос, вы получите желаемый результат. После небольшой очистки избыточных и недопустимых параметров результат выглядит следующим образом: ( vega editor ):

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "data": {
    "url": "https://raw.githubusercontent.com/taramcgirl/InfoVisProject/master/graph1.csv"
  },
  "title": {
    "text": "Total Backers per Category",
    "anchor": "middle",
    "fontSize": 24
  },
  "width": 400,
  "height": 400,
  "encoding": {
    "x": {
      "axis": {
        "title": "Number of Backers",
        "labelFontSize": 10,
        "titleFontSize": 15
      },
      "scale": {"domain": [0, 10000000]},
      "field": "Backers",
      "type": "quantitative",
      "aggregate": "sum"
    },
    "y": {
      "axis": {"title": "Category", "labelFontSize": 10, "titleFontSize": 15},
      "field": "Main_Category",
      "type": "nominal",
      "sort": "-x"
    }
  },
  "layer": [
    {
      "mark": {"type": "bar", "cornerRadiusEnd": 4},
      "encoding": {
        "color": {
          "field": "USA or ELSEWHERE",
          "type": "nominal",
          "scale": {"domain": ["US", "Other"], "range": ["#8101FA", "#00C7A9"]}
        },
        "opacity": {"value": 0.5}
      }
    },
    {
      "mark": {
        "type": "text",
        "align": "left",
        "baseline": "middle",
        "stroke": "black",
        "dx": 3,
        "fontSize": 9
      },
      "encoding": {
        "text": {"field": "Backers", "type": "quantitative", "aggregate": "sum"}
      }
    }
  ]
}