Link Search Menu Expand Document
DS 4200 S22

A1—Getting started

Due F 2022-01-21, 11:59pm EST 24pts

This first assignment is split into several parts, detailed below. Please make sure you read each of them closely and follow the instructions. You will submit a single PDF for this entire assignment, with one page for each part.

Please post any questions about this assignment on Canvas in Discussion: A1—Getting started. See instructions for how to use discussions in Canvas in their documentation. For other Canvas questions, refer to the Canvas Student Guide.

Warning: This is an individual assignment.

Table of contents

Change log

  • 2022-01-19: Fixed an issue where the gh-pages branch was not being deployed properly as a GitHub page when students accepted the assignment. The student got a bug bounty! +3 pts
  • 2022-01-18: Fixed a broken link to the project overview. A student got a bug bounty! +2 pts

Part 1—Read the syllabus, schedule, and project overview

Aim of the assignment

At the beginning of the semester we would like you to:

  • Familiarize yourself with the syllabus, schedule, and project components of the course.
  • Help identify any possible sources of confusion, unfairness, or difficulties for the instructor to clarify.
  • Familiarize yourself with the Canvas discussion interface, which we will use for Q&A.

Instructions

  1. Read the course syllabus / homepage, course schedule, and project overview. As you are doing so, jot down any notes you have about points of confusion, any policy that seems unfair, and any policy you might have difficulty adhering to.
  2. If you have any questions, first see if anyone else has discussed it in Discussion: A1—Getting started on Canvas. You can Like or add your own threaded reply to the existing comment. If no one has discussed your point yet, post a top-level reply listing any questions you have. You are welcome to read and reply to other student’s questions too.
  3. Start writing a document in your favorite word processor / document preparation system.
    1. Write A1—Getting Started as the title.
    2. Write Part 1 as a section heading.
    3. Write I have read the syllabus and any questions I have are posted to the Canvas discussion.

Submission instructions

  1. Optional: Add to the Canvas discussion in Discussion: A1—Getting started.
  2. You will continue to add to your document in the other parts of the assignment, and then submit the whole thing as a PDF on GradeScope.

Grading rubric

CriteriaPoints
You followed the instructions.4

Part 2—Tableau setup

Aim of the assignment

We will be using Tableau for in-class activities, a homework assignment, and it is available to use for your course project. This assignment is to ensure you get it set up properly ahead of time so that we can troubleshoot any problems early.

Instructions

  1. Download the latest version of Tableau Desktop at this link. Optional: Also download Tableau Prep Builder.

    • Alternative: Go to this link, select “Download Tableau Desktop”, enter your school email address for Business E-mail and enter Northeastern University for Organization.*

  2. Install the tools you downloaded.

    Note: Tableau is only available for Windows and Mac OSX. If you are using Linux, you can try one of these options:

    • Run Windows on a VM like VirtualBox and remote desktop / VNC into it.
    • Use a hosted VM solution, e.g., from Azure, and remote in.
    • Dual-boot Windows.
    • Borrow a Windows or Mac laptop.

  3. Activate the tools with this product key: TCZD-1950-5AA0-01FE-139D.

    Already have a copy of Tableau Desktop installed? Update your license in the application: Help menu → Manage Product Keys.

    You can continue using Tableau after the class is over by requesting your own one-year license through the Tableau for Students program.

  4. Take a PNG screenshot of Tableau running on your computer—including some of your desktop.
  5. Continue writing the document you started in Part 1.
    1. Create a page break so that each part has its own page
    2. Write Part 2 as a section heading.
    3. Include your screenshot nice and large.

If you have any questions about Tableau, you can refer to Tableau’s Student Resource Page.

Submission instructions

  1. You will continue to add to your document in the other parts of the assignment, and then submit the whole thing as a PDF on GradeScope.

Grading rubric

