Public
Edited
Apr 24
import {vl} from "@vega/vega-lite-api-v5"
import {printTable} from "@uwdata/data-utilities"
coffee_low_man = FileAttachment("Coffee-lower-manhattan.csv").csv()
vl.markBar()
.data(
Array.from(
d3.rollup(
coffee_low_man.filter(d => d.product_category && d.product_category.trim() !== ""),
v => v.length,
d => d.product_category
),
([category, count]) => ({ category, count })
)
.sort((a, b) => d3.descending(a.count, b.count))
.slice(0, 3)
)
.encode(
vl.y().fieldN("category").sort("-x")
.axis({ title: "Product Category" }),
vl.x().fieldQ("count").axis({ title: "Transactions" }),
vl.color().fieldQ("count").scale({ scheme: "browns" }),
vl.tooltip(["category", "count"])
)
.width(400)
.height(180)
.title("Top 3 Product Categories by Transactions")
.render();
vl.markBar()
.data(
Array.from(
d3.rollup(
coffee_low_man.filter(d => d.product_type && d.product_type.trim() !== ""),
v => v.length,
d => d.product_type
),
([type, count]) => ({ type, count })
)
.sort((a, b) => d3.descending(a.count, b.count))
.slice(0, 3)
)
.encode(
vl.y().fieldN("type").sort("-x").axis({ title: "Product Type" }),
vl.x().fieldQ("count").axis({ title: "Transactions" }),
vl.color().fieldQ("count").scale({ scheme: "browns" }),
vl.tooltip(["type", "count"])
)
.width(400)
.height(180)
.title("Top 3 Product Types by Transactions")
.render();
monthNames = ["Jan-2023","Feb-2023","Mar-2023","Apr-2023","May-2023","Jun-2023"];
vl.markBar()
.data(
Array.from(
d3.rollup(
coffee_low_man.filter(d => {
if (!d.transaction_date) return false;
const [m] = d.transaction_date.split("/");
const monthNum = +m;
return monthNum >= 1 && monthNum <= 6;
}),
v => v.length,
d => +d.transaction_date.split("/")[0]
),
([month, count]) => ({
month,
label: monthNames[month - 1],
count
})
)
.sort((a, b) => d3.ascending(a.month, b.month))
)
.encode(
vl.x().fieldN("label")
.sort(monthNames)
.axis({ title: "" }),
vl.y().fieldQ("count").axis({ title: "Transactions" }),
vl.color().fieldQ("count").scale({ scheme: "oranges" }),
vl.tooltip(["label", "count"])
)
.width(500)
.height(240)
.title("Amount of Monthly Transactions (Jan–Jun 2023)")
.render();
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.
