Observable

SPC Plot - WIP

Built with the help of Observable notebooks (see README).

https://observablehq.com/@training/replicating-nhsrplotthedots-spcs

Calculating mean used a function from D3:

https://talk.observablehq.com/t/histogram-with-average-line/7099 https://observablehq.com/@d3/d3-mean-d3-median-and-friends

d3 = require("d3@7")

Inputs.table(transpose(subset_aeatt), { sort: "period", reverse: false })

Plot.plot({
  title: "A and E Attendances",
  x: { label: "Dates" },
  y: { label: "Breaches" },
  marks: [
    Plot.frame({ strokeOpacity: 0.1, marginRight: 25 }),
    Plot.dot(transpose(subset_aeatt), {
      x: "period",
      y: "breaches",
      fill: "gray",
      r: 6
    }),
    Plot.dot(
      transpose(subset_aeatt), 
      Plot.pointer({
        x: "period",
        y: "breaches",
        fill: "gray",
        stroke: "type",
        opacity: 0.6,
        r: 8,
        tip: true,
   //     title: (d) => `Breaches: ${d.breaches}\nDate: ${d.period.toISOString().slice(0, 10)}`
      }),
    ),
    Plot.tip(transpose(subset_aeatt), Plot.selectMaxY({
      x: "period", 
      y: "breaches"
    })),
    Plot.crosshair(transpose(subset_aeatt), {
      x: "period", 
      y: "breaches"
    }),
    Plot.lineY(transpose(subset_aeatt), {
      x: "period", 
      y: "breaches"
    }),
    Plot.ruleY([d3.mean(transpose(subset_aeatt).map(d => d.breaches))], {
      stroke: "red",
      tip: true,
      title: (d) => `Breaches: ${d3.mean(transpose(subset_aeatt).map(d => d.breaches))}`
    }),
    Plot.text(
      transpose(subset_aeatt),
      Plot.selectLast({
        x: "period",
        y: "breaches",
        text: "org_code",
        dx: 12,
        fontSize: 12
      })
    )
  ]
})

Facet attempt

viewof attendances = Inputs.checkbox(
  ["1", "2", "other"],
  {value: ["1", "2"],
  label: "Attendance type:"}
)
viewof code = Inputs.checkbox(
  ["R1H", "RRK", "RF4"],
  {value: ["R1H", "RF4"],
  label: "Hospitals:"
  }
)

filtered = transpose(data).filter(function(hospital){
 return attendances.includes(hospital.type) &&
 code.includes(hospital.org_code);
})

Plot.plot({
  grid: true,
  marginRight: 60,
  facet: {label: null},
  marks: [
    Plot.frame(),
    Plot.lineY(filtered, {
      x: "period",
      y: "breaches",
      fx: "type",
      fy: "org_code",
      sort: "period",
      tip: true
    })
  ]
})

SPC

This uses NHSRplotthedots for the plotly chart and is the development version (not CRAN). The only interactivity is from plotly itself. It might be that the data needs to be pre calculated (using NHSRplotthedots to get that possibly) but would mean that there is potentially a huge dataset needed to be manipulated at the output side.

reactable link - WIP

Trying out code to link the codes to a reactable from the timelyportfolio blog

// use Observable select input to allow user to pick states
viewof selectedCodes = Inputs.select(orgCodes, {label: "NHS hospitals", multiple: true})