daily_orders_product
Type Table, then Shift-Enter. Ctrl-space for more options.
pizzaColors = Object.fromEntries(pizzaNames.map(pizzaName => [pizzaName, randomColor()]));
getDataForChart = () => {
const keyToUse = namePizza.value || "totalOrders";
const values = formatteddayOrders.map(dayData => dayData[keyToUse]);
const labels = formatteddayOrders.map(dayData => dayData.dayy);
const title = namePizza.value ? `Orders for ${namePizza.value}` : 'Total Orders for Each Day';
return { values, labels, title };
}
viewof checkboxes = Inputs.checkbox(["A", "B"], {label: "Select some", value: ["A"]})
Plot.plot({
height: 700,
width: 1000,
style: "overflow: visible;",
y: { grid: true },
x: { grid: true },
marks: [
Plot.ruleY([0]),
...Object.entries(formatteddayOrdersPizza[0]).slice(1).map(([pizzaName, _]) => {
return Plot.line(formatteddayOrdersPizza, { x: "dayy", y: pizzaName, stroke: pizzaColors[pizzaName] });
}),
...Object.entries(formatteddayOrdersPizza[0]).slice(1).map(([pizzaName, _]) => {
return Plot.text(formatteddayOrdersPizza, Plot.selectLast({ x: "dayy", y: pizzaName, text: pizzaName, textAnchor: "start", dx: 3 }));
})
]
});
Plot.plot({
height: 700,
width: 1000,
style: "overflow: visible;",
y: { grid: true },
x: { grid: true },
marks: [
Plot.ruleY([0]),
...pizzaNames.map(pizzaName => {
const isSelected = viewof namePizza.value.length > 0 ? viewof namePizza.value.includes(pizzaName) : true;
const pizzaData = filteredData.filter(d => isSelected && d.name === pizzaName);
return Plot.lineY(pizzaData, { x: "order_date", y: "orders", stroke: pizzaColors[pizzaName] });
}),
...pizzaNames.map(pizzaName => {
const isSelected = viewof namePizza.value.length > 0 ? viewof namePizza.value.includes(pizzaName) : true;
const pizzaData = filteredData.filter(d => isSelected && d.name === pizzaName);
return Plot.text(pizzaData, Plot.selectLast({ x: "order_date", y: "orders", z: "name", text: "name", textAnchor: "start", dx: 3 }));
})
]
});
//Your Inputs here
//Your Plot here
import {Sunburst} from "@d3/sunburst"
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.
