Data Commons
We're automating multi-country timelines using Google's UN Goals Data (widen browser to see nav on left).
Our javascript Feed Player loads and displays data from the Google Data Commons API.
Goal Visualization
The UN's seventeen 30-year goals, plus five subsets of Goal 9: Innovation.
★ Groundwater Recharged 1. Great Jobs 2. Healthy Food 3. Excellent Health 4. Quality Education 5. More Opportunities 6. Clean Water 7. Clean Energy 8. Vibrant Economies 9. Local Innovation 10. Open and Inclusive 11. Biodiverse Habitats 12. Restoring Treecover 13. Air and Climate 14. Aquatic Life 15. Abundant Wildlife 16. Peace and Justice 17. Partnerships 18. Balanced Budgets 19. Fast Reliable Transit 20. High Speed Internet 21. More Livable Zones
TO DO: Pull a simplified hierarchy from Google consisting of timeline data feeds. GDC Python API samples One of our UX goals is to avoid deep hierarchy levels by using simple navigation filters instead.
Identify titles for data with country timelines in the UN Data Commons (unstats.un.org) created by Google.
Our Air and Climate section has sample Python and an emissions timeline chart. Check out how we use titles with the API call for our upcoming Forest Coverage timeline.
In Google's Statistical Variable Explorer you can filter by date and location on more than 10,000 statistical variables.
Here are our two CoLabs for the Google Data Commons API:
- GDC-API-Caller CoLab - Directly calls the Google Data Commons API
- GDC-Parameters CoLab - Sends parameters to our caller, then works with fetched json data
TO DO: Call the python CoLabs from Javascript in a webpage using REST.
The Python Data Loaders require running in advance.
We're using Javascript to load in real-time using a single timeline widget.
TO DO: Find a means to load DCID and property in JavaScript. Handle different JSON structures, which is not an issue when using the Python libraries, as can be seen in this CoLab for Census Data.
Our Universal Filter Menus:
Age
Income
Gender
Education
Commands
You'll use yarn build the most.
yarn dev invokes https which requires installing a cert locally. (Ugh)
Instead, after you've run python -m http.server 8887 in your webroot, view at:
http://localhost:8887/data-commons/docs
http://localhost:8887/data-commons/dist
| Command | Description |
|---|---|
yarn install |
Install or reinstall dependencies. Same as yarn |
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 |
When running "yarn build" the content of the docs folder is built into the dist folder. The dist folder gets deleted each time the build is run. ("npm run build" is the equivalent cmd to use when the repo wasn't initiated with a yarn.lock file.)
Note that deployment of /dist is prevented within .ignore to avoid merge conflicts.
index.html does not get built to dist. We add index.html to repos so we can insert localsite.js navigation. Sometimes we also put standard html in the index.html file, especially if it's not working in the build to dist.
Placing a span or div tag around the GDC-embeds in index.md allows them to work in the built dist output.
We can probably auto-build to dist when deploying to GitHub. Try using the deploy.js sample Mike Bostock posted: https://github.com/observablehq/framework/discussions/1030