Plot = import("https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6/+esm")
plotWidth = Math.min(width, 980)
data = [
{quarter: "Q1", region: "София", sales: 320},
{quarter: "Q2", region: "София", sales: 310},
{quarter: "Q3", region: "София", sales: 280},
{quarter: "Q4", region: "София", sales: 250},
{quarter: "Q1", region: "Пловдив", sales: 180},
{quarter: "Q2", region: "Пловдив", sales: 175},
{quarter: "Q3", region: "Пловдив", sales: 190},
{quarter: "Q4", region: "Пловдив", sales: 210},
{quarter: "Q1", region: "Варна", sales: 150},
{quarter: "Q2", region: "Варна", sales: 145},
{quarter: "Q3", region: "Варна", sales: 140},
{quarter: "Q4", region: "Варна", sales: 135},
{quarter: "Q1", region: "Бургас", sales: 90},
{quarter: "Q2", region: "Бургас", sales: 95},
{quarter: "Q3", region: "Бургас", sales: 100},
{quarter: "Q4", region: "Бургас", sales: 110}
]
Plot.plot({
width: plotWidth,
height: 420,
marginRight: 80,
style: {fontSize: "14px", fontFamily: "Inter, sans-serif"},
title: "Продажби по региони, Q1–Q4 2025",
x: {label: null, padding: 0.2},
y: {label: "Продажби (хил. лв.)", grid: true},
color: {
domain: ["София", "Пловдив", "Варна", "Бургас"],
range: ["#e74c3c", "#3498db", "#2ecc71", "#f39c12"],
legend: true
},
marks: [
Plot.lineY(data, {x: "quarter", y: "sales", stroke: "region", strokeWidth: 2.5, tip: true}),
Plot.dot(data, {x: "quarter", y: "sales", fill: "region", r: 5, tip: true})
]
})