Class 1

🤔 How did we get here and where are we going

Inspiration

All 9,866,539 buildings in the Netherlands shaded according to year of construction by @bertspaan.

Synopsis

Date: 25-09 (ID 1 and ID 3) or 26-09 (ID 2)
Slides
Examples

Schedule

Course outline
Bootcamp: HTML, CSS, and JS
SVG and Canvas (subgoal 1)
Playing with SVG (practice)
d3
GitHub
Data formats (subgoal 2)
Loading data (practice)

Assignments

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

Playing with SVG (practice)
Loading Data (practice)
Bar chart (homework)
Resources to refresh your memory (extra※)

※ Although not required we expect students who lack in knowledge to catch up on their own.

Playing with SVG

Example outcome of this assignment by @ju5tu5.

In this assignment you’ll learn the basics of SVG.

Synopsis

Practice
Due: 7 a.m. the day of class 2
Results: Gallery

Tips

MDN’s SVG documentation
Examples found in the slides
Celtic Knotwork
Chernoff Fish
Bugs?

Step A

If you haven’t already, sign up for GitHub and install a text editor.

Step B

Create a file on your computer, username.svg (where username is your GitHub username, so in my case it would be wooorm.svg), and copy-paste the following document into it.

💁 Update the <title> element in the file with your username too.

username.svg

<svg xmlns="http://www.w3.org/2000/svg">
  <!--Update the title with your username-->
  <title>@username</title>

  <!--Add stuff here-->

  <!-- NOTHING TO SEE HERE... MOVE ALONG!!! -->
  <script>// <![CDATA[
  var p = window.location.pathname
  var h = p.slice(p.lastIndexOf('/') + 1, p.lastIndexOf('.'))
  console.log('Hi @%s 👋', h)
  if (!document.querySelector('circle')) bug()
  if (h === 'username') throw new Error('Rename this file to `your-github-username.svg`!')
  if (h === 'your-github-username') throw new Error('No no, your *actual* GitHub username!')
  if (document.querySelector('title').textContent === '@username') throw new Error('Update your `<title>`!')
  var ok = ![
    ['circle', '1.0. `<circle>` element'],
    ['circle[cx]', '1.1. `cx` attribute on `<circle>`'],
    ['circle[cy]', '1.2. `cy` attribute on `<circle>`'],
    ['circle[r]', '1.3. `r` attribute on `<circle>`'],
    [8001, 'See the assignment description for an extra question!'],
    ['rect', '3.0. `<rect>` element'],
    ['rect[x]', '3.1. `x` attribute on `<rect>`'],
    ['rect[y]', '3.2. `y` attribute on `<rect>`'],
    ['rect[width]', '3.3. `width` attribute on `<rect>`'],
    ['rect[height]', '3.4. `height` attribute on `<rect>`'],
    ['line', '4.0. `<line>` element'],
    ['line[x1]', '4.1. `x1` attribute on `<line>`'],
    ['line[y1]', '4.2. `y1` attribute on `<line>`'],
    ['line[x2]', '4.3. `x2` attribute on `<line>`'],
    ['line[y2]', '4.4. `y2` attribute on `<line>`'],
    ['line[stroke-width]', '4.5. `stroke-width` attribute on `<line>`'],
    ['line[stroke]', '4.6. `stroke` attribute on `<line>`'],
    ['polygon', '5.0. `<polygon>` element'],
    ['polygon[points]', '5.1. `points` attribute on `<polygon>`'],
    ['path', '6.0. `<path>` element'],
    ['path[d]', '6.1. `d` attribute on `<path>`'],
    ['text', '7.0. `<text>` element'],
    ['text[x]', '7.1. `x` attribute on `<text>`'],
    ['text[y]', '7.2. `y` attribute on `<text>`'],
    ['text:not(:empty)', '7.3. Content in `<text>` element'],
    ['g', '8.0. `<g>` element'],
    ['g[stroke]', '8.1. `stroke` attribute on `<g>`'],
    ['g[stroke-width]', '8.2. `stroke-width` attribute on `<g>`'],
    ['g > :nth-child(n+2)', '8.3. `<g>` element with at least two children'],
    [':root[viewBox]', '9.0. `viewBox` attribute on `<svg>`'],
    [':root[width]', '9.1. `width` attribute on `<svg>`'],
    [':root[height]', '9.2. `height` attribute on `<svg>`'],
    ['[fill]', '10.0. `fill` attribute on any element'],
    ['[font-family]', '10.1. `font-family` attribute on any element'],
    ['[font-size]', '10.2. `font-size` attribute on any element'],
    ['[opacity]', '10.3. `opacity` attribute on any element']
  ].some(assert)
  if (ok) {
    console.log([
      'Well done @%s! 🎉 Assignment complete!',
      'Go back to the class page on GitHub to see what happens next'
    ].join('\n'), h)
  }
  function assert(check) {
    var key = check[0]
    if (typeof key === 'number') {
      if (!(key in localStorage)) {
        console.info(check[1])
        localStorage[key] = true
        return true
      }
      return false
    }
    var exists = Boolean(document.querySelector(check[0]))
    console.assert(exists, check[1])
    if (!exists) {
      console.warn([
        'Hmm, not there yet! 🤔',
        'Go back and fix the above problem in your file',
        'and when done hit refresh here to check again!'
      ].join('\n'))
      return true
    }
  }
  function bug() {
    var t = document.createElementNS('http://www.w3.org/2000/svg', 'text')
    t.textContent = 'Open your Console'
    t.setAttribute('fill', 'red')
    t.setAttribute('x', '20')
    t.setAttribute('y', '55')
    t.setAttribute('font-family', 'Comic Sans MS')
    t.setAttribute('font-size', '35')
    document.documentElement.appendChild(t)
  }
  // ]]></script>
