Public
Edited
Apr 4, 2023
Plot.plot({
facet: inbar.facet == 'no facet' ? {} : {
data: pizzaOrders,
x: inbar.facet
},
marks: [
Plot.barY(pizzaOrders,
Plot.groupX({y: inbar.agg_type, title: d => d3[inbar.agg_type](d, v => v[inbar.data]) },
{x: inbar.agg_data,
y: inbar.data,
fill: inbar.fill
})),
Plot.ruleY([0])
],
x: {
tickFormat: inbar.agg_data == 'day_of_week' ?
(inbar.facet == 'no facet' ?
d => dow_legend[d] :
d => dow_legend[d][0]) :
(inbar.agg_data == 'size' && inbar.facet != 'no facet' ?
(d, i) => ['XL', 'L', 'M', 'S'][i] :
undefined),
}, y: {
tickFormat: inbar.data == 'total' ? d3.format('$,') : null
},
color: {
legend: inbar.fill == inbar.agg_data ? false : true,
domain: inbar.fill == 'day_of_week' ? d3.range(7) : undefined,
tickFormat: inbar.fill == 'day_of_week' ? d => dow_legend[d] : undefined
},
width
})
Plot.plot({
marks: [
Plot.ruleY([0]),
Plot.barX(pizzaOrders, Plot.groupY({x: 'sum', title: d => d3.sum(d, v => v[data_barx])},
{y: 'name', x: data_barx, fill: 'category', sort: {y: 'x', reverse: true}}))
],
color: {
legend: true
},
marginLeft: 150
});
{
const filter = d => filter_date(d.orderDate, ins.interval) && filter_dow(d.day_of_week, ins.dow);
const x = 'orderDate';
const y = ins.data;
const z = ins.z == 'none' ? undefined : ins.z;
const color = ins.z == 'none' ? d => '#AAA' : ins.z;
const agg = 'sum';
const tooltip = d => `${format_date(d[0].orderDate)} ${d3.sum(d, v => v[ins.data])}`;
const pizzaByDay = ins.show.includes('mean') && ins.facet == 'no facet' && z == 'day_of_week' ?
d3.rollups(pizzaOrders.filter(filter), d => aggregate(d, ['orderDate', 'day_of_week']), d => d.orderDate) :
[];
return Plot.plot({
facet: ins.facet == 'no facet' ? undefined : {
data: pizzaOrders,
y: ins.facet
},
marks: [
Plot.frame({anchor: "bottom"}),
Plot.ruleY(pizzaByDay, Plot.groupZ({y: 'mean'},
{y: d => d[1][y], z: d => d[1].day_of_week, stroke: d => d[1].day_of_week})),
Plot.dot(pizzaOrders,
Plot.groupX({y: agg, title: tooltip},
{x, y, fill: color, filter, r: ins.radius})),
Plot.line(ins.show.includes('line') ? pizzaOrders : [],
Plot.groupX({y: agg},
{x, y, stroke: color, filter, curve: ins.curve, strokeWidth: ins.line_width}))
],
y: {
tickFormat: ins.data == 'total' ? d3.format('$,') : null,
grid: true
},
color: {
legend: ins.z == 'none' ? false : true,
domain: z == 'day_of_week' ? d3.range(7) : undefined,
tickFormat: z == 'day_of_week' ? d => dow_legend[d] : undefined
},
width
});
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
