Uloga interesnih skupina

{
  const rows = [
    {zemlja:"Francuska", gustoca:10.0, pokrivenost:98.0},
    {zemlja:"Finska", gustoca:51.4, pokrivenost:88.8},
    {zemlja:"Švedska", gustoca:65.9, pokrivenost:88.0},
    {zemlja:"Slovenija", gustoca:20.4, pokrivenost:83.1},
    {zemlja:"Njemačka", gustoca:14.1, pokrivenost:54.0},
    {zemlja:"Hrvatska", gustoca:20.8, pokrivenost:52.7}
  ];
  const order = rows.map(d => d.zemlja);
  return Plot.plot({
    width: 880, height: 400,
    marginLeft: 96, marginRight: 60, marginTop: 30, marginBottom: 46,
    style: {fontSize: "13px", fontFamily: "Public Sans, system-ui, sans-serif", color: "#3A332D", background: "transparent"},
    x: {label: "Udio zaposlenih (%) →", domain: [0, 105], grid: true},
    y: {label: null, domain: order},
    color: {domain: ["Sindikalna gustoća","Pokrivenost kolektivnim ugovorima"], range: ["#4A6B5C","#C8985E"], legend: true},
    marks: [
      Plot.axisY({fill: d => d === "Hrvatska" ? "#C8942D" : "#3A332D", fontWeight: d => d === "Hrvatska" ? 700 : 400}),
      Plot.link(rows, {x1: "gustoca", x2: "pokrivenost", y: "zemlja", stroke: d => d.zemlja === "Hrvatska" ? "#C8942D" : "#C9C3B8", strokeWidth: d => d.zemlja === "Hrvatska" ? 3.5 : 2.5}),
      Plot.dot(rows, {x: "gustoca", y: "zemlja", fill: () => "Sindikalna gustoća", r: 6, stroke: "white", strokeWidth: 1, tip: true}),
      Plot.dot(rows, {x: "pokrivenost", y: "zemlja", fill: () => "Pokrivenost kolektivnim ugovorima", r: 6, stroke: "white", strokeWidth: 1, tip: true}),
      Plot.text(rows, {x: "gustoca", y: "zemlja", text: d => d.gustoca.toFixed(1).replace(".", ","), dy: -12, fontSize: 9, fill: "#4A6B5C"}),
      Plot.text(rows, {x: "pokrivenost", y: "zemlja", text: d => d.pokrivenost.toFixed(1).replace(".", ","), dy: -12, fontSize: 9, fill: "#9A6F38"})
    ]
  });
}

viewof rs_controls = Inputs.form({
  Qreg: Inputs.range([5, 39], {value: 25, step: 1, width: 320, label: "Dopuštena količina Q"})
})