</svg>

Step C

Let’s make art! Open the file created in step B in your text editor and browser. Now, perform the following substeps.

💁 The code contains a script to check how you’re doing. Open your console to see how you’re progressing.

Add a <circle> element with cx, cy, and r attributes
Open your console’s elements tab and inspect your <circle>. Use the tree pane to edit the values for the cy, cx, and r attributes
Add a <rect> element with x, y, width, and height attributes
Add a <line> element with x1, y1, x2, y2, stroke-width, and stroke attributes
Add a <polygon> element with a points attribute
Add a <path> element with a d attribute
Add a <text> element with x and y attributes, and add actual text to the element
Add a <g> element with a stroke and stroke-width attribute around at least two of your previously added elements
Add viewBox, width, and height attributes to your <svg> element
Add fill, font-family, font-size, and opacity attributes to any of the elements inside <svg>

💁 Feel free to add more elements and attributes. The above are the minimum.

Step D

Done with step C? Awesome! You’re a true SVG artist 👩‍🎨

For this step, we’re going to hand your work in. This will add your work to the website.

First remove the <script> element from your SVG file (including the CDATA inside it). We don’t need it anymore
You can’t just change our website. You have to propose changes. On GitHub, that’s called a Pull Request. First, we’re going to Fork a repo. Navigate to our course repository on GitHub, cmda-tt/course-17-18, and in the top-right corner of the page click Fork
Navigate to the directory site/class-1-play on your fork. Follow the guide Adding a file to a repository to upload the SVG file you made in step B. For the commit message, use Add @username (in my case Add @wooorm). Leave the commit description empty. Select Create a new branch and use the name play. When ready, click Commit changes
Your changes are now on your fork and not yet handed in. To suggest that your changes be applied to our website, create a Pull Request. Make sure that base fork is set to our repository, base branch to master, head fork to your repository, and head branch to play. Leave the comment empty and click Create pull request

Complete

All done! Our Continuous Integration and one of our lecturers will review your code. We’ll request changes if your code is not yet complete or merge your PR and include it in the gallery.

