Data Commons

Data Commons Goals Built (dist) and Raw Files showing Javascript (docs)

Our How to Google Doc - under development, needs javascript version TO DO: Please copy files into into docs/air/emissions from emission_co2

Root of UN Goals nav from Google API: - Start here as we automate SDG Goal visualization TO DO: Load the above with Python via the GDC API, parse into a simple json file and load into HTML for navigating timelines.

Data Loader - Save frequent requests as static files. (Good for simplified UN Goals navigation.)

---

This is an Observable Framework project. Run once daily when you start - updates dependencies defined in package.json:

yarn install

To build - this pulls from APIs and outputs from "docs" to static files in "dist":

yarn build

The following is an alternative to using yarn dev (which you'd use if only viewing dist)

This setup allows you to view multiple repos in one webroot. If you haven't yet, start an http server in your webroot, external to the data-commons folder.

cd ../ && python -m http.server 8887

If you haven't yet, pull down the localsite repo. This provides navigation when you view src files in the "docs" folder.

git clone https://github.com/modelearth/localsite localsite &&
cd data-commons

Then visit the following to view: http://localhost:8887/data-commons/dist http://localhost:8887/data-commons/docs

Turn on GitHub Pages for both repos so we can preview changes.

For more, see https://observablehq.com/framework/getting-started.

Project structure

In our project, folders for components and data reside in multiple "goal" folders:

data-commons
├─ README.md
├─ docs
│  ├─ space
│  │  ├─ components
│  │  │ 	└─ timeline.js     # an importable module
│  │  ├─ data
│  │  │ 	└─ events.json     # a static data file
│  │  └─ launches.csv.js       # a data loader
│  ├─ jobs
│  ├─ transit
│  ├─ innovation
│  ├─ education
│  ├─ economy
│  ├─ index.html               # a localsite page visible in docs
│  └─ index.md                 # a dist page
├─ dist
├─ observablehq.config.ts      # the project config file
├─ package.json
└─ .gitignore

docs - This is the “source root” — where your source files live. Pages go here. Each page is a Markdown file. Observable Framework uses file-based routing, which means that the name of the file controls where the page is served. You can create as many pages as you like. Use folders to organize your pages.

docs/index.md - This is the home page for your site. You can have as many additional pages as you’d like, but you should always have a home page, too.

docs/data - You can put data loaders or static data files anywhere in your source root, but we recommend putting them here.

docs/components - You can put shared JavaScript modules anywhere in your source root, but we recommend putting them here. This helps you pull code out of Markdown files and into JavaScript modules, making it easier to reuse code across pages, write tests and run linters, and even share code with vanilla web applications.

observablehq.config.ts - This is the project configuration file, such as the pages and sections in the sidebar navigation, and the project’s title.

Command reference

Command	Description
yarn install	Install or reinstall dependencies
yarn dev	Start local preview server
yarn build	Build your static site, generating ./dist
yarn deploy	Deploy your project to Observable
yarn clean	Clear the local data loader cache
yarn observable	Run commands like observable help