New to Observable Plot, please help formatting data

[LyraLupus03]

I am trying to make a bivariate histogram graphing livestock type vs predator type for the number of livestock killed. I have no idea what I'm doing since I know nothing about coding and this is my first time using observable, but this is an assignment for a class so I have to learn. It seems no matter how I format my data I can't get it onto the plot. I am basing my plot off of an example by observable: [https://observablehq.com/@observablehq/plot-grouped-bar-chart?intent=fork] and here is my notebook: [https://observablehq.com/d/258fff5cd0273f02]

[Fil]

What you can do with Observable Plot is to use a dot mark, where x would be the livestock type, y the predator, and the radius would be the number of livestock killed:

Plot.plot({
  marks: [Plot.dot(data2, { x: "B", y: "A", r: "C" })]
})

Then you could build up this chart by adding various options to make it more readable:

Plot.plot({
  width: 500,
  height: 250,
  marginLeft: 60,
  x: { label: "livestock", insetLeft: 20 },
  y: { label: "predator" },
  r: {range: [0, 50]},
  marks: [
    Plot.dot(data2, {
      x: "B",
      y: "A",
      r: "C",
      tip: true,
      sort: {x: {value: "-r", reduce: "sum"}, y: {value: "-r", reduce: "sum"}},
    }),
    Plot.text(data2, {
      x: "B",
      y: "A",
      text: "C",
      filter: "C",
      fill: "black",
      stroke: "white"
    })
  ]
})

Another approach is to use color to encode the quantity; you can then use the cell mark like so:

Plot.plot({
  width: 500,
  height: 250,
  marginLeft: 60,
  x: { label: "livestock", insetLeft: 20 },
  y: { label: "predator" },
  color: {type:"log", scheme: "reds", legend: true, label: "# of animals killed"},
  marks: [
    Plot.cell(data2, {
      x: "B",
      y: "A",
      fill: "C",
      filter: "C",
      tip: true,
      sort: {x: {value: "-fill", reduce: "sum"}, y: {value: "-fill", reduce: "sum"}},
    }),
    Plot.text(data2, {
      x: "B",
      y: "A",
      text: "C",
      filter: "C",
      fill: "white"
    })
  ]
})

If your x or y axes are continuous, you can use binning instead; see the “two-dimensional heatmap” example in https://observablehq.com/plot/transforms/bin.