How to use an existing chart in one of my notebooks

[theophany77]

Hi everyone,

I am sorry for that very basic question.
I would like to use in a public notebook the contents of the Line Chart, Multiple Series / D3 | Observable notebook.
When I try to use it on a web server it does not display any data in the chart although the syntax seems right to me.
That is why I tried to display that chart on Observablehq, followed the instructions (import then function call) and thus wrote the following lines in my public notebook :

import {LineChart} from “@d3/multi-line-chart”
chart = LineChart(unemployment, {
x: d => d.date,
y: d => d.unemployment,
z: d => d.division,
yLabel: “↑ Unemployment (%)”,
width,
height: 500,
color: “steelblue”,
voronoi // if true, show Voronoi overlay
})

But no graph appears when I run those lines.
Is it because I need to import (and how ?) the csv file required for this chart ?

Thank you very much for your help.

Jean-michel, south of Paris, France

[libbey]

Hi Jean-michel, and welcome to Observable!

Yes, you’re right, you need to import the file needed for the chart. To do that, if you open the Files pane on the right-hand side of the original notebook, you can download the file there (see screenshot).

Once you have the file, you can upload it into your notebook using the Files pane there. Then, you’ll need to create a cell that defines the unemployment variable, like so:

unemployment = FileAttachment("bls-metro-unemployment.csv").csv({typed: true})

After doing so, you should see the chart. Hope this helps!

[mcmcclur]

And here’s a notebook that shows how to do it with another file:

Two line charts

[theophany77]

Thank you Libbey for your welcome and the help !
I am really clumsy …
I managed to use the csv file as you mentioned it.
Here is what I’ve got (see screenshot) after running my notebook’s contents : all the text is displayed above and no chart appears.

Jean-michel

[theophany77]

BTW do I have to validate every line by a Run (import then file then chart ) or the whole contents ?

[theophany77]

Thank you Mark,
I am going to test your suggestion.
Jean-michel

[libbey]

Hi Jean-michel, thanks for including the screenshot – I can see that the cell you’re editing is in Markdown mode, and needs to be in JavaScript mode instead. To switch, click on the little button I’ve circled in the screenshot below, and select JavaScript from the menu.

Another thing you’ll need to do is put each definition in its own cell, so the import line, and the unemployment = ... line, and then the chart = ... block all need to be in separate cells. You can add new cells by clicking the little + icon on the left above or below your current cell.

[theophany77]

Perfect ! Thank you so much Libbey !
It is my very first time on Observablehq and I am not used to practicing notebooks as data scientists do.
What a great tool is that website btw !
Have a great day and greetings from France !
Jean-michel

PS : I am going to test Mark’s notebook. Given I now know it should be very easy.

[theophany77]

Your notebook works fine now Mark, thank you.
As Libbey told me, I was using the wrong type of markup …
Jean-mlchel