Skip to content
This repository was archived by the owner on Jun 27, 2018. It is now read-only.

class-2.md

Latest commit

 

History

History
361 lines (256 loc) · 11.5 KB

class-2.md

File metadata and controls

361 lines (256 loc) · 11.5 KB

Class 2

TypeError: undefined is not a function. (In 'undefined()', 'undefined' is undefined)

Table of Contents

Inspiration

Looking at all gold medal winners of the Olympics by @nbremer.

Synopsis

Schedule

Assignments

Submit your assignments by 7 a.m. the day of class 3.

See class 1 for assignments due before this class.

Assessment

Submit assessment 1 before the start of class 3.

Do you read me?!

Trinity College Dublin by @zeak.

Synopsis

Tips

Description

💁 Before you start, add your real name and a picture to your profile on GitHub. Open source is about real people after all.

For this assignment you’re going to add a readme to the project you handed in for the Bar chart assignment of class 1.

Create a readme.md file describing your project and include the following:

  • Short title
  • Short description
  • Background section with a longer description of why you did what you did
  • Data section describing the visualised data, its format, columns, and fields
  • Features section listing all d3 features used and linking to API docs
  • License section (tip: choosealicense.com) in the form “SPDX © First Second” (I often use “MIT © Titus Wormer”)

💁 The work you based your project on probably contains a license too. You cannot pick any license you’d want and disregard their license. Your license must be compatible with theirs. As a general rule of thumb: if you may create a derivative work (which is often true for free software licenses if your work is non-commercial) you can license your work under the same license as the original work.

Feel free to provide more useful information.

You may create a file, preview.png, to show a thumbnail of how your chart looks. You can link to it in the readme like so: ![Alt text](preview.png).

You can write this file directly on GitHub (tip: see substep 4 from step I of the Loading data assignment) or write it in your text editor and upload it when done (tip: see substep 3 from step D of the Playing with SVG assignment).

💁 You probably need to sync your fork. Unfortunately this cannot be done through the GitHub website. You can either sync a fork on the terminal or delete your fork and fork again.

Style

Elegant man with a laptop by @flenjoore.

In this assignment you’ll learn to refactor and reformat code.

Synopsis

Tips

  • prettier (JavaScript) — Opinionated code formatter
  • standard (JavaScript) — Standard style
  • xo (JavaScript) — Happiness style
  • eslint (JavaScript) — Fully pluggable style
  • stylelint (CSS) — Mighty, modern linter
  • Code Guide (HTML and CSS) — Flexible, durable, and sustainable code standards

Description

For this assignment you’re going to reformat code to make a donut chart in your own style. Feel free to use any of the tips above to check or format code. Choose any coding style that makes sense to you.

  1. First, copy the files index.csv, index.css, index.html, and index.js from site/class-2/style to your computer and get them working without changing any code yet
  2. Note that the CSS, HTML, and JS are minified: they’re great for computers, but not so much for humans
  3. Now, reformat index.css, index.html, and index.js to match your preferred style: something readable and usable by humans. Use the quotes and white-space you like, pick good variable names, and reorder stuff where needed
  4. Update the <title> element with your GitHub username: @username (in my case @wooorm)
  5. When done, add a readme.md file similar to the one from Do you readme?! that additionally lists what style choices you made

Hand in your reformatted code in a directory username (in my case wooorm) to site/class-2-style/ by creating a pull request from a branch style. Include index.csv, index.css, index.js, index.html, readme.md, and optionally a preview.png file.

debugger;

Yellow Ducks by @andreuuuw.

In this assignment you’ll learn to debug and upgrade code.

Synopsis

Tips

Description

For this assignment you’re going to fix a broken scatter plot. The HTML, CSS, and JavaScript each contain several bugs. The chart also uses d3@3 instead of d3@4.

  1. First, copy the files index.csv, index.css, index.html, and index.js from site/class-2/debug to your computer and start a simple server. If everything went OK, you should see two errors in your web browser’s console about resources that failed to load
  2. Fix the errors you just found. Then, fix the errors in the JavaScript and CSS. Depending on your knowledge of JavaScript, errors, and d3, this may be very hard. Feel free to ask others for help and try to fix the code together
  3. After all bugs are squashed, upgrade the chart from d3@3 to d3@4 (tip: see the changelog and release notes)
  4. Update the <title> element with your GitHub username: @username (in my case @wooorm)
  5. When done, add a readme.md file similar to the one from Do you readme?! that additionally lists what bugs you fixed

Hand in your bug-free and upgraded code in a directory username (in my case wooorm) to site/class-2-debug/ by creating a pull request from a branch debug. Include index.csv, index.html, index.js, index.css, readme.md, and optionally a preview.png file.