Overtime Changes

import {yamultiselect} from '@saneef/yet-another-multi-select'


Plot.plot({
  className: "plot",
  y: {domain: [-4, 4]},
  x: {domain: [2006, 2022], tickFormat: "", label: false,labelArrow: false},
  marks: [
    Plot.axisY({
      label: "Perceived Ideology",
      labelAnchor: "center", 
      labelArrow: false}),
    Plot.axisY({
      label: "Conservative", 
      labelAnchor: "top"}),  
    Plot.axisY({
      label: "Liberal", 
      labelAnchor: "bottom",
      labelArrow: "down"}),  
    Plot.gridY({stroke: "black", strokeOpacity: 0.2}),
    Plot.gridX({stroke: "black", strokeOpacity: 0.2}),
    Plot.dot(datafiltered, 
    {
      x: "year", 
      y: "Ideology",
      z: "Candidate",
      fill: "Candidate",
      channels: {
        Name: "Candidate",
        "Voter Ideo": "Ideology", 

      },
      tip: {
        format: {
          y: false,
          x: false
        }
      }
      }),
    Plot.lineY(datafiltered, 
    {
      x: "year", 
      y: "Ideology",
      z: "Candidate",
      stroke: "Candidate"
      }),
        Plot.areaY(datafiltered, {x: "year", y1: "Lower", y2: "Upper", z: "Candidate", fill: "Candidate", fillOpacity: 0.3})
  ]
  }
)

viewof candidates = yamultiselect(
    d3.groupSort(data, (d) => d.Candidate, d => d.Candidate),
    {sort: true,  label: "Candidate", multiple: true, value: ["Democratic Party", "Republican Party", "Donald Trump", "Joseph R. Biden, Jr."]})

data = FileAttachment("/generate/out/overtime.csv").csv({ typed: true })
datafiltered = data.filter((d, i) => candidates.includes(d.Candidate))