Test with some data

Objective

To test the possibility to explore data sets using observable, this is linked to this notebook

Bar chart

viewof selectedvar = Inputs.checkbox(["Exclusive", "Non-exclusive"], {label: "Select some", value: ["Exclusive", "Non-exclusive"]})

viewof range = Inputs.range([0, 5], {label: "Minimum percentage to show", step: 0.01, value: 0})

LT = FileAttachment("LongTableBar.csv").csv().then(data => {
  // Convert Percentage values to numbers
  data.forEach(d => {
    d.Percentage = parseFloat(d.Percentage);
  });

  // Now you can use the processed data
  return data;
})

more_test = LT.filter((d, i) => selectedvar.includes(d.intersections))

further_test = more_test.filter((d, i) => d.Percentage >= range)

colorScale = d3.scaleOrdinal()
  .domain(["Exclusive", "Non-exclusive"])
  .range(['#fc8d62','#8da0cb'])

Plot.plot({
  color: {legend: true},
  y: {
    grid: true
  },
  x: { axis: null },
  marks: [
    Plot.ruleY([0]),
    Plot.barY(further_test, {x: "ID", y: "Percentage", sort: {x: "y", reverse: true}, fill: (d) => colorScale(d.intersections)})
  ]
})

Inputs.table(further_test, {
  format: {
    Percentage: x => (parseFloat(x) || 0).toFixed(2)
  }
});