Adapting the EIA Example

Community Help
1

Hi all, I am new to Observable and would like to start learning by adapting the US Electricity Grid example (U.S. electricity grid). I could not find a tutorial on this so, here we go: What is the best way to set up this example? I initialized an empty observable project folder and copied the files from the github repo (framework/examples/eia at main · observablehq/framework · GitHub) into said folder but receive errors when running npm run dev.

‘Error [ERR_MODULE_NOT_FOUND]: Cannot find package ‘dotenv’ imported from /Users/Fatih/Documents/data_science/DS Portfolio/Observable/energy_dashboard/docs/data/eia-ba-hourly.csv.js’

In python (where I code) I would just install these packages. Dont know what to do here.

Any advice much appreciated!

2

It should work if you also copy package.json, which lists the dependencies that we want npm to install, like dotenv on line 11:

1 Like
3

Thanks, @Fil ! I have copied the package.json file but am receiving error messages. When I run npm install, I get the following error:

Fatih@MacBook-Air energy_dashboard % npm install
npm ERR! code EUNSUPPORTEDPROTOCOL
npm ERR! Unsupported URL Type “link:”: link:…/…

npm ERR! A complete log of this run can be found in:

Sorry, I am a blood newbie with npm…
My npm --version (10.1.0)

4

Ah… now this error is because we’re building the examples from within the framework repo, using code from that repo (that is what the “link:” reference does).

For now you can replace that line by

"@observablehq/framework": "1"

but we’ll need to find a way to make this easier.

5

Thanks, for getting back to me. For absolute beginners like me, a step-by-step guide to get the examples running would be great!
I am still receiving the same error message as before

Error [ERR_MODULE_NOT_FOUND]: Cannot find package dotenv

and other packages (d3) as well.

I tried both a new init with and without examples, and copied the files from the example repo (the entire content of the eia folder, including the package.json folder) but no success.

I would love to add the observable framework to my stack but need more beginner-friendly instructions. Maybe there is a tutorial that works with the examples in the main repo? Or somebody here could walk me through? Thanks for your time and effort!

6

Did you run npm install after you edited package.json? This should have installed dotenv and the rest.

I agree that these examples are difficult to run independently. To be fair they were meant to show what’s possible, not as starter projects: for this we have templates. But, we’ll definitely have to make them more usable.

7

Jep, I did. After npm install, running npm run dev does not work anymore (see screenshot)

It would be helpful to have a more beginner-friendly guideline for adapting the existing examples in the repo, I think, maybe I am not the only one.

I will put this on ice for now until then and get back to working with streamlit, dash and co.

Thanks for your quick response and looking forward to getting back to this amazing framework!

Screenshot 2024-02-28 at 09.45.40
Screenshot 2024-02-28 at 09.45.401052×512 19.8 KB

8

probably need to remove the postinstall step too, and reinstall (maybe remove node_modules/ first)? you’re getting closer!

It worked for me when I changed package.json to the following, then ran npm install && npm run dev

{
  "type": "module",
  "scripts": {
    "dev": "observable preview",
    "build": "rm -rf dist && observable build"
  },
  "dependencies": {
    "@observablehq/framework": "1",
    "d3": "^7.8.5",
    "dotenv": "^16.3.1",
    "topojson-client": "^3.1.0",
    "topojson-simplify": "^3.0.3"
  },
  "engines": {
    "node": ">=20.6"
  }
}
1 Like
9

Brilliant, it runs! Did not remove node_modules/

Thanks a bunch for the great support! Observable Framework beats Streamlit and Dash by far! Happy to add this to my stack and continue to learn. Cheers!

2 Likes