nice! the choice of size by count is not very obvious but it can work as long as you know how to interpret it: number of days when a certain number of pizzas of all types were ordered (or so i understand)

not quite so! you've just plotted all 20k datapoints as individual bars (see how they are a bit textury?) add a JS cell with this code import {Plot} from "@mkfreeman/plot-tooltip" add title: "total", among your parameters this will enable the tooltip and you'll see the great many bars you've made!

how to solve it? you need to aggregate: make a sum of total revenue (x) per days of week (y) wrap your second argument in a transformation step like so Plot.groupY({x: "sum"}, { x: "total", y: "day_of_week", title: "total", . . . .blablabla . .}) then hover again to see now they are one bar per day

potentially a nice way to present but i have doubts about unit prices going to thousands one simple change: if you replace marker type from "areaY" to "dot" you get a chart that makes sense

great choice! a tree map would need a "reduced" dataset, otherwise the one below gives you one square per day per pizza name, so a lot of squares. first, let's calculate total number of orders per pizza type (make a new cell with this code) rollup = d3.rollup(pizzaorders, v => d3.sum(v, d => d.orders), d => d.name) this is some black magic data transformation stuff. you can read more on d3.rollup here: https://observablehq.com/@d3/d3-group#rollups run it in one cell and examine the result, try playing around with arguments if you like this gives back a map (a special data type), but we want an array of objects instead, so we convert like so (this is javascript black magic). make another cell with this code: treemapData = Array.from(rollup, ([name, orders]) => ({name, orders})) finally let's adjust your treemap code: Treemap(treemapData, { path: (d) => d.name.replace(" Pizza ", "/"), // "BBQ Chicken Pizza Large" becomes "BBQ Chicken/Large" so that treemap can make nested hierarchy label: (d) => d.name, // display text group: (d) => d.name.split(" Pizza ")[0], // color by pizza type value: (d) => d?.orders, // area of each rect set to "orders" column width: 1000, // make it larger height: 500 // make it larger })

cool, you found how to import extensions here