It's quite an amazing chart though! :) Good exploration above, too!

pizzapocalypse! :D

here is what you are trying to do: BubbleChart([...d3.rollup(pizza, v => d3.sum(v, d => d.orders), d => d.name)].map(([name,orders]) => ({name, orders}) ), { label: d => d.name, value: d => d.orders, group: d => d.name, width: 1152 }) explanation: for data transformation you would need to use d3 rollup: https://observablehq.com/@d3/d3-group#rollups that explains this bit: d3.rollup(pizza, v => d3.sum(v, d => d.orders), d => d.name) this essentially says: make groups for each unique "name", then within each group compute a sum of orders you can try running it as a separate cell and see the result. the result is a weird JS MAP, but what we need is an array of objects, here is how we do convert to the format we need: [... JS MAP HERE].map(([name,orders]) => ({name, orders}) ) here i've used many shorthand notations from the modern JS, a more old-school way of doing the same would perhaps make more sense Array.from(JS MAP HERE) .map(function(m){ return {name: m[0], orders: m[1]} }) the confusing bit: in Map() data structure the word "map" is a noun, but in Array.map() method the word "map" is a verb. these are two different things.

Currently your chart is a stack of tiny-tiny slices, one per each order, see the textury pattern? i.e. your marker is "one order", remember when we defined what markers are we had "each row in tidy data table becomes a mark in the chart". to do this properly you need to aggregate the data, essentially producing another table on the fly. That new table would only have 2 rows one per each state ``` Plot.plot({ marginLeft: 100, y: { grid: true }, marks: [ Plot.barY(pizzaorders, Plot.groupX({y: "sum"}, {x: "state", y: "orders", fill: "#5383EC"})), Plot.ruleY([0]) ] }) ``` same goes with other charts in this notebook

update: i added a tooltip feature in the bottom of the notebook. now by adding title: "orders", in parameters we can hover and see the markers