Loading data

Apple pie from above by @anniespratt.

In this assignment you’ll learn about JSON and CSV, two commonly used data formats. Additionally, you’ll learn to use d3 to request files.

Synopsis

Practice
Due: 7 a.m. the day of class 2
Results: Gallery

Tips

d3-request
RFC 4180 — CSV spec
ECMA 404 — JSON spec
Examples found in the slides
Bugs?

Step A

Create a directory on your computer named after your GitHub username (in my case wooorm).

Create a text file dinners.txt in your directory and open it.

As you may have guessed, this assignment is about food! Great! 🥖🧀

Let’s create a dataset. Add what you had for dinner the last three days to dinner.txt. For me, that’s:

Day	Dinner
Today	Paneng Nua
Yesterday	Goat Cheese Salad
Day before yesterday	Nua Pad Ped

💁 Add more data if you feel like it and can remember that far back!

💁 Feel free to use Dutch, English, or any language of your choosing. Also: any labels are fine, this is just for you.

Words like today and yesterday make a lot of sense for humans. For computers, it makes more sense to use absolute dates in a standardised format like YYYY-MM-DD. Reformat your data to include absolute dates. For me, that’s:

Day	Dinner
2017-09-12	Paneng Nua
2017-09-11	Goat Cheese Salad
2017-09-10	Nua Pad Ped

Step B

Create a file, index.csv, in your directory and open it. Fill it with the same data as dinners.txt but now structured in the CSV format: an absolute date of the dinner and what you had for dinner.

Step C

Do the same with index.json in the JSON format.

Step D

Create a file, index.html, and copy-paste the following document into it.

💁 Update the <title> element in the file with your username.

index.html

<!doctype html>
<meta charset=utf8>
<!--Update the title with your username:-->
<title>@username</title>
<meta content=width=device-width,initial-scale=1 name=viewport>

<!--Link to d3 here:-->

<!--Keep this script here for now:-->
<script src=https://cmda-tt.github.io/course-17-18/check-class-1-load.js></script>

<h1>Dinners</h1>

<!--Add your code in this script:-->
<script></script>

Step E

Open up your terminal and go to the directory created in step A. On macOS, you can type cd and a space and drag the directory in question to your terminal and finally press enter to go there.

Then, start a simple server in your directory. If you have Python installed, you can probably do that with:

python -m SimpleHTTPServer 8000

This exposes your files to your browser on localhost:8000. Open this URL in your browser.

💁 Not working? Have you pressed enter?

If you see an error saying that python isn’t found, and you’ve used Ruby, Node, or something else before see this page on how to start a simple server on your system.

If this all sounds unfamiliar to you, install Node.js (which includes npm), and run:

npm install -g http-server

…in your terminal to install a simple server. Then, run:

http-server -p 8000

…any time in the future you may need a server.

When done open up your browser and navigate to localhost:8000. This should show a message suggesting you to open your console.

💁 Done with the server? Enter ⌃-C (Control-C) in your terminal to shut it down.

Step F

Now, we’re going to add d3 to the HTML. Add a <script> element pointing to d3’s servers: d3js.org. See d3js.org on how to link directly to the latest release.

💁 The code contains a script to check how you’re doing. Open your console to see how you’re progressing.

Step G

In this step we’re going to load the JSON and CSV created in step B and step C. Use d3.json and d3.csv to load those files respectively.

See tips for more info.

In callback functions passed to d3.json and d3.csv, print the loaded data to the console with console.log.

Make sure both are printed before continuing to step H.

Step H

Instead of just logging stuff to the console let’s render your data to the DOM.

I rendered <h2> elements with the origin of the data (JSON or CSV), then <h3> elements with each date, followed by <p> elements with the name of each dinner.

Feel free to use any other semantic markup. You could use <table>s, <details>, <dl>, or something else?

You may create a file, index.css, to style your HTML.

