31:[] 2f:{"title":"JS / Observable Overview","cells":[{"id":0,"value":"# JS / Observable Overview","pinned":false,"hidden":false,"mode":"md"},{"id":20,"value":"## Basic Observable","pinned":false,"hidden":false,"mode":"md"},{"id":24,"value":"- Hiding & Showing contents of cells & seeing contents","pinned":false,"hidden":false,"mode":"md"},{"id":68,"value":"testVar = 34","pinned":true,"hidden":false,"mode":"ojs"},{"id":71,"value":"testVar2 = [{x: 3, y: 4}, {x: 5, y:6}]","pinned":true,"hidden":false,"mode":"ojs"},{"id":27,"value":"- Types of cells","pinned":false,"hidden":false,"mode":"md"},{"id":239,"value":"function sum(x, y) {\n return x + y;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":241,"value":"sum(3, 4)","pinned":true,"hidden":false,"mode":"ojs"},{"id":243,"value":"## This is a heading\n\nSome content\n- list items","pinned":true,"hidden":false,"mode":"md"},{"id":32,"value":"\n \n \n \n \n

\n something\n

\n 1\n

","pinned":true,"hidden":false,"mode":"html"},{"id":37,"value":"html`\n\n \n \n \n \n

\n something\n

\n 1\n

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":80,"value":"- 1 'const' per cell","pinned":false,"hidden":false,"mode":"md"},{"id":393,"value":"asdf = 1\nbb = 2","pinned":true,"hidden":false,"mode":"ojs"},{"id":396,"value":"dd = 4","pinned":true,"hidden":false,"mode":"ojs"},{"id":398,"value":"dd = dd + 4","pinned":true,"hidden":false,"mode":"ojs"},{"id":143,"value":"- Re-evaluation","pinned":false,"hidden":false,"mode":"md"},{"id":264,"value":"a = [{x: 3, y: 4}, {x: 5, y:6}]","pinned":true,"hidden":false,"mode":"ojs"},{"id":270,"value":"a[1].x = 12;","pinned":true,"hidden":false,"mode":"ojs"},{"id":272,"value":"a[1].x + a[1].y","pinned":true,"hidden":false,"mode":"ojs"},{"id":276,"value":"a[1].x","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"- ordering of cells does not matter","pinned":false,"hidden":false,"mode":"md"},{"id":282,"value":"b + 5;","pinned":true,"hidden":false,"mode":"ojs"},{"id":278,"value":"b = 3;\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":280,"value":"b + 5;","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"- scoping (multiple variables) & the use of ({ })","pinned":false,"hidden":false,"mode":"md"},{"id":289,"value":"{\n var c = 3;\n c = c + 3;\n return c + 5;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":293,"value":"c","pinned":true,"hidden":false,"mode":"ojs"},{"id":296,"value":"d = ({x: 3, y: 4});","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"## Basic Javascript","pinned":false,"hidden":false,"mode":"md"},{"id":47,"value":"- const (value vs object), let, var","pinned":false,"hidden":false,"mode":"md"},{"id":299,"value":"{\n const x = ({x: 3, y: 4});\n x.x = 5; // this is ok\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":305,"value":"{\n if (3 > 4) {\n var l = 4;\n }\n return l;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":384,"value":"{\n if (3 > 4) {\n let l = 4;\n }\n return l;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":76,"value":"- Hello World and seeing where it shows up with JS / How to debug with Observable","pinned":false,"hidden":false,"mode":"md"},{"id":313,"value":"console.log(\"Hello World!\");","pinned":true,"hidden":false,"mode":"ojs"},{"id":99,"value":"- JS tries to be smart and it can lead to errors! (Try evaluating: +null, number + null, \"23\" + 43) (JS Silently Fails in many situations!)","pinned":false,"hidden":false,"mode":"md"},{"id":315,"value":" 43 + parseInt(\"23\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"- function and => (similar to lambda in python)","pinned":false,"hidden":false,"mode":"md"},{"id":322,"value":"f = function(x, y) {\n console.log(y);\n return x + 1;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":373,"value":"f(3,4,5)","pinned":true,"hidden":false,"mode":"ojs"},{"id":329,"value":"g = () => 3;","pinned":true,"hidden":false,"mode":"ojs"},{"id":324,"value":"g(4)","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"num_array = [1, 2, 3, 4]","pinned":true,"hidden":false,"mode":"ojs"},{"id":60,"value":"x = d => d * d","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"num_array.map(function(d) {\n return d * d;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":214,"value":"generateAddNFunction = n => (x => x + n) // functions that return functions!","pinned":true,"hidden":false,"mode":"ojs"},{"id":352,"value":"generateAddNFunction2 = function(n) {\n return function(x) {return x + n};\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":346,"value":"p = generateAddNFunction(4)","pinned":true,"hidden":false,"mode":"ojs"},{"id":348,"value":"p(3)","pinned":true,"hidden":false,"mode":"ojs"},{"id":350,"value":"generateAddNFunction(4)(3)","pinned":true,"hidden":false,"mode":"ojs"},{"id":148,"value":"## Basic HTML / CSS","pinned":false,"hidden":false,"mode":"md"},{"id":401,"value":"id's should be unique, class does not have to be. Can use multiple classes with spaces","pinned":false,"hidden":false,"mode":"md"},{"id":153,"value":"

\n TEXT 1\n

\n TEXT 2\n

\n TEXT 3\n

","pinned":true,"hidden":false,"mode":"html"},{"id":162,"value":"- Using stylesheets","pinned":false,"hidden":false,"mode":"md"},{"id":158,"value":"","pinned":true,"hidden":false,"mode":"html"},{"id":167,"value":"- Access using d3 (Javascript)","pinned":false,"hidden":false,"mode":"md"},{"id":176,"value":"d3.select(\"#div1\").style(\"background-color\", \"red\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":197,"value":"## Making Sense of Class Example","pinned":false,"hidden":false,"mode":"md"},{"id":207,"value":"animalData = d3.csv(\"https://magrawala.github.io/cs448b-fa20/assets/docs/animals.csv\", function(d) {\n\t return {\n // We parse the data into an array of csv objects. We could for example change the names of fields.\n\t id: +d.id,\n\t animal: d.animal, \n\t weight: +d.weight,\n\t height: +d.height,\n\t name: d.name\n\t };\n }).then(function(animalData) {\n //Outside of Observable notebooks you would put all code to draw the graph here.\n return animalData;\n });\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":209,"value":"xScale = d3.scaleLinear()\n .domain([0, 10])\n .range([0,200]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":364,"value":"xScale(10)","pinned":true,"hidden":false,"mode":"ojs"},{"id":212,"value":"yScale = d3.scaleLinear()\n .domain([0, 10])\n .range([200,0]);","pinned":true,"hidden":false,"mode":"ojs"},{"id":202,"value":"{\n let svgPlotContainer = d3.create('svg')\n .attr('width', 200) \n .attr('height', 200)\n .style('background-color', 'whitesmoke'); //Color container bg to see its extent\n \n svgPlotContainer.selectAll('circle') // select all of the SVG circle elements in the plotContainer\n .data(animalData, d => d.id) //bind the data, using d.id as the key\n .join( \n enter => enter.append('circle'), //append an svg 'circle' element for each entering data item\n update => update, //do nothing with data items that match existing items\n exit => exit.remove() //remove svg 'circle' elements whose data is now gone.\n )\n .attr('r', 5)\n .attr('cx', d => xScale(d.weight))\n .attr('cy', d => yScale(d.height))\n .attr('fill', function (d) {\n return d.animal === 'cat' ? 'steelblue' : 'salmon'\n })\n \n return svgPlotContainer.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":389,"value":"{\n let svgPlotContainer = d3.create('svg')\n .attr('width', 200) \n .attr('height', 200)\n .style('background-color', 'whitesmoke'); //Color container bg to see its extent\n \n svgPlotContainer.selectAll('circle') // select all of the SVG circle elements in the plotContainer\n .data(animalData, d => d.id) //bind the data, using d.id as the key\n .join( \n enter => enter.append('circle'), //append an svg 'circle' element for each entering data item\n update => update, //do nothing with data items that match existing items\n exit => exit.remove() //remove svg 'circle' elements whose data is now gone.\n )\n .attr('r', 5)\n .attr('cx', d => undefined) // EVERYTHING CLUSTERS TO 0 B/C IT WAS UNDEFINED / NULL (look carefully)\n .attr('cy', d => null)\n .attr('fill', function (d) {\n return d.animal === 'cat' ? 'steelblue' : 'salmon'\n })\n \n return svgPlotContainer.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":92,"value":"## Observable Inputs","pinned":false,"hidden":false,"mode":"md"},{"id":95,"value":"rangeVal1 = Inputs.range([1,3], {value: 1, step: 0.1, label: \"A value\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":376,"value":"rangeVal1","pinned":true,"hidden":false,"mode":"ojs"},{"id":128,"value":"viewof rangeVal2 = Inputs.range([0,5], {value: 2.7, step: 0.1, label: \"Another value\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":378,"value":"rangeVal2","pinned":true,"hidden":false,"mode":"ojs"},{"id":136,"value":"viewof rangeVal3 = Inputs.range(d3.extent(num_array), {value: 1, step: 1, label: \"Another value\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":139,"value":"viewof selectVal = Inputs.checkbox(num_array, {label: \"Select from values\"});","pinned":true,"hidden":false,"mode":"ojs"},{"id":380,"value":"selectVal","pinned":true,"hidden":false,"mode":"ojs"},{"id":141,"value":"viewof restaurantName = Inputs.text({label: \"Restaurant Name\", placeholder: \"Type letters here...\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":382,"value":"restaurantName","pinned":true,"hidden":false,"mode":"ojs"},{"id":178,"value":"## Observable Loopholes: Let's Debug This Together","pinned":false,"hidden":false,"mode":"md"},{"id":413,"value":"Green square can be moved around with sliders and blue square can be moved around when you drag. This can be likely very relevant to the assignment because the circle will react to dragging but other filters will be manipulated with Inputs.","pinned":false,"hidden":false,"mode":"md"},{"id":182,"value":"viewof sq2X = Inputs.range([0, 150], {value: 50, step: 1, label: \"X of green square\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":193,"value":"viewof sq2Y = Inputs.range([0, 150], {value: 50, step: 1, label: \"Y of green square\"})","pinned":true,"hidden":false,"mode":"ojs"},{"id":184,"value":"{\n var initX = 100;\n var initY = 100;\n \n const svgContainer = d3.create('svg')\n .attr('width', 200)\n .attr('height', 200)\n .style('background-color', 'whitesmoke');\n \n let sq1 = svgContainer.append('rect')\n .attr('x', initX)\n .attr('y', initY)\n .attr('width', 50)\n .attr('height', 50)\n .attr('fill', 'blue');\n\n let sq2 = svgContainer.append('rect')\n .attr('x', sq2X)\n .attr('y', sq2Y)\n .attr('width', 50)\n .attr('height', 50)\n .attr('fill', 'green')\n \n function moved(event) {\n sq1.attr('x', +sq1.attr('x') + event.dx);\n sq1.attr('y', +sq1.attr('y') + event.dy);\n }\n\n sq1.call(d3.drag()\n .on(\"drag\", moved));\n \n return svgContainer.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":405,"value":"If you don't see what the bug is, try to move the blue circle and then change the sliders.","pinned":false,"hidden":false,"mode":"md"}],"files":"$W31","stdlib":"1","titling":"auto"}