huge progress! what is holding you back at this point is that the data table is not sorted by days so your lines go all over the place
with a bit of javascript magic we can sort the array here in place by orderDate, change
pizza
to
pizza.sort((a,b) => a.orderDate - b.orderDate)
UPDATE: found an even easier way: add sort: "orderDate" among the encodings
next: have a look at multi-series line charts (in the examples when you add a new cell)
basically if you add z: "name" you get many lines each for one "name", then if you add, stroke: "name" you get them lines colored also by "name"
alternatively you can group the data so that you would only have one value per day, sum of all orders. example: https://observablehq.com/@observablehq/plot-cheatsheets-transforms?collection=@observablehq/plot-cheatsheets#cell-58
finally: you have a lot of fluctuations that don't let you see the low frequencies in data. these are the weekly jumps we saw in the charts earlier, but let's remove them here. take a look at the "sliding window moving average" — also from the examples when you add a new cell.
close but not quite so! you've just plotted a STACKED bar chart with 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.groupX({y: "sum"}, {x: "category", y: "orders", fill: "category", title: "total"})
then hover again to see now they are one bar per category
I am really confused at what the invalid mark; Missing render function means. I feel it has to do with group x being different from bar y but I have no clue how to fix it. I cannot think of any other way to transform it.
aha, i see! Plot.groupX is not another marker, it's a data transformation, you want to have a single marker Plot.barY and inside of it you want to have the data transformation
marks: [
Plot.barY(pizza, Plot.groupX({y: "sum"}, {x: "category", y: "orders", fill: "category", title: "total"})),
],
for syntax and examples see documentation https://observablehq.com/plot/transforms/group
Once again thanks, that makes much more sense, I have basically been teaching myself Java through observable, a slow process and definitely a lot of small mistakes.
this ain's right because for each day it seems like it's plotting all possible orders. example when a chart doesn't make no sense
by explicitly setting x axis domain you can zoom in all these time series charts and examine how one week looks like:
Plot.plot({
x: {domain: [new Date("2022-02-16"), new Date("2022-02-23")]},
marks: [
Now what to do? you need to aggregate the data in each day
Plot.lineY(pizza, Plot.groupX({y: "sum"},{x: "orderDate", y: "orders", sort: "orderDate"}))
this says: at every X point you sum all the Y values of orders
for syntax and examples see documentation https://observablehq.com/plot/transforms/group
this is not right because you are setting window size to 1000 and you have weekly fluctuations (you should expect to get a straight line, because what is an average of 1000 days during one year?)
if you set window size to 7 you get a mess... again this is because data is not aggregated (previous comment)
Plot.lineY(pizza, Plot.windowY(Plot.groupX({y: "sum"},{x: "orderDate", y: "orders", k: 7, sort: "orderDate"})))
try now k=1, 7, 1000
That makes a lot more sense, I had no clue what the K did and this is actually pretty cool. Makes it actually understandable. It is weird that you had to use Plot Group X as a transformation. Definitely an interesting one.