This is a satisfactory grading assignment. If you followed the instructions you receive full marks and if not you receive a 0. Your submission is satisfactory if:

  • Everything is submitted by the due date following the instructions.
  • You submitted a screenshot of Tableau Desktop running on your computer/VM.
  • The screenshot includes part of your desktop.
CriteriaPoints
Satisfactory?4

Part 3—Introduction to web development

Aim of the assignment

You will work through several examples and resources on the Mozilla Developer Network (MDN) in order to learn or re-familiarize yourself with the basics of web development and using HTML, CSS, JavaScript, git, GitHub, and GitHub Pages. This will complement an in-class activity later on where we use these technologies.

Note: If you struggle a lot on this assignment or feel lost, seek additional web development training outside of class ASAP and come to office hours for help. One goal of this assignment is to help you realize what you may need to learn. We will be doing some instruction in class, but we expect that many of you will need to use tutorials and other outside resources to accomplish the upcoming assignments.

Instructions

This part of the assignment uses GitHub Classroom. Please see our general instructions and policies for GitHub Classroom assignments.

Accept the GitHub Classroom assignment invitation by clicking this link to get your repository:

https://classroom.github.com/a/Sv89fbA3

For reference, this is the template repository your repository is being created from: https://github.com/NEU-DS-4200-S22/A1--Getting_started--Web_Development.

Then, work through the MDN Getting Started with the Web module.

Note: We don’t expect you to follow the steps exactly, but instead demonstrate all the same principles in the assigned sections.

  1. Installing basic software

  2. Clone your GitHub-Classroom-generated repository to your local machine.

    E.g., in your terminal / command prompt CD to where you want the folder for this activity to be. Then run: git clone <YOUR_REPO_URL>

    Warning: Under no circumstances should you be editing files via the GitHub website user interface. Do all your edits locally after cloning the repository.

  3. What will your website look like?

    You can use their design rather than making your own.

    Don’t worry about sketching or finding an image. We provide the images for you in your git repo in the images folder.

  4. Dealing with files

    We provide a basic website structure in your git repo. Please edit the included files:

    • README.md is the explanatory file for the repo.
    • index.html will contain the main HTML website content.
    • styles/main.css will contain the CSS.
    • scripts/main.js will contain the JavaScript.
    • LICENCE is your source code license.

  5. HTML Basics

    Note: Commit and push your files to GitHub after this step.

    E.g., git add * then git commit -m "My commit message" followed by git push --all origin.

  6. CSS Basics

    Note: Commit and push your files to GitHub after this step.

  7. JavaScript basics

    Also work through What are browser developer tools?, including the details for your particular browser. Note that using Chrome or Firefox will work better for this course.

    Note: Commit and push your files to GitHub after this step.

  8. Publishing your website

    • We will use GitHub pages. Upon commit (and waiting around 1 min) the web page is served automatically.

      You would normally need to turn on GitHub pages in the settings for your repository but we have set that up for you so you’re using the gh-pages branch by default.

      You can use this JavaScript bookmarklet in your browser to swap between any GitHub repository and the associated GitHub Pages site. Create a new bookmark in your browser and copy and paste this code in the location field:

       javascript: (function() {
 var path = window.location.pathname;
 var ps = path.split('/');
 var f = ps[ps.length - 1];
 var host = window.location.host;
 if (host === 'github.com') {
    var repo = path.split('/')[1];
    if ((ps.length === 4 && f === '') || (ps.length === 3)) {
          window.location.href = 'http://' + repo + '.github.io/' + path.replace('/' + repo + '/', '')
    } else if (ps.length === 5 || (ps.length === 6 && ps[5] === '')) {
          window.location.href = 'http://' + repo + '.github.io/' + ps[2]
    } else if (ps.length > 3 && f.split('.').length === 2) {
          var newpath = path.replace('/' + repo + '/', '').replace('blob/gh-pages/', '');
          window.location.href = 'http://' + repo + '.github.io/' + newpath.replace('.md', '.html').replace('.Rmd', '.html')
    }
 } else if (host.split('.')[1] === 'github' && host.split('.')[2] === 'io') {
    var repo = host.split('.')[0];
    if ((ps.length === 3 && f === '') || (ps.length === 2)) {
          window.location.href = 'http://github.com' + '/' + repo + path
    } else if (ps.length > 2) {
          var newpath = path.replace(f, '') + 'blob/gh-pages/' + f;
          window.location.href = 'http://github.com' + '/' + repo + newpath
    }
 }
 })();

      Then, you can visit a GitHub repository or GitHub Pages site and click the bookmark to swap.

    • Read Mastering Markdown
    • Edit near the top of your README.md file to include a clickable hyperlink to the GitHub page website for your repo., replacing the <insert your clickable hyperlink here> code with your markdown. E.g., <https://neu-ds-4200-s22-students.github.io/a1--getting-started--introduction-to-web-development-codydunne/>.

    Note: Commit and push your files to GitHub after this step.

  9. Make any edits necessary to ensure your code passes the W3 validator.
  10. Continue writing the document you started in Part 1.
    1. Create a page break so that each part has its own page
    2. Write Part 3 as a section heading.
    3. Include a hyperlink to your GitHub Classroom-generated repository in the section.

    Warning: Do not put a link to a personal repository. It must be within our class GitHub organization. Do not submit a link to the GitHub Page.

  11. Read How the web works.
  12. Read A re-introduction to JavaScript.

