Possible to pass javacript (file attachment download link) through an object?

Hello! Still feel very new to Observable. I’ve put together a notebook to get into some of the details of a data project. I’ve put some text in an expandable accordion thingy to help make the notebook more manageable for readers. So all of my text includes markdown inside quotes. It’s not ideal I’m sure.
I want some of the text to include links to download some .csv files. I thought I had it working when I first tried and test it… but I must not have.
I tried:

"
<a href=‘${await FileAttachment(‘transfers.csv’).url()}’'' download>List of transfers.
"
[note, weirdly enough, the full text above doesn’t seem to display on the post?]

It looks like a link but doesn’t seem to pass the file name/url and so just brings up an Observable error message page: https://observablehq.com/d/${await%20FileAttachment(

I see that I can copy some file unique ID and create a link that way, but the file download name is gross. If I have to go that route, I’d rather just use a Google drive link.

Thoughts? Solutions? This is my notebook:

Hi! First off, I want to complement you on this notebook. For someone who is new to the platform, this looks very impressive. As for sharing code on the forum, you can use “code blocks” to share code more effectively. You can do that by typing three backtick characters, and then a new line, and then your code:

For example, if you type this in a post:


```
let x = 42;
```

It will look like this

let x = 42;

Now on to your actual question: The problem is that your content cell is using plain strings (i.e. using " or ' quotes). Javascript will always interpret that as just text, and not any code to run. So then when you set the innerText of the element to that string, there is never any chance to run the code await FileAttachment(‘transfers.csv’).url().

This is easily fixed though. Change your content cell to use template strings, which are delineated with backticks. That should look something like this:

content = [
  {
    text: `<a href="${await FileAttachment('all exp by prj.csv').url()}" download>Funded projects.</a>`
  }
]

When you do that, you’ll noticed in the URL for the file attachment is integrated into the value of content immediately in the inspector. Here’s an example:

Unrelatedly, I noticed you imported a copy of d3. I’d recommend not doing this, since Observable notebooks have a built in copy of d3. You should just be able to delete that cell.

Finally, if I may proselytize a bit: I noticed you imported Vega Lite into this notebook. Vega Lite is 100% supported, and a fine library, but you might consider using Observable Plot. I find it a bit easier to work with that Vega Lite, but I may be biased.

2 Likes

Thank you so much for going above and beyond in providing this help! I really appreciate it.
The tick mark solution worked! Thanks!
I deleted importing d3. I think it came from wherever I found the code for the accordion feature.
I will check out Observable Plot. I am pretty new to R as well and I think I got ggplot from an R->Observable training notebook. The scripting seems similar to how it’s done in R.