27:null 28:["$","title",null,{"children":"Introducción 1 | VisualizacionDatosUtec | Observable"}] 2d:[] 2b:{"id":"68fe50428fd7a57a","slug":null,"title":"Introducción 1","thumbnail":"f7bbe2a7d2ab3cd9aeeaf0dc71007fd6ee6ddf17c6e32fb56581f110952875ff","access_level":"public","create_time":"$D2025-02-27T04:12:56.000Z","update_time":"$D2026-08-12T14:36:29.059Z","view_time":null,"first_public_time":"$D2025-02-27T04:12:56.000Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"a25d8d0a78fdd028","login":"visualizaciondatosutec","name":"VisualizacionDatosUtec","avatar_url":"https://avatars-next.observableusercontent.com/f35cdcac85154f00c7f618f657a419ec49ca2aff184905479764ed22c5506282","tier":"starter_2024"},"version":93,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"19a06346fb83f4ac","login":"germain-garcia-zanabria","name":"Germain Garcia Zanabria","avatar_url":"https://avatars-next.observableusercontent.com/4bfd83cda24c1a9cfee33cb6d13fc6c9e716a69cd26a5d3568688dc68d3b6d6f","tier":null}],"members":[{"type":"individual","id":"19a06346fb83f4ac","login":"germain-garcia-zanabria","name":"Germain Garcia Zanabria","avatar_url":"https://avatars-next.observableusercontent.com/4bfd83cda24c1a9cfee33cb6d13fc6c9e716a69cd26a5d3568688dc68d3b6d6f","tier":null,"role":"editor"},{"type":"team","id":"a25d8d0a78fdd028","login":"visualizaciondatosutec","name":"VisualizacionDatosUtec","avatar_url":"https://avatars-next.observableusercontent.com/f35cdcac85154f00c7f618f657a419ec49ca2aff184905479764ed22c5506282","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":null,"type":"notebook","body":{"title":"Introducción 1","cells":[{"id":0,"value":"# Introducción 1","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"## Observable \n\nObservable es un entorno de programación por celdas (similar a colab) diseñado para el desarrollo de visualizaciones. La primera parte del Curso de Visualización de Datos usaremos Observable, para algunos tutoriales y tareas. Es un excelente entorno para aprender a desarrollar visualizaciones para web. Ver la salida de cada celda facilitará la depuración y la construcción iterativa de las visualizaciones. \n\nUn archivo de Observable está compuesto por celdas. Principalmente celdas de JavaScript y celdas de Markdown. \n\nEn Observable, la salida de una celda aparece encima de su código.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":7,"value":"num*4; ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"Darle un nombre a una celda nos permite referenciar su valor en otros lugares.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":9,"value":"num = 5;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"num*3","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"Si queremos que una celda contenga múltiples declaraciones, debemos encerrarlas entre llaves { }","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":76,"value":"function(a,b){\n return a*b;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"newNum = {\n const a = 5;\n const b = 6;\n return a * b;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"newNum *3","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"También podemos colocar celdas de HTML","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":25,"value":"

This is HTML

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":27,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":33,"value":"Una característica distintiva de los Notebooks de Observable es la [reactividad](https://observablehq.com/@observablehq/learning-observable-reactive-dataflow). Cuando se ejecuta un cuaderno de Observable, sus celdas se ejecutan en orden topológico. Esto significa que cuando el valor de una celda cambia, todas las celdas que la referencian se actualizan automáticamente.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":29,"value":"b = a * 2","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"a = 5","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"viewof range = Inputs.range([0, 100], {label: \"Amount\", step: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":35,"value":"La reactividad puede ser interesante para controlar los elementos visuales. Aquí algunos ejemplos [views](https://observablehq.com/@observablehq/views?collection=@observablehq/notebook-fundamentals) y [inputs](https://observablehq.com/documentation/inputs/overview).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":38,"value":"viewof radius = Inputs.range([0, 100], {label: \"Radius\", step: 1})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"radius","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"viewof color = Inputs.color({label: \"Color\", value: \"#4682b4\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":44,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W2d","stdlib":"1","titling":"auto"}} 2c:"$2b:body"