- There's a wide range of backgrounds in the class -- it's expected and good to see.
- Grading will be based on how much you learn, not on how your background compares with others.
- There's a lot of information. We're diving right in. There's no wading involved.
- So ask questions!! There will be major awards for both asking and answering (in Piazza and in class)
- As for Major Awards -- I'm keeping track, it'll be part of the class-participation score.
- Make use of office hours! If office hours aren't convenient for you, just make an appointment.
A list of notebooks so far (like book chapters, except there's no book)...
- Last week
- This week
- Introduction to Data
- Observable Inputs -- the collection
- Introduction to Imports
- Introduction to HTML
- Observable Plot -- mbostock notebook
- Introduction to Embedding -- notebook
- JavaScript for Python Programmers
- This was required reading -- Review it briefly.
- Let's skim through it and see if there are any questions.
- We won't go into great detail.
- This is something you should keep handy and look at periodically.
- Introduction to Code
- This is an alternative with much of the same information, not Python-centric
- Assigment #1 had two notebooks for required reading:
- JavaScript for Python Programmers
- In principle, we could have a quiz on this required reading from the assignment.
- Observable for Jupyter Users
- This was required reading -- Review it briefly in class
- In principle, we could have a quiz on this required reading from the assignment.
- If we were to have a quiz, this is what some of the questions would look like...
- JavaScript for Python Programmers
- Demo quiz questions
- Question 1: In Jupyter notebooks, it's implicit that the "repr()" -- printable reprepresentation -- of the last expression gets printed below the cell. What's implicit from an Observable notebook cell?
- Multiple choice answers
- The value of the last expression gets printed.
- A string equivalent of the last expression is printed below the cell.
- A string equivalent of the last expression is printed above the cell.
- This is only true if you return a string.
- Undefined.
- THIS IS THE CORRECT ANSWER -- You must explicitly return values
- None of the above
- Question 2: How many types of cells are there
- 1 -- THIS USED TO BE THE CORRECT ANSWER -- JavaScript -- that's what it says in the reading, but it's out of date
- 2
- 3
- 4 -- THIS IS SORT OF THE CORRECT ANSWER -- that's how many there are now (if you create a new cell)
- The two sort-of-answers are reconciled by understanding the role of the standard library
- This would have been a trick question in a quiz, and students would have been justified in objecting;-)
- Observable standard library
- Question 3: Multi-line code cells are surrounded by...
- white space
- square brackets
- curly brackets -- THIS IS THE CORRECT ANSWER
- parentheses
- Question 4: If you create two cells named "a" and run them in sequence then
- The first cell in the sequence wins and determines the value of "a"
- The second cell in the sequence wins and determines the value of "a"
- None of the above -- THIS IS THE CORRECT ANSWER -- you'll create a runtime error
- Question 5: When you press "Cmd-Enter", Observable cells run as follows:
- All cells run from top to bottom
- Only the individual cell runs
- All cells above the current cell run first, then the current cell runs
- None of the above -- THIS IS THE CORRECT ANSWER
- The current cell will run along with any cells that depend on the return value will also run.
- The cells run in execution order.
- How Observable Runs
- Learning goals
- Introduce various ways to get data in/out of observable notebooks
- d3.json (the easy way) vs fetch (the hard/modern way) vs XMLHttpRequest (yuck!)
- start thinking about potential data sources for term project
- We didn't spend much time on this in class
- Introduction to Data
- Related references
- Introduction to Promises
- d3.autoType
- check for date
- CORS
- Introduction to Imports
- Working with the census API -- mbostock notebook
- Learning goals
- Lightweight interface elements in Observable (the easy way)
- Extensible and memorable API
- The hard way
- References
- Interactive Plot -- my notebook
- Observable Plot (Jupyter) -- my notebook
- EXERCISE 1 -- Put the earthquake data into a table
- EXERCISE 2 -- Add an Input with maximum-magnitude filter
- Note: Did this together at the end of Monday's class
- the shared notebook
- STOPPED HERE ON MONDAY
- Solution -- Earthquakes in a table on a map in a Plot
- html.md -- This is the minimal answer to last week's assignment
- Basic HTML page (not covered in class)
- createElement -- MDN
- This MDN reference compares basic HTML with same content created dynamically with JavaScript (good demo)
- Note: Our goal is not to get super into the weeds of Web technologies
- MDN is a great resource (bottom of the page has browser compatibility)
- Google "javascript map mdn" and look at the compatibility
- ES6 -- ECMAScript -- wikipedia
- createElement -- MDN
- Note: On Github, markdown gets formatted automatically into a web page, giving you CSS with Jekyll
- Learning goals
- Quick Plot for tabular data with sensible defaults (e.g., in Python: Seaborn)
- Customizable (e.g., in Python: Seaborn is built with Matplotlib)
- Memorable API designed with extensibility in mind (e.g., in Python: Um, wait. Is that Seaborn or Matplotlib?)
- Observable Plot -- mbostock notebook
- Recall array methods we used last time (and will be using a lot in the future)
- If we do this: `let a = [];
- Then this evaluates to true:
a instanceof Array - Object prototypes
- Prototypes are the mechanism by which JavaScript objects inherit features from one another.
- Array.filter
- All Array instances have a filter method
- Array.map
- All Array instances have a map method
- EXERCISE 3 -- Put the data on a map by replacing the airports (recall observable inputs)
- Earthquakes in a Table
- Introduction to Imports
- See the section: "Rewrite" Code Using import - with
- World Airports
- EXERCISE 4 -- Visualize the earthquakes with Observable Plot
- Start with -- Earthquakes in a table
- Solution -- Earthquakes in a table on a map in a Plot
- This notebook has solutions to all 4 exercises.