2f:Ta62,# 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 |30:Tdbc, 31:[{"id":"f5d3d151a071b8cb9c337da8bf6203b4e8adaf05779c771a7ca86fa0cddf9f6a2574ab470d1154a5b8e40a010444ba408b952d08041c96cfb1b3ad8617aca8cf","href":"https://static.observableusercontent.com/files/f5d3d151a071b8cb9c337da8bf6203b4e8adaf05779c771a7ca86fa0cddf9f6a2574ab470d1154a5b8e40a010444ba408b952d08041c96cfb1b3ad8617aca8cf","name":"card.png","type":"image/png","lastModified":1738228930463.249,"size":123651}] 2d:{"title":"Deeper in to Observable","cells":[{"id":0,"value":"# Deeper in to Observable\n*Including HTML, CSS, JS*","pinned":false,"hidden":false,"mode":"md"},{"id":5,"value":"$2f","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"## HTML using Markdown\n\nTopics to cover\n- Tags\n- Structure\n- Semantic\n\nWhere to I **learn** about all the _Tags_ -> [Learning resource @ MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)","pinned":false,"hidden":false,"mode":"md"},{"id":17,"value":"

HTML using HTML

Topics to cover

Tags
Structure - Tree Like with Nested Tags
Semantic- Meaning for each tag

\n
\n

Where do I Learn about all the Tags ->\n Learning resource @ MDN \n

","pinned":false,"hidden":false,"mode":"html"},{"id":47,"value":"## CSS & HTML\n\nUse the `\n\n

\n $\"Man$ \n

Phones

Phone Explorer

An interactive buying guide and explorer to get the best phone for you

\n Project\n Process\n

","pinned":true,"hidden":false,"mode":"html"},{"id":126,"value":"{\n // Declare the chart dimensions and margins.\n const width = 640;\n const height = 400;\n const marginTop = 20;\n const marginRight = 20;\n const marginBottom = 30;\n const marginLeft = 40;\n\n // Declare the x (horizontal position) scale.\n const x = d3\n .scaleUtc()\n .domain([new Date(\"2023-01-01\"), new Date(\"2024-01-01\")])\n .range([marginLeft, width - marginRight]);\n\n // Declare the y (vertical position) scale.\n const y = d3\n .scaleLinear()\n .domain([0, 100])\n .range([height - marginBottom, marginTop]);\n\n // Create the SVG container.\n const svg = d3.create(\"svg\").attr(\"width\", width).attr(\"height\", height);\n\n // Add the x-axis.\n svg\n .append(\"g\")\n .attr(\"transform\", `translate(0,${height - marginBottom})`)\n .call(d3.axisBottom(x));\n\n // Add the y-axis.\n svg\n .append(\"g\")\n .attr(\"transform\", `translate(${marginLeft},0)`)\n .call(d3.axisLeft(y));\n\n // Return the SVG element.\n return svg.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":128,"value":"# Javascript\n\n- Numbers: Flooating Point numbers\n- Strings: Set of Character with double qoutes or single quotes\n- Boolean\n- Arrays\n- Objects\n- Table / DataFrame","pinned":false,"hidden":false,"mode":"md"},{"id":133,"value":"// numbers\n6.45","pinned":true,"hidden":false,"mode":"ojs"},{"id":141,"value":"// string (text)\n\"hello\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":143,"value":"\"hello\".length","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"value":"// boolean\ntrue","pinned":true,"hidden":false,"mode":"ojs"},{"id":151,"value":"// date\nnew Date()","pinned":true,"hidden":false,"mode":"ojs"},{"id":157,"value":"## Array [,]","pinned":false,"hidden":false,"mode":"md"},{"id":154,"value":"// Array []\n[1, 2, 3]","pinned":true,"hidden":false,"mode":"ojs"},{"id":161,"value":"countries = [\"india\", \"srilanka\", \"nepal\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":177,"value":"// Access values of an array\ncountries[0]","pinned":true,"hidden":false,"mode":"ojs"},{"id":165,"value":"## Objects {:}","pinned":false,"hidden":false,"mode":"md"},{"id":168,"value":"details = ({\n country: \"india\",\n code: \"IND\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":173,"value":"details.country","pinned":true,"hidden":false,"mode":"ojs"},{"id":175,"value":"details[\"country\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":182,"value":"# Table\n\n1. Object of Arrays -> Column Equivalent\n2. Array of Objects -> Row Equivalent","pinned":true,"hidden":false,"mode":"md"},{"id":187,"value":"// Object of Arrays\nsample = ({\n areas: [\"north\", \"east\", \"west\", \"south\", \"central\"],\n sales: [5, 25, 15, 20, 10],\n profit: [2, 8, 6, 5, 3]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":191,"value":"// Array of Objects\nsample1 = [\n { areas: \"north\", sales: 5, profit: 2 },\n { areas: \"east\", sales: 25, profit: 8 },\n { areas: \"west\", sales: 15, profit: 6 },\n { areas: \"south\", sales: 20, profit: 5 },\n { areas: \"central\", sales: 10, profit: 3 }\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":195,"value":"dataCSV = `area,sales,profit\nnorth,5,2\neast,25,8\nwest,15,6\nsouth,20,5\ncentral,10,3`","pinned":true,"hidden":false,"mode":"ojs"},{"id":198,"value":"data = d3.csvParse(dataCSV, d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":205,"value":"data","pinned":true,"hidden":false,"mode":"ojs"},{"id":203,"value":"Plot.plot({\n marks: [\n Plot.barY(data, { x: \"area\", y: \"sales\", sort: { x: \"y\", reverse: true } })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":228,"value":"Plot.plot({\n height: 200,\n marks: [Plot.frame(), Plot.text([\"Hello, world!\"], { frameAnchor: \"middle\" })]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":208,"value":"## Function","pinned":true,"hidden":false,"mode":"md"},{"id":211,"value":"// Full form function\nfunction square(x) {\n return x * x;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":214,"value":"// Short form - arrow function\nsquare2 = (x) => x * x","pinned":true,"hidden":false,"mode":"ojs"},{"id":219,"value":"// Anonymous function\n(x) => x * x","pinned":true,"hidden":false,"mode":"ojs"},{"id":249,"value":"$30","pinned":false,"hidden":false,"mode":"html"},{"id":251,"value":"\n","pinned":true,"hidden":false,"mode":"html"},{"id":263,"value":"template = svg`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"id":259,"value":"viewof color = Inputs.color({ label: \"Favorite color\", value: \"#4682b4\" })","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}