30:Ta63,# Excel vs Observable Mapping Excel Operation to Observable ## Structure | Structure | Excel | Observable | | ----------- | ------------------- | -------------- | | Arrangement | 2D - Grid | 1D - Linear | | Execution | Reactive | Reactive | | Cell | Input -> Output | Only Output | | Input | Formula Bar | Cell | | Output | Cell | Above the Cell | | Reference | Index-based (A1:B2) | Variable Name | ## Features | Role | Excel/Sheets | JavaScript | Usage | | :------------- | --------------- | ------------------- | -------------------------------------- | | Basic DataType | Number Cell | number | Numeric Primitive Value | | Basic DataType | Text Cell | string | Text Primitive Value | | Basic DataType | Boolean Cell | boolean | Logical Primitive Value | | Basic DataType | DATE() | date | DateTime Primitive Value | | Complex DataType | Range of Cells | array | Ordered Value Collection | | Complex DataType | NA | object | Unordered Keyed Value Collection | | Complex DataType | NA | map | (Ordered) Keyed Value Collection | | Complex DataType | NA | set | Unique Value Collection (No Duplicates)| | Data Structure | 2D Range Cell | Array of Objects | 2D Rows & Columns | | Data Structure | NA | Objects of Objects | JSON | | BuiltInFunctions | Formula | Yes by Datatype | Abstract & Encapsulate | | UserFunctions | ?Extensions | function | Abstract & Encapsulate | | Variable | Named Range | let (or var) | Changing Variable Placeholder | | Constants | Cell Value | const | Unchanging Variable Placeholder | | Control Flow | IF() | if ... else | Conditional Branching | | Loops | Range of Cells | for & while | Looping over a Collection | | Get CSV | IMPORTDATA() | d3.csv() / arquero | Read CSV file from url | | Get JSON | IMPORTDATA() | fetch() / d3.json() | Read JSON file from url | | Get TABLE | IMPORTHTML() | DOM API | Read table in HTML file from url | 31:[] 2e:{"title":"Basics of JS","cells":[{"id":0,"value":"# Basics of JS","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":20,"value":"## Numbers","pinned":false,"hidden":false,"mode":"md"},{"id":10,"value":"x = 25","pinned":true,"hidden":false,"mode":"ojs"},{"id":13,"value":"y = x + 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"viewof r = Inputs.range([0, 100], { label: \"Amount\", step: 1 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"r","pinned":true,"hidden":false,"mode":"ojs"},{"id":34,"value":"z = r + 1","pinned":true,"hidden":false,"mode":"ojs"},{"id":39,"value":"## String","pinned":true,"hidden":false,"mode":"md"},{"id":42,"value":"s = \"hello\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":44,"value":"\"hello\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":46,"value":"multilinestring = `This is first line\nThis is second line`","pinned":true,"hidden":false,"mode":"ojs"},{"id":53,"value":"viewof name = Inputs.text({ label: \"Name\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":66,"value":"viewof status = Inputs.radio([\"Learning\", \"Not Learning\"], {\n label: \"Select one\",\n value: \"Learning\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":56,"value":"name","pinned":true,"hidden":false,"mode":"ojs"},{"id":62,"value":"status","pinned":true,"hidden":false,"mode":"ojs"},{"id":70,"value":"`This ${name} is ${status}`","pinned":true,"hidden":false,"mode":"ojs"},{"id":75,"value":"## Array []\n (Similiar to List in Python) ","pinned":true,"hidden":false,"mode":"md"},{"id":83,"value":"sizes[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":87,"value":"viewof sizeSelect = Inputs.range([0, 4], { label: \"Select a Size\", step: 1 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":93,"value":"sizeSelect","pinned":true,"hidden":false,"mode":"ojs"},{"id":95,"value":"selectedSize = sizes[sizeSelect]","pinned":true,"hidden":false,"mode":"ojs"},{"id":145,"value":"viewof circleColor = Inputs.color({ label: \"Favorite color\", value: \"#4682b4\" })","pinned":true,"hidden":false,"mode":"ojs"},{"id":115,"value":"svg`\n\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":162,"value":"sizes = [5, 55, 35, 77, 52]","pinned":true,"hidden":false,"mode":"ojs"},{"id":149,"value":"svg`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":165,"value":"## Function ()\n\n1. Long Form Function\n2. Short Function\n3. Anonymous\n","pinned":true,"hidden":false,"mode":"md"},{"id":186,"value":"function double(x) {\n return 2 * x;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":188,"value":"double(8)","pinned":true,"hidden":false,"mode":"ojs"},{"id":190,"value":"// Arrow Function\ndoubleShort = (x) => 2 * x","pinned":true,"hidden":false,"mode":"ojs"},{"id":192,"value":"//Anonymous Function\n(x) => 2 * x","pinned":true,"hidden":false,"mode":"ojs"},{"id":195,"value":"sizes","pinned":true,"hidden":false,"mode":"ojs"},{"id":197,"value":"sizes.map(double)","pinned":true,"hidden":false,"mode":"ojs"},{"id":201,"value":"sizes.map(function triple(x) {\n return 3 * x;\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":199,"value":"sizes.map((d) => d * 3)","pinned":true,"hidden":false,"mode":"ojs"},{"id":204,"value":"## Data Driven SVG","pinned":false,"hidden":false,"mode":"md"},{"id":206,"value":"function circle(radius) {\n return ` `;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":209,"value":"circle(5)","pinned":true,"hidden":false,"mode":"ojs"},{"id":211,"value":"svg`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":220,"value":"svg`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":214,"value":"sizes.map((d) => circle(d)).join(\"\\n\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":242,"value":"sizes.map((d) => d * 2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":247,"value":"sizes.join(\"\\n\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":250,"value":"sizes.map((d) => d * 2).join(\"\\n\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":253,"value":"function treeTrunks(ages) {\n return svg`\n`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":256,"value":"treeTrunks(sizes)","pinned":true,"hidden":false,"mode":"ojs"},{"id":258,"value":"## Object {}\n\nPython - Dictionary = Key Value pairs","pinned":true,"hidden":false,"mode":"md"},{"id":262,"value":"chartSize = ({ width: 400, height: 200 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":265,"value":"chartSize[\"width\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":268,"value":"chartSize.width","pinned":true,"hidden":false,"mode":"ojs"},{"id":270,"value":"function treeTrunkBetter(values, options) {\n const w = options.width;\n const h = options.height;\n return svg`\n`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":275,"value":"treeTrunkBetter(sizes, chartSize)","pinned":true,"hidden":false,"mode":"ojs"},{"id":281,"value":"treeTrunkBetter([3, 56, 78], { width: 600, height: 200 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":285,"value":"import { url } from \"@amitkaps/movie-gender-recreate\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":287,"value":"url","pinned":true,"hidden":false,"mode":"ojs"},{"id":289,"value":"d3.csv(url, d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":294,"value":"import { data2 } from \"@amitkaps/movie-gender-recreate\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":297,"value":"data2.objects()","pinned":true,"hidden":false,"mode":"ojs"},{"id":308,"value":"Plot.plot({\n width: 400,\n height: 200,\n marks: [Plot.frame()]\n})","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}