Gabrielle Frueh

cool, you found how to import extensions here

Angie Hjort

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

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

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
})

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)