Političke stranke i izbori

viewof mv_controls = Inputs.form({
  pA: Inputs.range([0, 1], {value: 0.3, step: 0.01, width: 230, label: "Pozicija stranke A"}),
  pB: Inputs.range([0, 1], {value: 0.7, step: 0.01, width: 230, label: "Pozicija stranke B"})
})

{
  const pA = mv_controls.pA, pB = mv_controls.pB;
  const mu = 0.5, sigma = 0.18;
  const dens = (x) => Math.exp(-0.5 * ((x - mu) / sigma) ** 2);
  const xs = d3.range(0, 1.0001, 0.004);
  const data = xs.map(x => ({x, d: dens(x), side: Math.abs(x - pA) <= Math.abs(x - pB) ? "A" : "B"}));
  const total = d3.sum(data, p => p.d);
  const shareA = d3.sum(data.filter(p => p.side === "A"), p => p.d) / total;
  const shareB = 1 - shareA;
  const winner = Math.abs(shareA - shareB) < 0.005 ? "neriješeno" : (shareA > shareB ? "A" : "B");

  return Plot.plot({
    width: 840,
    height: 350,
    marginLeft: 52,
    marginTop: 46,
    marginBottom: 44,
    style: {fontSize: "12px", fontFamily: "Public Sans, system-ui, sans-serif", color: "#3A332D", background: "transparent"},
    x: {label: "Ljevica  ←  ideološka os  →  Desnica", domain: [0, 1]},
    y: {label: "↑ Gustoća birača", domain: [0, 1.2]},
    marks: [
      Plot.areaY(data.filter(p => p.side === "A"), {x: "x", y: "d", fill: "#4A6B5C", fillOpacity: 0.35}),
      Plot.areaY(data.filter(p => p.side === "B"), {x: "x", y: "d", fill: "#6B1F26", fillOpacity: 0.35}),
      Plot.line(data, {x: "x", y: "d", stroke: "#1C1916", strokeWidth: 1.5}),
      Plot.ruleX([0.5], {stroke: "#6B6357", strokeDasharray: "4,3"}),
      Plot.ruleX([pA], {stroke: "#4A6B5C", strokeWidth: 2.5}),
      Plot.ruleX([pB], {stroke: "#6B1F26", strokeWidth: 2.5}),
      Plot.text([{x: pA, y: 1.04}], {x: "x", y: "y", text: ["A"], fill: "#4A6B5C", fontSize: 14, fontWeight: 700}),
      Plot.text([{x: pB, y: 1.04}], {x: "x", y: "y", text: ["B"], fill: "#6B1F26", fontSize: 14, fontWeight: 700}),
      Plot.text([{x: 0.5, y: 1.04}], {x: "x", y: "y", text: ["medijan"], fill: "#6B6357", fontSize: 10}),
      Plot.text([`Stranka A ${(shareA*100).toFixed(0)} %      Stranka B ${(shareB*100).toFixed(0)} %      pobjednik: ${winner}`],
        {frameAnchor: "top", dy: -32, fontSize: 13, fontWeight: 700, fill: "#1C1916"})
    ]
  });
}

{
  const data = [
    {stranka:"Možemo!", lr:2.3, blok:"Ljevica"},
    {stranka:"SDP", lr:3.7, blok:"Ljevica"},
    {stranka:"IDS", lr:4.0, blok:"Ljevica"},
    {stranka:"Centar", lr:4.7, blok:"Centar"},
    {stranka:"HDZ", lr:6.4, blok:"Desnica"},
    {stranka:"Most", lr:7.8, blok:"Desnica"},
    {stranka:"Domovinski pokret", lr:8.9, blok:"Desnica"}
  ];
  const order = data.slice().sort((a, b) => b.lr - a.lr).map(d => d.stranka);
  return Plot.plot({
    width: 860, height: 400,
    marginLeft: 132, marginRight: 44, marginTop: 30, marginBottom: 46,
    style: {fontSize: "12px", fontFamily: "Public Sans, system-ui, sans-serif", color: "#3A332D", background: "transparent"},
    x: {label: "Ljevica ← ideološka os (0–10) → Desnica", domain: [0, 10], grid: true, ticks: [0,2,4,6,8,10]},
    y: {label: null, domain: order},
    color: {domain: ["Ljevica","Centar","Desnica"], range: ["#4A6B5C","#6B6357","#C8985E"], legend: true},
    marks: [
      Plot.ruleX([5], {stroke: "#6B1F26", strokeDasharray: "5,4", strokeWidth: 1.2}),
      Plot.text([{x: 5, y: order[0], t: "sredina (5,0)"}], {x: "x", y: "y", text: "t", dy: -16, fontSize: 10, fill: "#6B1F26", textAnchor: "middle"}),
      Plot.dot(data, {x: "lr", y: "stranka", fill: "blok", r: 7, stroke: "white", strokeWidth: 1, tip: true}),
      Plot.text(data, {x: "lr", y: "stranka", text: d => d.lr.toFixed(1).replace(".", ","), dx: 13, textAnchor: "start", fontSize: 10, fill: "#3A332D"})
    ]
  });
}

viewof dp_controls = Inputs.form({
  a: Inputs.range([0.5, 3], {value: 2, step: 0.1, width: 250, label: "Dobitak a"}),
  b: Inputs.range([0.1, 1], {value: 0.2, step: 0.02, width: 250, label: "Kazna b"})
})

{
  const a = dp_controls.a, b = dp_controls.b;
  const sup = (p) => Math.max(0, a * p - b * p * p);
  const ps = d3.range(0, 10.001, 0.05);
  const curve = ps.map(p => ({p, s: sup(p)}));
  const pStar = a / (2 * b);
  const sMax = sup(pStar);
  const ymax = Math.max(6, sMax * 1.25);

  return Plot.plot({
    width: 840,
    height: 350,
    marginLeft: 55,
    marginTop: 46,
    marginBottom: 44,
    style: {fontSize: "12px", fontFamily: "Public Sans, system-ui, sans-serif", color: "#3A332D", background: "transparent"},
    x: {label: "Broj obećanja / opseg potrošnje →", domain: [0, 10]},
    y: {label: "↑ Politička podrška", domain: [0, ymax], grid: true},
    marks: [
      Plot.ruleY([0], {stroke: "#C9C3B8"}),
      Plot.line(curve, {x: "p", y: "s", stroke: "#2D5A8E", strokeWidth: 2.5, clip: true}),
      Plot.ruleX([pStar], {stroke: "#6B6357", strokeDasharray: "4,3", clip: true}),
      Plot.dot([{p: pStar, s: sMax}], {x: "p", y: "s", r: 5, fill: "#6B1F26", stroke: "white", strokeWidth: 2, clip: true}),
      Plot.text([pStar <= 10 ? `najveća podrška pri ${pStar.toFixed(1)} obećanja` : "podrška na ovom rasponu još raste"],
        {frameAnchor: "top", dy: -30, fontSize: 13, fontWeight: 700, fill: "#2D5A8E"})
    ]
  });
}