ML graphs and sliders

New To Observable
1

Hi there.

I have an idea to showcase a Data Science project I’ve been working on, but I’m not sure how to implement it. Here is what I have:

  1. I have a ML model that predicts whether a machine will fail or not. Using the model I calculated the false_positive, false_negative, true_positive, fp_cost, fn_cost, tp_cost, and total_savings for different thresholds (0 to 1 with steps = 0.01). I want to have three different graphs:

The first one a line graph that shows the fp_cost, fn_cost and total_savings (threshold on the x-axis) with a slider that moves a dotted line across the x-axis (slider range 0 to 1).

The second one should have the same thing, but with two added sliders that control the numbers used to calculate costs (I did this in pandas). I.e. I want the user to control how much replacing or repairing components cost (just for fun).

Lastly I would like to add a dropdown menu (selector?) to do the same things as above, but using different models (that I will pre-train).

Is this possible? If so, how would I go about doing this?

2

This is a complex question with many parts. Can you share a notebook with the data and maybe a few working parts, or at least indicate where you feel you need to be unblocked?

3

Thank you! Here is a link to the notebook:

I got the first graph working, but am struggling with how to get the second graph (with the sliders that control the prices) working. Is there a way to control table values with sliders (I guess something like formulas in Excel?), or would creating a table with all the possible price combinations in Pandas and importing the csv file to Observable be a better approach (i.e. having a slider reference a column name instead of a value)?

I decided to drop the third bit (a dropdown menu selector).

Thanks for looking into this.

4

Maybe try

    Plot.dot(["fp_cost", "fn_cost", "total_savings"], {
      x: i/data.length,

I’m not sure how the curves would change with the parameter since they are loaded from an external resource? But if you can compute them in the notebook, just make your “data” cell compute new values from i.

5

Thank you!

I loaded the initial graph cost and savings info from an external source (csv file), but I suppose it’s easier to do the calculations for those in Observable and re-plot the with the calculated data.

I’m not a hundred percent sure how to calculate new values in the data cell, though. Any help would be appreciated.