{
  const Qreg = rs_controls.Qreg;
  const D = (q) => 100 - q;
  const S = (q) => 20 + q;
  const Qstar = 40, Pstar = 60;
  const Dr = D(Qreg), Sr = S(Qreg);
  const rent = (Dr - Sr) * Qreg;
  const dwl = 0.5 * (Dr - Sr) * (Qstar - Qreg);
  const qs = d3.range(0, 81, 1);
  const demand = qs.map(q => ({q, p: D(q)})).filter(p => p.p >= 0);
  const supply = qs.map(q => ({q, p: S(q)})).filter(p => p.p <= 100);
  const rect = [{q: 0, p: Sr}, {q: Qreg, p: Sr}, {q: Qreg, p: Dr}, {q: 0, p: Dr}];
  const tri  = [{q: Qreg, p: Dr}, {q: Qreg, p: Sr}, {q: Qstar, p: Pstar}];
  return Plot.plot({
    width: 720, height: 352,
    marginLeft: 52, marginTop: 46, marginBottom: 44,
    style: {fontSize: "12px", fontFamily: "Public Sans, system-ui, sans-serif", color: "#3A332D", background: "transparent"},
    x: {label: "Količina Q →", domain: [0, 80]},
    y: {label: "↑ Cijena / granični trošak", domain: [0, 100], grid: true},
    marks: [
      Plot.line([...rect, rect[0]], {x: "q", y: "p", fill: "#E8D6B8", fillOpacity: 0.6, stroke: "#C8985E", strokeWidth: 1}),
      Plot.line([...tri, tri[0]],   {x: "q", y: "p", fill: "#D8B5B3", fillOpacity: 0.65, stroke: "#6B1F26", strokeWidth: 1}),
      Plot.line(demand, {x: "q", y: "p", stroke: "#2D5A8E", strokeWidth: 2.5}),
      Plot.line(supply, {x: "q", y: "p", stroke: "#4A6B5C", strokeWidth: 2.5}),
      Plot.ruleX([Qreg],  {y1: 0, y2: Dr,    stroke: "#6B6357", strokeDasharray: "4,3"}),
      Plot.ruleX([Qstar], {y1: 0, y2: Pstar, stroke: "#6B6357", strokeDasharray: "4,3"}),
      Plot.text([{q: 74, y: D(74)}], {x: "q", y: "y", text: ["potražnja"], dy: -8, fill: "#2D5A8E", fontSize: 11, fontWeight: 600}),
      Plot.text([{q: 74, y: S(74)}], {x: "q", y: "y", text: ["ponuda (MC)"], dy: -8, fill: "#4A6B5C", fontSize: 11, fontWeight: 600}),
      Plot.text([{q: Qreg * 0.5, y: (Sr + Dr) / 2}], {x: "q", y: "y", text: ["renta"], fill: "#9A6F38", fontSize: 12, fontWeight: 700}),
      Plot.text([{q: Qreg + (Qstar - Qreg) * 0.55, y: Pstar + 6}], {x: "q", y: "y", text: ["mrtvi teret"], fill: "#6B1F26", fontSize: 11, fontWeight: 700}),
      Plot.text([{q: Qreg, y: 2}],  {x: "q", y: "y", text: ["Q_reg"], fill: "#6B6357", fontSize: 11}),
      Plot.text([{q: Qstar, y: 2}], {x: "q", y: "y", text: ["Q*"], fill: "#6B6357", fontSize: 11}),
      Plot.text([`Renta = ${rent.toFixed(0)}      Mrtvi teret = ${dwl.toFixed(0)}`],
        {frameAnchor: "top", dy: -32, fontSize: 13, fontWeight: 700, fill: "#1C1916"})
    ]
  });
}

viewof gh_controls = Inputs.form({
  a: Inputs.range([0.5, 10], {value: 2, step: 0.1, width: 200, label: "Blagostanje a"}),
  alpha: Inputs.range([0.1, 0.9], {value: 0.4, step: 0.05, width: 200, label: "Organizirani α"}),
  z: Inputs.range([0.5, 3], {value: 1, step: 0.1, width: 200, label: "Omjer X/M"})
})

{
  const a = gh_controls.a, alpha = gh_controls.alpha, z = gh_controls.z;
  const org   = (e) => (1 - alpha) / (a + alpha) * z / e;
  const unorg = (e) => (-alpha)   / (a + alpha) * z / e;
  const es = d3.range(0.5, 5.01, 0.05);
  const curveOrg   = es.map(e => ({e, t: org(e)}));
  const curveUnorg = es.map(e => ({e, t: unorg(e)}));
  return Plot.plot({
    width: 760, height: 322,
    marginLeft: 58, marginTop: 36, marginBottom: 46,
    style: {fontSize: "12px", fontFamily: "Public Sans, system-ui, sans-serif", color: "#3A332D", background: "transparent"},
    x: {label: "Elastičnost uvozne potražnje e →", domain: [0.5, 5]},
    y: {label: "↑ Stopa zaštite t/(1+t)", domain: [-0.6, 1], grid: true},
    marks: [
      Plot.ruleY([0], {stroke: "#6B6357", strokeDasharray: "4,3"}),
      Plot.line(curveOrg,   {x: "e", y: "t", stroke: "#4A6B5C", strokeWidth: 2.5, clip: true}),
      Plot.line(curveUnorg, {x: "e", y: "t", stroke: "#6B1F26", strokeWidth: 2.5, clip: true}),
      Plot.text([{e: 1.2, t: org(1.2)}], {x: "e", y: "t", text: ["organizirani (I=1)"], dy: -10, fill: "#4A6B5C", fontSize: 12, fontWeight: 600}),
      Plot.text([{e: 1.2, t: unorg(1.2)}], {x: "e", y: "t", text: ["neorganizirani (I=0)"], dy: 14, fill: "#6B1F26", fontSize: 12, fontWeight: 600})
    ]
  });
}