30:T552,### Learning Observable Plot by relating to existing visualization packages - [for ggplot2 users](https://observablehq.com/@observablehq/plot-from-ggplot2) - [for matplotlib users](https://observablehq.com/@observablehq/plot-overview-for-matplotlib-users) ### Links to examples - [1 - my first Plot example](https://observablehq.com/@ee2dev/1-my-first-plot-example) - [2 - visualizing stock performance](https://observablehq.com/@ee2dev/2-visualizing-stock-performance) ### Examples from cool Observable notebooks - [Trellis display](https://observablehq.com/@observablehq/plot-barley-trellis) - [Autoplot matrix](https://observablehq.com/@observablehq/autoplot-matrix), see also - see https://youtu.be/myU1ZSjpRN0?t=4861 ### Local examples (just works with the corresponding local file) - [Example 3 - Kundendaten_Beispiel](https://observablehq.com/@ee2dev/3-template-for-exploring-an-excel-sheet-example-3) - [Example 4 - Kundendaten_Beispiel](https://observablehq.com/@ee2dev/4-template-for-exploring-an-excel-sheet-example-4) - [Example 5 - Kundendaten_Beispiel](https://observablehq.com/@ee2dev/5-template-for-exploring-an-excel-sheet-example-5) - [Example 6 - Kundendaten_Beispiel](https://observablehq.com/@ee2dev/6-template-for-exploring-an-excel-sheet-example-6) - [Example 7 - Kundenentwicklung](https://observablehq.com/@ee2dev/7-kundenentwicklung)31:[] 2e:{"title":"Observable Plot","cells":[{"id":0,"value":"# Observable Plot\n\n> **Observable Plot** is a free, open-source JavaScript library for visualizing data\n\n- Main objective: **accelerating exploratory data analysis**\n- A large variety of geometric shapes - _called_ **marks** - are provided and are composable\n- Many **data transformations** can be done within Plot\n- **Interactions** are provided by Plot or in conjunction with the reactivity of Observable notebooks\n- The resulting chart is (typically) an **SVG** (Scalable Vector Graphics)","pinned":false,"hidden":false,"mode":"md"},{"id":45,"value":"heading(`👉 References`, 1, h, \"blue\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":17,"value":"- [Learning Observable](https://observablehq.com/@observablehq/learning-observable-introduction)\n- [Great intro with follow along notebook, slides and videos](https://observablehq.com/@observablehq/plot-session-1-follow-along)\n- [Examples made with Plot](https://observablehq.com/@observablehq/plot-gallery)\n- [Plot Tutorial and getting started](https://observablehq.com/plot/)","pinned":false,"hidden":false,"mode":"md"},{"id":52,"value":"heading(\n ` 👉 All you need to know about javascript 😉`,\n 2,\n h,\n \"blue\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"### 1. Data types","pinned":false,"hidden":false,"mode":"md"},{"id":66,"value":"Inputs.table(dataTypes, {\n format: {\n Example: (d) => md`~~~js\n${d}\n~~~`\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"#### 1.1. Declaring an object","pinned":false,"hidden":false,"mode":"md"},{"id":72,"value":"myObject = {\n // Any object contains one or more key-value pairs\n // The key is separated from the value by a colon\n // In case of more key-values pairs, they are separated by commas\n let myFirstObject = {\n firstName: \"John\",\n lastName: \"Doe\",\n age: 30,\n adult: 30 >= 18,\n friends: [\"Peter\", \"Joe\", \"Anna\"]\n };\n return myFirstObject;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":89,"value":"#### 1.2. Accessing values of an object","pinned":false,"hidden":false,"mode":"md"},{"id":87,"value":"myObject.lastName","pinned":true,"hidden":false,"mode":"ojs"},{"id":94,"value":"myObject[\"age\"]","pinned":true,"hidden":false,"mode":"ojs"},{"id":97,"value":"\n

