This repository archives projects made by students of the MS Data Visualization program at Parsons School of Design.

Note: Please submit a pull request with your new project URL if you relocate your work to a different domain name or hosting provider.

You will need the following command line tools.

Required:

• Node.js (v16.15.0) https://nodejs.org/
• pnpm (v7.14.0) https://pnpm.io/installation#using-npm

Optional:

• A Node.js version manager like nvm or fnm

Version 3 of Vue includes different component APIs than Vue 2, including a new composition api flow.

• Vue 3 Composition API

Vite is a tool that provides a development server and bundles JavaScript modules into publishable assets. You can configure Vite through the vite.config.mjs file.

• Vite Guide
• Vite Config

This project uses ESM (or ECMAScript modules). Node.js will defaults to using CommonJS modules but will use ESM if your file extension ends in .mjs and you have "type": "module" set in package.json

Warning: Use .mjs extension instead of .js. If CommonJS is needed, use .cjs. Do not remove "type": "module" from package.json

• Node.js ESM Documentation

If you open this repository using Visual Studio Code, you will notice that it provides type checking. This is a helpful way to avoid bugs like if you pass a string into a function that expects a number. To configure this behavior, you can adjust the jsconfig.json file.

• jsconfig.json Documentation
• Type Checking Documentation

This repository uses pnpm to run commands. pnpm is an alternative to npm but uses less storage space on your computer by installing local dependencies within a shared location.

Our package.json file defines some common scripts that are used during development. They can be invoked by running pnpm [script name].

# Example:
# pnpm [script name]
pnpm dev

This repository is set up to use GitHub Actions to check the status of commits made and to deploy the project to GitHub Pages. Each workflow is defined in a separate Yaml file in .github/workflows/

Project data is stored in ./data/projects.json. The file follows the schema defined in ./data/schema.json which follows a JSON Schema specification.

The projects array follows this template:

{
   "description": "Project description",
   "image": "static/preview-YEAR/<STUDENT NAME>.png",
   "name": "Student Name",
   "portfolio": "<PORTFOLIO LINK>",
   "repo": "<PROJECT REPO>",
   "subtitle": "Project intro text",
   "tags": ["#data", "#technology"],
   "title": "Project title",
   "url": "<PROJECT LINK>",
   "video": "<VIDEO LINK>",
   "year": YYYY
}

The validate GitHub workflow will run anytime a commit is made (including pull requests). You can also validate before pushing code by running

pnpm validate

1. Make sure you have the right version of Node.js

   node --version
   # v16.15.0

2. Make sure you have the right version of pnpm

   pnpm --version
   # >= 7.14.0

3. Install dependencies

   pnpm install

4. Start development server

   pnpm dev

5. You can now open http://localhost:8080 in your browser.

An update to gh-pages is made when a commit is pushed to the main branch.

It is recommended to follow the best practices detailed in the MS Data Visualization GitHub workflow document found at https://github.com/visualizedata/github-workflow

1. Initial setup:

   • Fork a repository, create a local clone of your fork, and configure Git to sync your fork with the original repository

2. In the local clone of your fork, create a branch for your edits. git branch mybranch creates a branch named mybranch git checkout mybranch switches to the branch mybranch

   • Do all your work in this branch.
   • Push your branch to the forked repo early and often.
   • Never work in the main branch!
   • gh-pages will publish directly to the live site (it takes about 5 minutes to update)

3. Pull in changes often from the upstream main to keep it synced so that when you prepare your pull request, merge conflicts will be less likely. Again, never work in the main branch!

4. Merge the fork main into the fork branch and, if applicable, resolve any merge conflicts. git merge <branch> merges the specified branch into the current branch.

5. When you are ready for your contributions to be considered, open a Pull Request in GitHub. The Pull Request should be for the up-to-date branch of your fork. Prior to submitting the Pull Request, make sure you have:

   • Synced the fork main with the latest version of the upstream main (#3).
   • Merged the fork main to the fork branch and resolved any merge conflicts (#4).

Use GitHub issues to log problems and communicate.

Sometimes, you mess up and need to go back to a previous commit. Use revert. Do not use reset! Here's a helpful Stack Overflow answer.

Vite

• Vite Guide
• Vite Config

Node.js

• ESM Modules

Vue

• Vue Documentation

pnpm

• Getting Started

JSON Schema

• Understanding JSON Schema

GitHub

• Introduction to GitHub Flow
• GitHub Help: Collaborating on projects using issues and pull requests
• GitHub Guides: contributing to open source