Public
Edited
Apr 24
Coffee-lower-manhattan@1.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
{
const top3 = Array.from(
d3.rollup(
coffeeLowerManhattan1,
v => v.length,
d => d.product_category
),
([product_category, count]) => ({ product_category, count })
)
.sort((a, b) => d3.descending(a.count, b.count))
.slice(1, 4);
return vl.layer(
vl.markBar()
.data(top3)
.encode(
vl.x().fieldQ("count").title("Number of Transactions"),
vl.y().fieldN("product_category").title("Product Category"),
vl.color().fieldN("product_category").legend(null)
),
vl.markText({ align: "left", dx: 5 })
.data(top3)
.encode(
vl.x().fieldQ("count"),
vl.y().fieldN("product_category"),
vl.text().fieldQ("count")
)
)
.title("Top 3 Product Categories by Number of Transactions")
.width(400)
.height(300)
.render();
}
{
const top3 = Array.from(
d3.rollup(
coffeeLowerManhattan1,
v => v.length,
d => d.product_type
),
([product_type, count]) => ({ product_type, count })
)
.sort((a, b) => d3.descending(a.count, b.count))
.slice(1, 4);
return vl.markBar()
.data(top3)
.encode(
vl.x().fieldN("product_type").title("Product Type"),
vl.y().fieldQ("count").title("Number of Transactions"),
vl.color().fieldN("product_type").legend(null)
)
.title("Top 3 Product Types by Number of Transactions")
.width(400)
.height(300)
.render();
}
{
const parseMonth = d => {
let date = new Date(d.transaction_date);
return date.getMonth() + 1;
};
const withMonth = coffeeLowerManhattan1.map(d => ({
...d,
month: parseMonth(d)
}));
const monthCounts = Array.from(
d3.rollup(
withMonth,
v => v.length,
d => d.month
),
([month, count]) => ({ month, count })
);
const topMonth = monthCounts.sort((a, b) => d3.descending(a.count, b.count))[0];
return vl.markBar()
.data(monthCounts)
.encode(
vl.x().fieldO("month").title("Month"),
vl.y().fieldQ("count").title("Number of Transactions"),
vl.color().fieldN("month").legend(null)
)
.title("Transactions per Month")
.width(400)
.height(300)
.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.
