Reference calculated column values in graphs

New To Observable
1

Hi there.

I got a data table to calculate some columns (like formulae in Excel), but when I try to plot the new values, it doesn’t work. Here is a notebook with what I have:

Please can someone help me?

2

No worries, I figured out what I needed to do.

In adding more columns it must have created a new table called data1 (the original was called data), so I just needed to reference the correct table.

3

Bravo! In the future please try to keep all your questions about the same notebook in one place: it will be easier for us to follow :slight_smile:

1 Like
4

Thanks for the team’s help in getting me this far!

Here is the close-to-finished notebook (a different one from the tester I was using to ask questions) I would eventually like to deploy on a webpage:

I had two more question about the graphs, though.

  1. The ticks on the y-axis are cut off and not showing properly. Is there a way for me to resize the graph area or something I can do for the values to show nicely?

  2. I would like to add a legend showing what the different coloured lines represent. I tried adding the legend parameter, but nothing changed. Any way to do that elegantly?

Finally, any further feedback on the notebook, code, etc. would be greatly appreciated.

5

Can you share the notebook?

6

Apologies. I made the notebook I shared private to see if that would solve it, but it didn’t. The notebook is public now.

Since this post I solved the y-ticks problem. I still want to get a legend for the graphs going, but don’t know how.

I also need to change the data from local csv files to Google Cloud Storage url’s, which I’m having difficulty with.

Another unexpected problem I’ve run into is the second data table (data1) where the calculations for the third graphs are done from the repair and replace sliders. It seems the table reloads every time one of the sliders are moved. That will incur significant costs once the page is deployed. What would the best approach be around this? Should I calculate the values for every possible combination of the sliders, put them in a csv and reference the relevant columns with the sliders? If so, what would that slider link/reference look like?

7

For a color legend, you need a color scale. Instead of returning literal colors (darkred, etc), return their meaning (fpCost), then add the color: {legend: true} option. You can specify the domain and range of the color scale so that fpCost is still matched with darkred:

color: {domain: ["fpCost", …], range: ["darkred", …], legend: true}

For cloud files, see the documentation here: Cloud files / Observable | Observable ; and please let us know if that does (or doesn’t) answer your question.

For the last issue, the data itself is “reloaded”, but since it’s cached by the browser, it’s not actually reloading it from the server. However the table cell is indeed recreated in the page, which might be too slow. You can get a faster data1 by writing the column derivation directly in a JavaScript cell:

data1 = data.map(d => ({...d, newColumn1: d["field"]+1, …})

8

Thank you very much for this. Truly helpful.

I can’t seem to make the graphs work, though. The lines disappeared from the graphs when I changed stroke: "darkred" to stroke: "fpCost" and added the color: {domain: ...} line.

For the data1 = data.map(...) line: Am I right in thinking I’ll delete the data tables and replace them with the line you suggested (with data = FileAttachment... being a separate cell)? So there will be no data tables in the notebook, but the calculations will happen regardless?

Thanks again for your help.

1 Like
9

Thanks. I’m still struggling. I deleted the data1 table before making a note of the code. Can you help me with the data1 = data.map(...) code, please?

The legend seems to be working fine now, btw.

10

@Fil Any chance of helping me with this bit of code, please? I don’t know how to define data1 using the data.map() function.

11

I’ve not been following this thread so I’m not sure what your objective is, but…

I notice that if you add a cell containing the line:

data1 = data.map(d => ({...d, newColumn1: d["field"]+1}))

then your errors seem to disappear.

2 Likes
12

Thanks to everyone who helped me get this far.