Link Search Menu Expand Document
DS 4200 S22

P6—Implementation 1

Due M 2022-03-28⧗, 11:59pm EST 8pts

Please post any questions about this assignment on Canvas in Discussion: P6—Implementation 1.

Table of contents

Change log

  • 2022-03-24: Fixed broken link to the Canvas discussion. A student got a bug bounty! +1.5 pts
  • 2022-03-24: Fixed broken link to the git workflow tutorial.

Aim of the assignment

In this project assignment, you will start executing your implementation plan and start building your visualization. The assignment will make sure you and your group members are all set up correctly with a project repository on GitHub. The template we provide will also give you a decent and consistent starting point to begin coding. (You are welcome to change the template, as long as you can create a nice result.)

Background information

As you create your final visualization, please reference your previous deliverables. In particular, review your target user tasks & goals, your final visualization sketches, feedback from the teaching staff, and your data exploration.

Warning: The requirements listed for the final visualization must be met in terms of interactions and other features, unless you have approval from the instructor to build a differentiated visualization.

Instructions

Please look through all the materials below and ask if you have any questions.

Special group setup

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

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

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

    Recall our general instructions and policies on GitHub Classroom assignments.

  2. You can join an existing group if someone on your group has created one already. If not, you need to create it. Ensure it is titled G##-Topic with ## replaced by your group number from Canvas and Topic replaced by a simple and short description of your project. E.g., G07-PaintProvenance.

    Warning: It is important that the name be short and not include special characters. E.g., we’d prefer G03-FishThoughts and not G03-Do fish think? Visualizing fMRIs of fish 🐟 performing looking 👀 tasks. Long names caused weird bugs in GitHub Classroom.

    More details on how to join a group are available in the GitHub blog.

  3. Your repository will be automatically created by prefixing the assignment name to your group name. The template gives you a good starting point for your project. I.e., you don’t have to reinvent the basic CSS layout, responsive resizing, formatting, etc. details. But you don’t have to stick with what we provide, as long as you can do better!

Normal setup

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

    E.g., in your terminal / command prompt CD to where you want this 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.

  2. CD or open a terminal / command prompt window into the cloned folder.

  3. Start a simple python webserver. E.g., python -m http.server, python3 -m http.server, or py -m http.server. If you are using python 2 you will need to use python -m SimpleHTTPServer instead, but please switch to python 3 as Python 2 was sunset on 2020-01-01.

  4. Wait for the output: Serving HTTP on 0.0.0.0 port 8000 (http://0.0.0.0:8000/).

  5. Now open your web browser (Firefox or Chrome) and navigate to the URL: http://localhost:8000.

Repo organization

Here is an overview of the files and folders we provide for you in your repo.

Root files

  • README.md is this explanatory file for the repo.

  • index.html contains the main website content.

  • style.css contains the CSS.

  • LICENCE is the default source code license for the template.

Folders

Each folder has an explanatory README.md file.

  • data is where you will put your data files.

  • favicons contains the favicons for the web page. You don’t need to change anything here.

  • .github contains GitHub Actions (docs) which will automatically validate your HTML, CSS, and hyperlinks when you push (see the validation last step below). Do not edit files here except to create new .yml files for any additional actions you choose to add (you are not required to make any).

  • files will contain your slides (PDF) and video (MP4).

  • img will contain your screenshots, diagrams, and photos.

  • js will contain all JavaScript files you write.

    • visualization.js is the main code that builds all your visualizations. Each visualization should be built following the Reusable Chart model, ideally with a separate .js file for each one.

  • lib will contain any JavaScript library you use to ensure long-term survivability. It currently includes D3. Note: Put all libraries here rather than loading from some other website or CDN.

Software license

  1. Review the license for your project in LICENSE. The default license we include in the template LICENCE file is the open source 3-Clause BSD License. You are not required to make your project open source, but it is preferred and enables easier adoption of your contributions by others.

  2. Add your names to LICENCE. If you make any changes to your license that would preclude your partner being able to use and modify your code, you will need to sign a Non-exclusive Right to Use and Modify Agreement to give them permission to do so.

Implement

Based on your final sketches and implementation plan, begin programming! At a minimum by the due date of this assignment (progress past what is described below is encouraged) you should have the following in the repository:

  1. Data uploaded.
  2. At least one static initial visualization coded in D3, including loading your real data.

Note: This may be your first experience working with other people in a git repository. Please see some details about our suggested group workflow in Tutorials/git.

Note: You do not need to commit to test your code. E.g., you don’t need to deploy your GitHub page to see your changes as you make them. Use our normal instructions to run a local web server instead.

Warning: Don’t commit private/confidential data! It is a bear to scrub out if you do.

Webpage content

Update the template in index.html with content about your project. In particular:

  1. Update the title metadata, currently:

     <title>G##: Topic, DS 4200 S22</title>

    Replace ## with your group number from Canvas and Topic with a description of your project. It can be longer than your GitHub Classroom group name, but should still be fairly short.

  2. Likewise, update the heading visible at the top of the page:

     <h1>Project Group ##: Topic, DS 4200 S22</h1>

  3. Update the list of group members, currently:

     <p><strong>Student One</strong>, <strong>Student Two</strong>, <strong>Student Three</strong></p>

  4. Add an abstract under the Abstract heading. It should be short (approximately 200 words) and summarize the user needs, motivating questions, and your proposed solution in simple English.

Note: There are currently sections for the visualization explanation, including a link to the slides, and a demo video. You don’t need to populate these sections yet.

Feel free to add more sections and reformat the page as needed to have the ideal final product.

GitHub Pages, hyperlinks, & validation

  1. Commit and push your files to GitHub and test whether your website looks the same on GitHub pages. Note: the GitHub Pages site won’t show up until you make your first commit & push to the remote repository, and it may take up to a minute for it to finish deploying. 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.

  2. Edit the last line 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.

  3. In index.html update the GitHub repo URL with the URL of your repository. It is in the span with id='forkongithub'.

  4. Make any edits necessary to ensure your code passes the W3 validator. You can see the results automatically from the ‘Validate HTML, CSS, and Links’ checks we run when you push to GitHub. I.e., you want to see a green check next to your commit () and not a red X (). You can also see the results in the Actions tab of your repo:

    GitHub Actions tab

Submission instructions

  1. Commit all your local files and push them to the remote repository on GitHub which was generated by GitHub Classroom. We will grade based on what is visible on the GitHub Page.

  2. One person from your group should submit the URL of your repository to the assignment P6—Implementation 1 in GradeScope.

    Note: Use Gradescope’s Group Members tab to add the members of your group to your submission.

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

Academic integrity

You are welcome to use D3 tutorials or resources as a starting point for your code. However, keep our academic integrity policy in mind.

Warning: You must cite and reference the resources or sample code you use and explain how you use them and where (e.g. “js/main.js line 33”).

Warning: Cite everything, including code from the D3.js Graph Gallery, bl.ocks.org, Observable, or Stack Overflow!

Failure to properly cite and attribute code is a breach of academic honesty. Simply copying existing examples without performing thoughtful edits is a breach of academic honesty. Also, per our syllabus, homework is an individual assessment and should be completed by you alone. You are welcome to ask fellow classmates and students for help and discuss the assignment, but the submission should be your own work.

See the academic integrity policy on the syllabus for more detail on our expectations.

Grading notes

  • You will also be graded for the quality of your static visualization in terms of polish and completeness.
  • Points will be deducted for not following the instructions.

Tips, tricks, & troubleshooting

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

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