Hi,
I’ve played with Observable using the D3 Horizon Chart (https://beta.observablehq.com/@mbostock/d3-horizon-chart) as basis.
I’d like to dynamically load my CSV file through the notebook load function:
But my data aren’t loaded. But i haven’t any error in my web browser console.
How can I achieve that ?
Thanks for this wonderful tool and in advance for your answer !
Can you post a link to your draft notebook where the data is failing to load? (You can get a link to draft notebooks using the ‘Share Link’ option under the ‘. . .’ at the top of the screen.)
Here it is ! https://beta.observablehq.com/d/ce773bf6357d4a20
It’s not working right now because I’ve commented the csvFile variable but if I uncomment, no problem 
Just a precision: I’m working locally. I’ve tried with a Gist CSV file or the same file on my machine. But it doesn’t seem to change anything.
Brice,
You just need to change a reference to the loaded CSV data file to yours in this #data> cell:
to const data = await d3.csv("<your_data>.csv"
@RandomFractals : I don’t want to have a fixed CSV source… I want to call my chart on several pages with different CSV files.
then just create a function getCsvDataUrl() and have it return different public csv data files based on the desired params
or change data cell to getCsvData() function you can import into other notebooks and pass diff csv data url.
for example, most of my apache arrow chi crimes notebooks import and use this loadData() function:
then other notebooks import it like so:
import {loadData} from ‘@randomfractals/apache-arrow’
and call it in data cells as: data = loadData(dataUrl)
what am I missing?
My question is more: how to pass a variable to the import notebook function or to the Runtime.load function…
Your example is interesting (even if I don’t know how to use the return of your loadData function as a base to d3.csv) but I wouldn’t know how to embed my notebook on a personal webpage and passing a variable to it…
oh, I c. You are trying to embed a number of notebooks into your personal site with same graph? and only data part is different? Sorry, I missed that part.
I’d just create a bunch of small notebooks using your base chart notebook with loadData() example and embed them that way.
Hope that helps. @fil migh have more insight on notebook embeds. he’s done some work with that.
I plan to have multiple monthly graphs… so I’d prefer to generate automatically the charts, based on a simple variable.
Thanks @RandomFractals and I hope to have a way to achieve this.
Or I could use just d3js but I don’t see how to transform the “DOM” input used in this part (and other parts):
g.append(“clipPath”)
.attr(“id”, d => (d.clip = DOM.uid(“clip”)).id)
.append(“rect”)
.attr(“width”, width)
.attr(“height”, step);
Any idea ?
I hope you know observable js notebooks are proper es6 js modules.
You can just import your exported notebook code that way, or even get more crafty and put your data in the global space for the notebook and your page to fill and reference.
my last 2 cents on this
actually, no, not done yet. You can just have your notebook loadData() get your data pointer from page url query or anchor fragment. I am sure there is some pattern and base url for your monthly data load.
now I am done.
good luck!
Hum… I’m going to let it rest for one or two days, and I’ll see what’s coming in mind
Thanks !
always a good call! I think you got a few good ideas/options now
Hi,
I’ve made some more thinking about this issue and I’ve made it work usinq the Runtime load function calling the file this way:
cell.csvFile = “https://gist.githubusercontent.com/bricebou/0dbec5a724c8264f0f1218f903f8b8c0/raw/575c02c7acf2508c5923c45eedffa4b5448c968b/2017.csv”;
Thanks !
You can override the definition of cells when you load your notebook as an ES module. Here’s an example:
And here’s the original notebook:
Thanks a lot @mbostock ! I’ve made it work for my purpose, and it’s working perfectly.
Thanks again
not sure which solution you went with, but I like this new clean cut @bumbeishvili provided today for inputs from query url: