leveldata = transpose(leveldata_raw)
d_output_plot = transpose(d_output_plot_raw)
formatWeek = d3.timeFormat("%e %b %y")

url = "https://simonjackman.netlify.app"

Plot.plot(
  {
    width: 800,
    height: 688,
    marginBottom: 88,
    marginRight: 32,
    y: {
      label: "Yes %",
      grid: true,
      inset: 6
    },
    
    x: {
      label: null,
      round: true,
      nice: d3.utcWeek,
      type: "utc",
      ticks: null,
      tickFormat: null
    },
    
    marks: [

    Plot.axisX(
      {
        ticks: "year", 
        tickSize: 28, 
        tickPadding: -11, 
        tickFormat: "  %Y", 
        textAnchor: "start"
      }
    ),
    
    Plot.axisX(
      {
        ticks: "month",
        tickSize: 16,
        tickPadding: -11,
        tickFormat: "  %b",
        textAnchor: "start"
      }
    ),

    Plot.gridX(
      {
        ticks: "month",
        stroke: "black",
        strokeOpacity: 0.15,
        insetBottom: -0.5
      }
    ),
    
    
    Plot.areaY(
      leveldata, 
      {
        x: "datetime", 
        y1: "lo", 
        y2: "up",
        fill: "orange",
        fillOpacity: 0.25
      }
    ),
    
    
    
    Plot.lineY(
      leveldata,
      {
        x: "datetime",
        y: "mean",
        stroke: "black",
        strokeWidth: 5
      }
    ),
    
    
    Plot.ruleY([50]),
    Plot.ruleY([39.94]),
    
    Plot.text(
      ["Referendum result: Yes 39.94%"],
      {
        x: new Date("2022-08-01"),
        y: 39.94,
        dy: -4,
        dx: -24,
        lineAnchor: "bottom",
        textAnchor: "start",
        text: (d) => d
      }
    ),
    
    
    Plot.ruleX(
      leveldata,
        Plot.pointerX(
        {
          x: "datetime",
          py: "mean",
          stroke: "#FF00002F",
          strokeWidth: 1
        }
      )
    ),
    
    
    Plot.ruleX([new Date("2023-04-05")],
      {
        stroke: "black",
        strokeWidth: 1
      }
    ),
    
    Plot.text(
      ["Dutton\nannouncement"],
      {
        x: new Date("2023-04-05"),
        y: 64.5,
        dx: 4,
        lineAnchor: "middle",
        textAnchor: "start",
        text: (d) => d
      }
    ),
    
    Plot.ruleX([new Date("2023-08-30")],
      {
        stroke: "black",
        strokeWidth: 1
      }
    ),
    
    Plot.text(
      ["Yes\nlaunch"],
      {
        x: new Date("2023-08-30"),
        y: 64.5,
        dx: 4,
        lineAnchor: "middle",
        textAnchor: "start",
        text: (d) => d
      }
    ),
    
    
    
    Plot.dot(
      leveldata,
        Plot.pointerX(
        {
          x: "datetime",
          y: "mean",
          r: 6,
          stroke: "red",
          fill: "black"
        }
      )
    ),
    
    Plot.text(
      leveldata,
        Plot.pointerX(
          {
            px: "datetime",
            py: "mean",
            dy: -17,
            frameAnchor: "top-right",
            fontSize: 14,
            text: 
              (d) =>  [
              `${formatWeek(
                  d3.utcParse("%Y-%m-%dT%H:%M:%SZ")(d.datetime)
                  )
                  }`,
              `${
                "Poll average "
                }` +
              `${d.mean.toFixed(1)}%` + 
              ` ± ${d.moe.toFixed(1)}`
              ].join(" ")
          }
        )
    ),
    
    Plot.dot(
      d_output_plot,
      {
        x: "mid_date",
        y: "y",
        r: "n_eff_model"
      }
    ),
    
    Plot.tip(
      d_output_plot,
      Plot.pointer(
        {
          x: "mid_date",
          y: "y",
          title: (d) => 
            [
              d.Pollster + " " + d3.format(".1f")(d.y) +"%", 
              "Start: " + d.FieldedStart, 
              "End: " + d.FieldedEnd,
              "Yes: " + d.Yes_prop,
              "No: " + d.No_prop,
              "Undecided: " + d.Unsure_prop,
              "Sample size: " + d3.format(",d")(d.SampleSize)
            ].join("\n")
        }
      )
    ),
    
    Plot.text(
      [
      "Poll average computed by " +
      "Professor Simon Jackman. " 
      ],
      {
        frameAnchor: "bottom-left",
        dy: 50,
        fontSize: 15,
        fontColor: "blue",
        lineAnchor: "bottom",
        text: (d) => d,
        href: d => url
      }
      ),
     
     Plot.text(
      [
      "Data compiled by Casey Briggs, Australian Broadcasting Corporation." 
      ],
      {
        frameAnchor: "bottom-left",
        dy: 50 + 15 + 2,
        fontSize: 15,
        lineAnchor: "bottom",
        text: (d) => d
      }
      ), 
      
    Plot.text(
      [
      "Shaded region is a 95% credible interval. " +
      "Roll over points to reveal details of polls."
      ],
      {
        frameAnchor: "bottom-left",
        dy: 50 + 15 + 15 + 2,
        fontSize: 15,
        lineAnchor: "bottom",
        text: (d) => d
      }
      )
    
  ]
  
  }
)