Public
Edited
Mar 5
Insert cell
Insert cell
Art_Materials.csv
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
Art_Materials.csv
Type SQL, then Shift-Enter. Ctrl-space for more options.

Insert cell
data = d3.csvParse(await FileAttachment("Art_Materials.csv").text(), d3.autoType);

Insert cell
viewof selectedBrand = Inputs.select(
["All", ...new Set(data.map(d => d.brand))],
{ label: "Filter by Brand", value: "All" }
);

Insert cell
enhancedData = cleanedData.map(d => ({
...d,
stock_status: d.stock ?
(d.stock.includes("Low Stock") ? "Low Stock" :
d.stock.includes("Awaiting Stock") ? "Awaiting Stock" :
"In Stock") :
"Unknown"
}));
Insert cell
cleanedData = data.map(d => ({
price: parseFloat(d.price) || null,
RRP: parseFloat(d.RRP) || null,
brand: d.brand,
series: d.product_propablity, detail: d.product_detail,
stock: d.stock_info ? d.stock_info : null
}));
Insert cell
filteredData = selectedBrand === "All"
? enhancedData
: enhancedData.filter(d => d.brand === selectedBrand);

Insert cell

viewof stockFilter = Inputs.range([0, Math.min(enhancedData.length, 500)], {
step: 1,
value: Math.min(10, enhancedData.length),
label: "Show items with stock inventory below:"
});
Insert cell
filteredStockData = filteredData
.filter(d => d.stock_status === "Low Stock")
.slice(0, stockFilter);

Insert cell

chart2 = Plot.plot({
title: "Price vs. RRP (Filtered by Inventory Level)",
y: { label: "Price ($)" },
x: { label: "RRP ($)" },
marks: [
Plot.dot(filteredStockData, { x: "RRP", y: "price", fill: "red", opacity: 0.6 })
]
});

Insert cell

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.
Learn more