Skip to content

uwdata/visualization-course

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Data Visualization Course

Data visualization course curriculum.

Viewing instructions

  1. Make sure you have Node.js (v20 or higher) and npm installed
  2. Clone https://github.com/uwdata/visualization-course, for example via git clone https://github.com/uwdata/visualization-course.git
  3. Run npm i to install dependencies
  4. Run npm run dev to start a local preview server
  5. Visit http://localhost:3000 to preview the site

While running the dev server, edits to files in the src folder will trigger live updates in the browser.

Project structure

This is an Observable Framework project. For more, see https://observablehq.com/framework/getting-started.

A typical Framework project looks like this:

.
├─ src
│  ├─ components
│  │  └─ timeline.js           # an importable module
│  ├─ data
│  │  ├─ launches.csv.js       # a data loader
│  │  └─ events.json           # a static data file
│  ├─ example-dashboard.md     # a page
│  ├─ example-report.md        # another page
│  └─ index.md                 # the home page
├─ .gitignore
├─ observablehq.config.js      # the project config file
├─ package.json
└─ README.md

src - 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.

src/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.

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

src/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.js - 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
npm install Install or reinstall dependencies
npm run dev Start local preview server
npm run build Build your static site, generating ./dist
npm run deploy Deploy your project to Observable
npm run clean Clear the local data loader cache
npm run observable Run commands like observable help

About

Data visualization course curriculum.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published