Tips, tricks, & troubleshooting

If you run into trouble, first look at our relevant tutorials which have tips & tricks:

Further reading for those interested

MDN Learning HTML

MDN Learn to Style HTML using CSS

Submission instructions

  1. Commit all your local files and push them to the remote repository on GitHub which was generated by GitHub Classroom. Commit at each step you’re instructed to do so above. The steps are: HTML Basics, CSS Basics, JavaScript Basics, Publishing your website. We will grade based on what is visible on the GitHub Page.
  2. You will continue to add to your document in the other parts of the assignment, and then submit the whole thing as a PDF on GradeScope.

Grading rubric

This is a satisfactory grading assignment. If you followed the instructions you receive full marks and if not you receive a 0. Your submission is satisfactory if:

  • Everything is submitted by the due date following the instructions.
  • Any commits made after the due date will be ignored when your work is graded.
  • If you do not submit the correct link we may not grade your assignment and you will receive a 0. This is standard course policy.
  • Any folders/files are properly named, located as specified, and contain what is expected.
  • Your web page link is correctly updated at the top of the README.md file.
  • You submit a link to the GitHub Classroom-generated repo, not a personal one.
  • Each of the required commits and pushes is done in order and not edited via the GitHub user interface online.
  • Your web page loads properly and looks roughly as expected in the latest Firefox and Chrome browsers on the teaching staff’s computers.
  • Any code from other sources (modified or copied straight) is acknowledged.
  • Your submitted code isn’t directly copied from Mozilla’s repositories and demonstrates that you actually worked through the examples completely.
CriteriaPoints
Satisfactory?12

Part 4—Altair & JupyterLab setup

Aim of the assignment

Altair is a declarative statistical visualization library for Python, based on Vega and Vega-Lite. We will use it in class so we want to get set up with it on your laptop.

Instructions

This part of the assignment uses GitHub Classroom. Please see our general instructions and policies for GitHub Classroom assignments.

Accept the GitHub Classroom assignment invitation by clicking this link to get your repository:

https://classroom.github.com/a/EPr73K3e

For reference, this is the template repository your repository is being created from: https://github.com/NEU-DS-4200-S22/A1--Getting_started--Altair_and_Jupyterlab.

