Hello World HTML Document

31:T4cd,md` ## A *very* brief introduction to Observable Welcome to your new programming environment! This is Observable *notebooks*. A notebook is an interactive document defined by code. It is not dis-similar to jupyter notebooks. A notebook is tool for exploring data, prototyping visualizations, creating design expositions, or for narrative style explanations. The notebook is browser-based, meaning you can edit, run, and visit your notebooks from any computer, anywhere there is an internet connection. This also has the advantage of making it very easy to share your notebooks (... and submit them to your instructors). Notebooks are built from *cells* which contain code for input and produce an output above. As you might expect, this can produce all sorts of things (... like the cell below or the neat visual banner above - *Credits to Mike Bostock*). As you might have guessed, Observable notebooks are written in JavaScript, the language of the web (Albeit, in a slightly nuanced way). **FORK AND EDIT THIS NOTBOOK** For all tutorials involving Observable notebooks, please fork the tutorial notebook so you can save your work. You can do this by clicking the "Fork" button in the upper right-hand side of the website. `32:[] 2f:{"title":"Week 2: A Brief Introduction to JavaScript and Observable","cells":[{"id":0,"value":"md`# Week 2: A Brief Introduction to JavaScript and Observable`","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"image = flood","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":64,"value":"2 + 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":58,"value":"md` ## What is JavaScript?\nBefore we get straight into JavaScript. Let's review HTML and CSS. HTML stands for HyperText Markup Language. It structures the content of any given webpage. This structure allow you to style (CSS - Cascadian Style Sheets) and interact with (Javascript) your website. There are a variety of languages for developing websites, but in the end, your browser ends up using HTML as the core basis for how the webpage is structured.\n\nHTML uses **elements** to create structure an add content to the website.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"html`

I am a piece of content.

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"md` These elements come together and form a hierarchical structure that is read by browsers as a webpage`","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"html`\n\n\n \n \n \n Hello World HTML Document\n \n \n \n

Hello World

\n \n \n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":115,"value":"md` This hierarchical structure is called the Document Object Model (DOM). It provides a clean structure with which JavaScript can interact to create interactive and dynamic websites AND of course allows us to create rich and interactive data visualization interfaces (more on how this is done next week).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":123,"value":"md` JavaScript is quickly becoming a general-purpose language that applies to many uses. It is used server-side and client-side. We will be focusing on client-side front-end JavaScript. It is a powerful and quickly evolving language. For those of you familiar with Java, it has many similarites, but also many nuances which will be made apparent to you.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":76,"value":"md` ## Javascript in Observable\nObservable notebook cells take two forms: *expressions* and *blocks*.\n\n### Expressions\nThese are used for definitions of objects that are accessible *globally* throughout an entire notebook.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":127,"value":"Object1 = \"This object can be referenced globally\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":129,"value":"Object1","pinned":true,"hidden":false,"mode":"ojs"},{"id":133,"value":"md` Cells are also evaluated *topologically*, meaning you can have cells in any order and they will still evaluate. Try moving the Object1 reference before its definition.\n\nThis also means that we cannot redefine cells that are global variables. Try uncommenting the cell below. FOr a more detailed explanation see: [immmutability]('https://observablehq.com/@jimmcnulty41/mutability-updates-in-observable')` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":137,"value":"//Object1 = \"try me\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":141,"value":"md` ### Blocks\nBlocks are used for complex definitions. They are surrounded by curly braces {}. They are great for definitions that need local variables like loops, and are used for when you need to write more than one code expression for a cell.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":148,"value":"{\n let x = 0;\n for (let i = 1; i <= 10; ++i) {\n x += i;\n }\n return x;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":150,"value":"md `**SCOPE** you cannot access local variables globally`","pinned":false,"hidden":false,"mode":"ojs"},{"id":152,"value":"X","pinned":true,"hidden":false,"mode":"ojs"},{"id":155,"value":"md` You can access blocks in other cells by writing them as function definitions`","pinned":false,"hidden":false,"mode":"ojs"},{"id":157,"value":"function formal_introduction(name) {\nreturn \"Greetings! my name is \" + name\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":162,"value":"formal_introduction(\"IAT355 TA\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":166,"value":"md` ### Reactive Cells\nA very nice feature of Observable is that cells are *reactive*, meaning that if a cell value changes, all cells that reference it automativally and instantaneously update (Kind of like excel). Try changing the text in our \"formal_introduction\" function (*hold shift+enter OR click the blue triangle on the right to execute*). `","pinned":false,"hidden":false,"mode":"ojs"},{"id":71,"value":"md` ## JavaScript Data Structures\nData in JavaScript are object that represent values or other objects. There are two primary data types: primitive and reference. Primitives must be of a certain type, while reference data types can reference other objects (As a result, you can have arrays of objects and objects of arrays).\n\n### Primitive Data Types`","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"md ` #### Number:\nAny integer or floating-point value`","pinned":false,"hidden":false,"mode":"ojs"},{"id":181,"value":"1.3 + 3.15","pinned":true,"hidden":false,"mode":"ojs"},{"id":183,"value":"md` we can do simple operations on numbers as you would expect, and can use JavaScript native \"Math\" methods. (*notice math is a built-in object that has properties and methods for mathematical functions and constants.*)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"Math.random()","pinned":true,"hidden":false,"mode":"ojs"},{"id":194,"value":"md `#### Boolean:\nTrue or False`","pinned":false,"hidden":false,"mode":"ojs"},{"id":201,"value":"true","pinned":true,"hidden":false,"mode":"ojs"},{"id":204,"value":"!false","pinned":true,"hidden":false,"mode":"ojs"},{"id":208,"value":"md` We can use logical operators such as AND + OR (Shown in order below)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"true && false","pinned":true,"hidden":false,"mode":"ojs"},{"id":215,"value":"true || false","pinned":true,"hidden":false,"mode":"ojs"},{"id":257,"value":"md` ### Null\nvariable with null value. It refers to a \"non-existing object\" and can be thought of as nothing.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"x = null","pinned":true,"hidden":false,"mode":"ojs"},{"id":265,"value":"x","pinned":true,"hidden":false,"mode":"ojs"},{"id":267,"value":"md` ### Undefined\nValue has not yet been assigned`","pinned":false,"hidden":false,"mode":"ojs"},{"id":275,"value":"{var y\nreturn y\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":217,"value":"md ` ### String:\nText characters`","pinned":false,"hidden":false,"mode":"ojs"},{"id":220,"value":"'strings can use single quotes'","pinned":true,"hidden":false,"mode":"ojs"},{"id":223,"value":"\"or double\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":227,"value":"\"but not both'","pinned":true,"hidden":false,"mode":"ojs"},{"id":230,"value":"\"strings have native methods\".length","pinned":true,"hidden":false,"mode":"ojs"},{"id":232,"value":"'They can be' + \" combined\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":252,"value":"\"strings can be sliced\".slice(-6)","pinned":true,"hidden":false,"mode":"ojs"},{"id":255,"value":"\"strings,can,be,split\".split(',')","pinned":true,"hidden":false,"mode":"ojs"},{"id":277,"value":"md`## Reference Data Types\n### Arrays:\nSpecial objects to store values or other objects. They use square brackets [] and can be indexed using an index number.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":280,"value":"array = [1, \"two\", 3]","pinned":true,"hidden":false,"mode":"ojs"},{"id":283,"value":"typeof array","pinned":true,"hidden":false,"mode":"ojs"},{"id":287,"value":"array[2]","pinned":true,"hidden":false,"mode":"ojs"},{"id":299,"value":"md` Arrays also have some useful methods.`","pinned":true,"hidden":false,"mode":"ojs"},{"id":289,"value":"array.length","pinned":true,"hidden":false,"mode":"ojs"},{"id":301,"value":"array.indexOf(\"two\") //notice indexing starts from 0","pinned":true,"hidden":false,"mode":"ojs"},{"id":306,"value":"array.slice(2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":308,"value":"array.join(' and ')","pinned":true,"hidden":false,"mode":"ojs"},{"id":310,"value":"array.concat(4) //add values on","pinned":true,"hidden":false,"mode":"ojs"},{"id":312,"value":"md` ### Objects:\nAlmost everything you do in JavaScript involves objects. Objects have properties that come in name.value pairs. They also have methods that can be used with them, as we have seen in the examples above.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":316,"value":"object = ({key: \"value\", anotherKey: \"anotherValue\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":320,"value":"md` How to retrieve values:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":318,"value":"object.key","pinned":true,"hidden":false,"mode":"ojs"},{"id":323,"value":"Object.keys(object) // return an array of property key strings","pinned":true,"hidden":false,"mode":"ojs"},{"id":329,"value":"md` Arrays and objects are commonly used to store data in a shape/format that is ready\nfor analysis and visualization.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":331,"value":"data = [\n {city: \"Seattle\", annual_hours_sunshine: 2163, annual_precipitation: 37.13},\n {city: \"New York\", annual_hours_sunshine: 2677, annual_precipitation: 46.23},\n {city: \"Chicago\", annual_hours_sunshine: 2504, annual_precipitation: 39.04}\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":338,"value":"md`**Challenge**: Open a cell below using the plus sign that appears when you hover on the lower part of the cell. Return the value for annual hours of sunshine in Chicago.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"md` ## JavaSript functions\nJust like in Java or other languages, functions are code that can run when called. To be used, it must be defined using a function declaration. When defining functions, you also need to define parameters which are placeholders for variable values that function is called with.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":347,"value":"function multiply(number1, number2) {\n return number1 * number2\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":349,"value":"multiply(8,6)","pinned":true,"hidden":false,"mode":"ojs"},{"id":351,"value":"md` *return* is used to feed a value back to the caller. It also marks the end of a function and stop its execution when they are reached. You can still change variables without return values, but you need return values to pass them back to the caller.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"md` ### Arrow functions (=>) ###\n[**arrow functions**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions) have been the source of much confusion. They come as part of the new ES6 release of JavaScript which adds new syntax to make code more readable, modern, and less verbose. \nThe arrow function serves several purposes:\n* it allows a more concise syntax;\n* it supports *implicit returns*, meaning that it's really useful when all you want to do is support a *callback* (for example, in a response to a user action).\n\nWe can rewrite the multiply function above using the arrow notation below:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":354,"value":"multiply2 = (a, b) => a * b","pinned":true,"hidden":false,"mode":"ojs"},{"id":396,"value":"md` if we have only one parameter, we do not need parentheses around it`","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"multiply3 = a => a * a","pinned":true,"hidden":false,"mode":"ojs"},{"id":403,"value":"md` Notice: we don't need *return* if it is the only statement in a function.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":567,"value":"md `Arrow functions are alway *anonymous*: we can't bind them to a function name. So, for example, we can't use the form to define a function name we can then call like this:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":569,"value":"function multiplyWithName(number1, number2) {\n return number1 * number2\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":573,"value":"newNum = multiplyWithName(9,16)","pinned":true,"hidden":false,"mode":"ojs"},{"id":577,"value":"md `We can however bind the arrow function to a variable name like this:\n\\`\\`multipliedWithName = (a,b) =>multiplyWithName(a,b)\\`\\`\n\nThis may seem like the same thing, but makes a difference in debugging when you are trying to trace execution. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":594,"value":"multipliedWithName = (a,b) =>multiplyWithName(a,b)","pinned":true,"hidden":false,"mode":"ojs"},{"id":597,"value":"newnum2 = multipliedWithName(9,14)","pinned":true,"hidden":false,"mode":"ojs"},{"id":389,"value":"md` ### Iteration, Map, Filter, and Reduce\nJavaScript allows for some more complex operations on data structures than our above examples. Say for example we had and array of numbers and we wanted to count the number of elements. Of course we could use the .length method, but we could also write a piece of code to iterate over each item in the array.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":459,"value":"RA = [1, 2, 3, 4, 5]","pinned":true,"hidden":false,"mode":"ojs"},{"id":602,"value":"md `### Understanding the d and datum concepts in Javascript##\nJavascript provides a built-in data holder for each individual element (*datum*) that a function will access as it steps through (*iterates over*) an array. When you see *d* referenced in a function that deals with such a iteration, it refers to the particular element in that array that is currently being used. Because so much of processing in Javascript is done with arrays, sometimes hidden (as in an array of objects from a selection, for example), it's important to understand this concept. In the example below, we see the function\n\\`\\`\\`\n RA.forEach(function(d) {\n\\`\\`\\`\nusing this. Basically, RA is an array; the [**forEach**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach). function iterates through \\`\\`RA\\`\\` and at each step processes the element at that point in the array, giving it the variable name \\`\\`d\\`\\`.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":462,"value":"md` In the function below, we define a counter and then add 1. (ES6 defines variables that can be redefined using \"let\" and constants using \"const\"). You may notice the \"+=\" operator, this is the logical equivalent of x = x+y. In this code block, we are applying a function on each datum of the array. That function is adding one to the variable \"count\" everytime we cycle through a number within the array.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":378,"value":"{\n let count = 0;\n RA.forEach(function(d) {\n count += 1;\n });\n return count;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":471,"value":"md` Say we wanted to add 1 to each of the elements of the array and return the full array. JavaScript has array method [**map**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map), which unlike \"ForEach\", returns a full array with a function applied to each element.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":476,"value":"RA.map(function(d) {return d + 1})","pinned":true,"hidden":false,"mode":"ojs"},{"id":479,"value":"md` **challenge**: Rewrite the previous function using arrow function syntax.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"md` [**filter**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) is another array method that is very useful. It filters arrays based on a function that provides criteria for filtering.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":491,"value":"RA.filter(d => d > 3)","pinned":true,"hidden":false,"mode":"ojs"},{"id":493,"value":"md` [**Reduce**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce) can also be fairly confusing. Essentially, reduce functions like our counter function above. We used an accumulator (count), which is built into reduce. The syntax is similar to map and filter, except we add a parameter that represents the accumulator. The first parameter for reduce is the callback function which takes the accumulator as a parameter and the individual value being iterated through the array. The second parameter of reduce is the initial value of the accumulator. By default it is 0. Lets rewrite our count function using reduce.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":496,"value":"RA.reduce((count,d) => count + 1, 0)","pinned":true,"hidden":false,"mode":"ojs"},{"id":500,"value":"md` We can change the second parameter to change the starting value of our count`","pinned":false,"hidden":false,"mode":"ojs"},{"id":503,"value":"md`**Challenge**: use reduce to sum all the values in our array \"RA\"`","pinned":false,"hidden":false,"mode":"ojs"},{"id":506,"value":"md` ## Function Chaining:\nA common pattern used in JavaScript is function chaining. This is a \"functional programming\" style and it is a pattern you will see a lot in the future. We can pass data along using simple syntax by chaining methods together. lets operate on some data by chaining some methods together. Here we have a data set about cities in the USA.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":513,"value":"cities = [\n {\"city\":\"seattle\", \"state\":\"WA\", \"population\":652405, \"land_area\":83.9},\n {\"city\":\"new york\", \"state\":\"NY\", \"population\":8405837, \"land_area\":302.6},\n {\"city\":\"boston\", \"state\":\"MA\", \"population\":645966, \"land_area\":48.3},\n {\"city\":\"kansas city\", \"state\":\"MO\", \"population\":467007, \"land_area\":315}\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":520,"value":"md` As a first task, let's filter all the cities with a population greater than 50K, make the names uppercase.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":526,"value":"bigCities = cities.filter(d => d.population > 500000)\n .map(d => {return {city: d.city.toUpperCase(),\n state: d.state,\n population: d.population,\n land_area: d.land_area}})","pinned":true,"hidden":false,"mode":"ojs"},{"id":538,"value":"md`**Challenge**: The current land_area is calculated using mi². Return the total land area in km² for all cities with a population less than 70K. (1 mi² is 2.59 km²)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":85,"value":"md` ## Loading Modules\nObservable allows you to import other libaries. This is the standard mode of operation in web development. To do this, there are many package managers. In particular, Observable and we will use NPM package manager. Observable can connect directly to NPM via [require](https://observablehq.com/@observablehq/introduction-to-require). We simply pass an argument for the specific package and version we want to load into our notebook. Presently, we will load D3.js. The defacto data visualization library which has a lot of utilities that we will be making use of.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":630,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":635,"value":"md` Some of d3's utilities let us load data using a standard and reusable structure. We can load all types of formats including csv (d3.csv) and JSON (d3.json).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":638,"value":"cars = d3.json('https://vega.github.io/vega-datasets/data/cars.json')","pinned":true,"hidden":false,"mode":"ojs"},{"id":688,"value":"md` ### Challenge: \nReturn an array with the names and mileage for japanese cars with 6 cylinders`","pinned":false,"hidden":false,"mode":"ojs"},{"id":682,"value":"md` ### Importing from other notebooks\nObservable allows you to import cells from other notebooks. Let's import some data from another notebook.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":703,"value":"import {weather as weather} from \"@sfu-iat355/dataset-for-import\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":707,"value":"weather","pinned":false,"hidden":false,"mode":"ojs"},{"id":710,"value":"md` **Challenge**:\n\n1.) How many days did it rain in seattle?\n\n2.) How much did rain on rainy days?` ","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"md` ## References\nMuch of the above was adapted from or inspired by:\n* [Learn JS Data](https://observablehq.com/@dakoop/learn-js-data) \n* [Intro to D3](https://wattenberger.com/blog/d3#manipulating-the-dom)\n* [Minimal Introduction to JS](https://observablehq.com/@uwdata/a-minimal-introduction-to-javascript-and-observable)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"md` ## Appendix`","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"import {canvas as flood} with {height} from \"@mbostock/randomized-flood-fill\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"height = 200","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}