Public
Edited
May 6
diversified_ecommerce_dataset_small.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
data = FileAttachment("diversified_ecommerce_dataset_small.csv").csv()
viewof gender = Inputs.select(
[...new Set(data.map(d => d["Customer Gender"]))].filter(Boolean),
{label: "Customer Gender"}
)
viewof ageGroup = Inputs.select(
[...new Set(data.map(d => d["Customer Age Group"]))].filter(Boolean),
{label: "Customer Age Group"}
)
filtered = data.filter(d =>
d["Customer Gender"] === gender &&
d["Customer Age Group"] === ageGroup
)
[...new Set(data.map(d => d["Customer Gender"]))]
[...new Set(data.map(d => d["Customer Age Group"]))]
Plot.plot({
x: {label: "Shipping Method"},
y: {label: "Return Rate (%)"},
marks: [
Plot.boxY(
data
.filter(d => d["Shipping Method"] && d["Return Rate"] !== "")
.map(d => ({
method: d["Shipping Method"],
returnRate: +d["Return Rate"]
})),
{
x: "method",
y: "returnRate",
tip: true
}
)
]
})
Plot.plot({
x: {label: "Category"},
y: {label: "Popularity Index"},
marks: [
Plot.boxY(
data
.filter(d => d["Category"] && d["Popularity Index"] !== "")
.map(d => ({
category: d["Category"],
popularity: +d["Popularity Index"]
})),
{
x: "category",
y: "popularity",
tip: true
}
)
]
})
filtered.slice(0, 5)
filtered.map(d => [d["Shipping Method"], d["Return Rate"]]).slice(0, 10)
returnByShipping = filtered
.filter(d =>
d["Shipping Method"] &&
d["Return Rate"] &&
d["Shipping Method"].trim() !== "" &&
!isNaN(+d["Return Rate"])
)
.map(d => ({
method: d["Shipping Method"].trim(),
rate: +d["Return Rate"]
}))
returnByShipping.slice(0, 5)
returnByShipping.map(d => d.method)
// Step 1: Compute average return rate per shipping method
shippingAverages = Array.from(
d3.group(returnByShipping, d => d.method),
([method, values]) => ({
method,
avgRate: d3.mean(values, d => d.rate)
})
)
Plot.plot({
x: {label: "Shipping Method"},
y: {label: "Average Return Rate (%)"},
marks: [
Plot.barY(shippingAverages, {
x: "method",
y: "avgRate",
fill: "method",
tip: true
})
]
})
html`<div style="display: flex; flex-direction: column; gap: 2rem; font-family: sans-serif;">
<!-- Filters -->
<div style="display: flex; gap: 2rem;">
<div>${viewof gender}</div>
<div>${viewof ageGroup}</div>
</div>
<!-- Row 1: Return Rate + Popularity Index -->
<div style="display: flex; flex-wrap: wrap; gap: 2rem;">
<!-- Box Plot: Return Rate by Shipping Method -->
<div style="flex: 1 1 400px;">
<h4 style="margin-bottom: 0.5rem;">📦 Return Rate by Shipping Method</h4>
${Plot.plot({
x: { label: "Shipping Method" },
y: { label: "Return Rate (%)" },
height: 300,
marks: [
Plot.boxY(
filtered
.filter(d => d["Shipping Method"] && d["Return Rate"])
.map(d => ({
method: d["Shipping Method"],
returnRate: +d["Return Rate"]
})),
{
x: "method",
y: "returnRate",
tip: true
}
)
]
})}
</div>
<!-- Box Plot: Popularity Index by Category -->
<div style="flex: 1 1 400px;">
<h4 style="margin-bottom: 0.5rem;">🔥 Popularity Index by Category</h4>
${Plot.plot({
x: { label: "Category" },
y: { label: "Popularity Index" },
height: 300,
marks: [
Plot.boxY(
filtered
.filter(d => d["Category"] && d["Popularity Index"])
.map(d => ({
category: d["Category"],
popularity: +d["Popularity Index"]
})),
{
x: "category",
y: "popularity",
tip: true
}
)
]
})}
</div>
</div>
<!-- Row 2: Average Return Rate Full Width -->
<div>
<h4 style="margin-bottom: 0.5rem;">📊 Average Return Rate by Shipping Method</h4>
${Plot.plot({
x: { label: "Shipping Method" },
y: { label: "Average Return Rate (%)" },
height: 300,
width: 800,
marks: [
Plot.barY(
Array.from(
d3.rollup(
filtered,
v => d3.mean(v, d => +d["Return Rate"]),
d => d["Shipping Method"]
),
([method, avgRate]) => ({ method, avgRate })
),
{
x: "method",
y: "avgRate",
fill: "method",
tip: true
}
)
]
})}
</div>
</div>`
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.