Setup instructions

  1. Clone the repo.
  2. CD to the repo directory. Create and activate a virtual environment for this project. You may need to modify the code you use depending on what Python you have installed and how your machine is configured.

  3. Run the setup commands below.

    • On macOS or Linux, run these three commands separately in case there are errors:

        python3 -m venv env

        source env/bin/activate

        which python

    • On Windows, run these three commands separately in case there are errors:

        python -m venv env

        .\env\Scripts\activate.bat

        where.exe python

    Check the path(s) provided by which python or where.exe python—the first one listed should be inside the env folder you just created.

  4. Install necessary packages. Note that you should install the exact versions of the packages.

     pip install -r requirements.txt

    This may take a few minutes.

If you have trouble running any of these steps, see the tips, tricks, and troubleshooting section below.

Run instructions

  1. Run jupyter lab. It should open your default browser and let you select select any Jupyter Notebook .ipynb file.
  2. Open notebook.ipynb.
  3. Run individual cells with ctrl+enter. In the menu you can run all cells and restart the kernel to clear variables.
  4. Warning: Make sure there are not any errors! If there are errors, troubleshoot them ASAP as they could prevent you from participating in the in-class Altair tutorial & assignment.

  1. Save the image as a PNG named visualization.png.

    Note that Altair lets you save a PNG file directly using the ⋯ menu in the top-right of a visualization.

  2. Continue writing the document you started in Part 1.

    1. Create a page break so that each part has its own page
    2. Write Part 4 as a section heading.

    3. Include a hyperlink to your GitHub Classroom-generated repository in the section.

      Warning: Do not put a link to a personal repository. It must be within our class GitHub organization..

    4. Add your PNG image big enough to read.

Quit instructions

  1. Make sure to save your .ipynb file and shutdown Jupyter Lab properly through the file menu. Otherwise you need to use jupyter notebook stop.
  2. Deactivate the venv to return to your terminal using deactivate.

Commit and push your code (but first…)

  1. Only if you have made any changes to the required packages (you probably didn’t), first export a list of all installed packages and their versions:

    pip freeze > requirements.txt

  2. Warning: Before you commit a Jupyter Notebook .ipynb file, clear the outputs of all cells. This decreases file size, removes unnecessary metadata, and makes diffs easier to understand. In Jupyter Lab you can use the GUI: Edit->Clear All Outputs.

  3. Make sure to add all your required files, including the visualization.png image you saved.

  4. Finally, commit all your local files and push them to the remote repository on GitHub which was generated by GitHub Classroom.

Tips, tricks, & troubleshooting

If you run into trouble, first look at our relevant tutorials which have tips & tricks:

Submission instructions

  1. Ensure that:
    • visualization.png you saved is pushed to the remote repository on GitHub which was generated by GitHub Classroom. We will grade based on what is available in that repository.
    • Warning: You cleared all cell outputs.
  2. You will continue to add to your document in the other parts of the assignment, and then submit the whole thing as a PDF on GradeScope.

Grading rubric

This is a satisfactory grading assignment. If you followed the instructions you receive full marks and if not you receive a 0. Your submission is satisfactory if:

  • visualization.png is in the root directory of your repo and contains the expected visualization.
  • You submit the correct link on time.
  • You didn’t make it challenging for us to grade your work. E.g., dramatic changes to file names and directory structure, code obfuscation or minimization, etc.
  • You cleared the outputs of all cells before committing.
CriteriaPoints
Satisfactory?4

Final submission instructions

Submit your assignment in GradeScope (see GradeScope’s documentation for general details). The easiest way to get into GradeScope the first time is to first sign into Canvas (see link at the top of the page) and then click the link on our course for “GradeScope”. You should then also have the option to create an account on GradeScope (if you don’t already have one) so that you can log in to GradeScope directly.

Note: Please contact the teaching staff immediately if you have difficulty accessing the course on GradeScope.

All parts should be submitted as a single PDF and submitted to the assignment A1—Getting started on GradeScope. Please use GradeScope’s “tagging” interface to associate each of your answers with the questions of the rubric. See the GradeScope documentation on submitting a PDF for more details.

© 2022 Cody Dunne. Released under the CC BY-SA license