Public
Edited
May 6
phone_usage_india@2.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
data = FileAttachment("phone_usage_india@2.csv").csv()
viewof selectedState = Inputs.select(
[...new Set(data.map(d => d.Location))].filter(Boolean).sort(),
{ label: "Select a State", value: "Delhi" }
)
data.slice(0, 5)
[...new Set(data.map(d => d.State))].slice(0, 10)
filteredData = data.filter(d => d.State === selectedState)
data.slice(0, 5)
[...new Set(data.map(d => d.State))].slice(0, 20)
Plot.plot({
marginLeft: 60,
marginBottom: 50,
x: { label: "Gender" },
y: { label: "Avg Usage Time (minutes)", grid: true },
color: { legend: true, label: "Gender" },
marks: [
Plot.barY(filteredData, {
x: "gender",
y: "avg_usage_time",
fill: "gender",
title: d => `${d.gender}: ${d.avg_usage_time} mins`
}),
Plot.ruleY([0])
]
})
Plot.plot({
marks: [
Plot.barY(alphabet, {x: "letter", y: "frequency", sort: {x: "y", reverse: true}}),
Plot.ruleY([0])
]
})
Object.keys(data[0])
Plot.plot({
width: 800,
height: 600,
marginLeft: 120,
x: { label: "Avg Usage Time (minutes)", grid: true },
y: { label: "State", tickRotate: -30 },
color: { legend: true, label: "Area (Urban/Rural)" },
marks: [
Plot.barX(
Plot.group({ y: "mean" }, {
x: "avg_usage_time",
y: "state",
fill: "area",
data: data
})
),
Plot.ruleX([0])
]
})
Plot.plot({
marginLeft: 80,
width: 700,
height: 400,
x: { label: "Area (Urban / Rural)" },
y: { label: "Average Usage Time (minutes)", grid: true },
color: { legend: true, label: "Gender" },
marks: [
Plot.barY(
Plot.group(
{ y: "mean" },
{
x: "area",
y: "avg_usage_time",
fill: "gender",
data: data
}
)
),
Plot.ruleY([0])
]
})
Object.keys(data[0])
[...new Set(data.map(d => d.area))]
Plot.plot({
width: 800,
height: 600,
marginLeft: 120,
x: { label: "Avg Usage Time (minutes)", grid: true },
y: { label: "State", tickRotate: -30 },
color: { legend: true, label: "Area" },
marks: [
Plot.barX(
Plot.group({ y: "mean" }, {
x: "avg_usage_time",
y: "state",
fill: "area",
data: data
})
),
Plot.ruleX([0])
]
})
data.forEach(d => {
const age = +d.Age;
d.age_group = age < 20 ? "<20" :
age <= 30 ? "21-30" :
age <= 40 ? "31-40" :
age <= 50 ? "41-50" :
"51+";
});
Object.keys(data[0])
data.slice(0, 5)
Plot.plot({
x: { label: "Primary Use" },
y: { label: "Avg Monthly Recharge (INR)", grid: true },
color: { legend: true, label: "Primary Use" },
marks: [
Plot.barY(
Plot.group({ y: "mean" }, {
x: d => d["Primary Use"],
y: d => +d["Monthly Recharge Cost (INR)"],
fill: d => d["Primary Use"],
data: data
})
),
Plot.ruleY([0])
]
})
Plot.plot({
marks: [
Plot.rectY(olympians, Plot.binX({y: "count"}, {x: "weight"})),
Plot.ruleY([0])
]
})
Plot.plot({
x: { label: "Primary Use" },
y: { label: "Avg Recharge Cost (INR)", grid: true },
color: { legend: true },
marks: [
Plot.barY(
Plot.group({ y: "mean" }, {
x: "Primary Use",
y: "Monthly Recharge Cost (INR)",
fill: "Primary Use",
data: data
})
),
Plot.ruleY([0])
]
})
Plot.plot({
marks: [
Plot.areaY(aapl, {x: "Date", y: "Close"}),
Plot.ruleY([0])
]
})
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.
