pizzaOrders@2.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
// Explore data
Plot.auto(pizzaorders_names_size, {
x: "pizza_name",
color: "pizza_size"
}).plot({ color: { legend: true } })
viewof pizzaorders_selectedState = Inputs.select(d3.group(pizzaorders, d => d.state), {label: "Select State:"})
Plot.plot({
marks: [
Plot.axisY({fontSize:12, marginLeft: 50}),
Plot.ruleY([0]),
Plot.lineY(pizzaorders_selectedState, Plot.groupX({y: "sum"}, {x: "orderDate", y: "total", z: "category", stroke: "category", title: "category"}))
],
color : {
legend: true
},
y: {domain: [0,45000]} // I would prefer this be a function like max of CA or NV so that it was dynamic
})
Plot.auto(pizzaorders_names_size, {
x: "pizza_size",
color: { value: "category", reduce: null },
size: "total"
}).plot({ color: { legend: true } })
Plot.auto(pizzaorders_names_size, {
x: "orders",
color: "category",
fy: "pizza_size"
}).plot({ color: { legend: true } })
pizzaorders_names = addColumn(pizzaorders, 'pizza_name', d => d.name.split('Pizza')[0])
pizzaorders_names_size = addColumn(pizzaorders_names, 'pizza_size', d => d.name.split('Pizza')[1])
// ability to add column to array
// source: https://observablehq.com/@observablehq/excel-add-columns
function addColumn(tableData, newColumnName, newColumnFunction) {
return tableData.map(row => {
let returnObject = row;
returnObject[newColumnName] = newColumnFunction(row)
return returnObject
})
}
// sample input: laserStrikes = addColumn(fixedStates, 'year', row => row['Incident Date'].getFullYear())
// sample output: laserStrikes = Array(35123) [Object, Object, Object, Object, Object, Object...
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.