💁 You probably need document.createElement and textContent. Feel free to dig into d3, use jQuery, or something else to render stuff to the DOM.

Step I

In this step, we’re going to hand your work in. This will add your work to the website.

First remove the <script> element referencing check-class-1-load.js, all console.log calls, and your HTML comments from index.html. We don’t need them anymore
Go to your fork of course-17-18 and create a new branch. First, make sure to switch to your master branch in the Branch select (just above your files to the left) if it’s not already selected. Then, click the Branch select again, and type in load. Finally, click Create branch: load
Navigate to the directory site/class-1-load on GitHub
Create a new file by clicking on Create new file. In the Name your file… input, type username/readme.md (in my case wooorm/readme.md). In the Edit your file… area, write # Hello World. What you’re writing is called markdown and we’ll cover it in class 2. In the commit message at the bottom, use Add readme.md for @username (in my case Add readme.md for @wooorm). Keep Commit directly to the load branch selected
Now, follow substep 3 from step D of the Playing with SVG assignment to upload the files in your directory on your computer (no, not the directory, the files!) to the newly created directory on GitHub on the load branch. In the commit message at the bottom, use Add files for @username (in my case Add files for @wooorm). Keep Commit directly to the load branch selected
Create a Pull Request and use Add @username (in my case Add @wooorm) for the title. Make sure that base fork is set to our repository, base branch to master, head fork to your repository, and head branch to load

Complete

All done! Our Continuous Integration and one of our lecturers will review your code. We’ll request changes if your code is not yet complete or merge your PR and include it in the gallery.

Bar chart

Example outcome of this assignment by @wooorm.

In this assignment you’ll learn how charts made with d3 work by inspecting and modifying an existing bar chart.

Synopsis

Homework
Due: 7 a.m. the day of class 2
Results: Gallery

Tips

Let’s Make a Bar Chart by @mbostock

Description

The project you’ll hand in will be similar to the one from Loading data but this time will render a bar chart in SVG.

Pick a bar chart (no, not another type of chart, a bar chart) from d3’s example gallery (tip: see the Basic charts section)
Copy-paste the files over to your own computer and get the chart working (tip: you may need to start a server, see step E of Loading data on how to do that)
Add a <title> element, or replace the one already there, with your GitHub username: @username (in my case @wooorm)
Move the CSS and JS from the HTML into their own files: index.css and index.js
Add a citation in index.html and index.js to the original work
Try and change all values to get to understand the code (refreshing often to see if things break, in which case ⌘-Z (Command-Z) is your best friend)
Make something pretty. Add your own CSS, swap in new data, use different labels. Make this graph your own
Translate the JavaScript to Dutch or English in inline comments. Link to the d3 docs where needed. Document everything of importance in your own words
Upload your files to site/class-1-bar (tip: see substep 4 through substep 6 from step I of the Loading data assignment, but this time use a branch bar)

Complete

All done! Our Continuous Integration and one of our lecturers will review your code. We’ll request changes if your code is not yet complete or merge your PR and include it in the gallery.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

class-1.md

class-1.md

Class 1

Table of Contents

Inspiration

Synopsis

Schedule

Assignments

Playing with SVG

Synopsis

Tips

Step A

Step B

Step C

Step D

Complete

Loading data

Synopsis

Tips

Step A

Step B

Step C

Step D

Step E

Step F

Step G

Step H

Step I

Complete

Bar chart

Synopsis

Tips

Description

Complete

Files

class-1.md

Latest commit

History

class-1.md

File metadata and controls

Class 1

Table of Contents

Inspiration

Synopsis

Schedule

Assignments

Playing with SVG

Synopsis

Tips

Step A

Step B

Step C

Step D

Complete

Loading data

Synopsis

Tips

Step A

Step B

Step C

Step D

Step E

Step F

Step G

Step H

Step I

Complete

Bar chart

Synopsis

Tips

Description

Complete