\n### 2. Functions","pinned":false,"hidden":false,"mode":"md"},{"id":101,"value":"#### 2.1. Declaring a function","pinned":false,"hidden":false,"mode":"md"},{"id":99,"value":"// Function that returns the product of a and b\nfunction multiply(a, b) {\n return a * b;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":107,"value":"// modern way of declaring a function with the arrow notation\nmultiplyToo = (a, b) => a * b","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"#### 2.2. Calling a function","pinned":false,"hidden":false,"mode":"md"},{"id":118,"value":"multiply(3, 4)","pinned":true,"hidden":false,"mode":"ojs"},{"id":120,"value":"multiplyToo(3, 4)","pinned":true,"hidden":false,"mode":"ojs"},{"id":128,"value":"
\n\nWant to learn🤓 more? \n➜ See [Learn Just Enough JavaScript: Introduction](https://observablehq.com/@observablehq/learn-javascript-introduction)","pinned":false,"hidden":false,"mode":"md"},{"id":215,"value":"heading(` 👉 Getting data into the notebook`, 3, h, \"blue\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"- [Introduction to data](https://observablehq.com/@observablehq/introduction-to-data)\n- [SQL cell](https://observablehq.com/@observablehq/sql-cell?collection=@observablehq/sql)\n- [Using local files without uploading](https://observablehq.com/@observablehq/input-file)\n\nTemplates for local files\n- [Template for loading a local csv file - German Formatting](https://observablehq.com/@ee2dev/template-for-exploring-a-german-data-set/2)\n- [Template for loading a local Excel file - German Formtting](https://observablehq.com/@ee2dev/template-for-exploring-an-excel-sheet)","pinned":false,"hidden":false,"mode":"md"},{"id":228,"value":"heading(` 👉 Transforming data`, 4, h, \"blue\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":231,"value":"- [Data wrangling with JavaScript, Python, SQL, R, and Excel](https://observablehq.com/@observablehq/data-wrangling-translations)","pinned":false,"hidden":false,"mode":"md"},{"id":124,"value":"heading(` 👉 Calling Observable Plot`, 5, h, \"blue\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":197,"value":"The general form of calling Plot looks like this:\n\n ```js\n Plot.plot({\n // general options, e.g.\n margin: 50,\n grid: true,\n \n // the marks option references an array of marks which are the geometric shapes composing the visualization, e.g.\n marks: [\n Plot.dot(yourData, {x: \"column1\", y: \"column2\"}),\n ] \n })\n ```\nThe columns (```column1``` and ```column2```) in the example above are just the names of your columns in your data set. Visual elements (like x and y in the example above) which you can refer to your data are called channels.\n\n- [Examples made with Plot](https://observablehq.com/@observablehq/plot-gallery)\n- [Plot Tutorial and getting started](https://observablehq.com/plot/)","pinned":false,"hidden":false,"mode":"md"},{"id":221,"value":"heading(\n ` 👉 Tips for a jump start and for fast explorations`,\n 6,\n h,\n \"blue\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":479,"value":"https://observablehq.com/@ee2dev/tips-for-a-jump-start-and-for-fast-explorations","pinned":false,"hidden":false,"mode":"md"},{"id":219,"value":"heading(` 👉 Examples with Observable Plot`, 7, h, \"blue\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":439,"value":"$30","pinned":false,"hidden":false,"mode":"md"},{"id":316,"value":"heading(` 👉 Summary`, 8, h, \"blue\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":323,"value":"### Powerful collection of visualization and exploration approaches \n- many state-of-the-art examples ready to be used\n- examples expanding every day\n\n### Reactive notebooks approach\n - exploring\n - understanding\n - debugging\n\n### Designed for fast and fun learning\n - different levels of abstraction (from code to special code cells ) \n - Code suggestion and documentation while typing\n - Chat GPT support\n \n### Collaboration features\n - sharing\n - importing\n - forking\n - liking\n - commenting\n - multi-player editing\n \n","pinned":false,"hidden":false,"mode":"md"},{"id":24,"value":"

\n### Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":20,"value":"import { textcolor } from \"@observablehq/text-color-annotations-in-markdown\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":30,"value":"import { heading } from \"@ee2dev/formatting-in-observable\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"import { dataTypes } from \"@observablehq/learn-javascript-introduction\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":47,"value":"h = 8","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"import { countries } from \"@ee2dev/plot-party\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}