25:["$","title",null,{"children":"Iniciación a Observable | Miguel | Observable"}] 49:T45e,grafico2 = { const ancho = 300; const alto = 200; // Crear un contenedor para el SVG y centrarlo horizontalmente const container = d3.create("div") .style("position", "relative") // Necesario para posicionar el tooltip correctamente .style("display", "flex") .style("justify-content", "center") .style("width", "100%"); // Crear el SVG dentro del contenedor const svg = container.append("svg") .attr("width", ancho) .attr("height", alto); // Esperar a que los datos se hayan cargado completamente const datos = await datos_csv; // Crear las barras usando los datos cargados svg.selectAll("rect") .data(datos) // Vinculamos los datos cargados .join("rect") .attr("x", (d, i) => i * 60) // Posición horizontal de cada barra .attr("y", d => alto - d * 3) // Posición vertical de cada barra .attr("width", 50) // Ancho de cada barra .attr("height", d => d * 3) // Altura proporcional al valor de los datos .attr("fill", "#01f3b3") // Color de cada barra return container.node(); }4a:[] 29:{"id":"ee2b92e54d9f4e3c","slug":null,"title":"Iniciación a Observable","thumbnail":"cfb3774af7b03f415ce906171968688cf2d58484fcab85eba4999aae9caea6dd","access_level":"public","create_time":"$D2024-10-27T19:35:01.025Z","update_time":"$D2024-10-27T23:12:14.520Z","view_time":null,"first_public_time":"$D2024-10-27T22:39:56.931Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"6978fd71330dd0cf","login":"miguel5","name":"Miguel","avatar_url":"https://avatars-next.observableusercontent.com/beab34935d62a73637bb2ec8fad16f597a96dcde3a96dacd2c539d4daff507d2","tier":"starter_2024","bio":"","following":false},"version":274,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"51759b36b29e346e","login":"miguel-ros","name":"Miguel Ros","avatar_url":"https://avatars-next.observableusercontent.com/178c87465d6f1a93517863ad6dd17bbd4bce068e8e5a6ac84acd7033669cd22c","tier":null,"bio":"","following":false}],"members":[{"type":"team","id":"6978fd71330dd0cf","login":"miguel5","name":"Miguel","avatar_url":"https://avatars-next.observableusercontent.com/beab34935d62a73637bb2ec8fad16f597a96dcde3a96dacd2c539d4daff507d2","tier":"starter_2024","role":"editor"},{"type":"individual","id":"51759b36b29e346e","login":"miguel-ros","name":"Miguel Ros","avatar_url":"https://avatars-next.observableusercontent.com/178c87465d6f1a93517863ad6dd17bbd4bce068e8e5a6ac84acd7033669cd22c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Iniciación a Observable","cells":[{"id":0,"value":"titulo = md`# Iniciación a Observable\nObservable tiene celdas reactivas. Esto signfica que cuando una celda cambia también lo haces otras.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":91,"value":"html`\n

Principales comandos

\nmd: celdas en formato markdown.
\nviewof: crear elementos interactivos.
\nconst: definir variables que van a permanecer constantes.
\nlet: definir variables que, al contrario que con const, sí pueden cambiar de valor.
\nUso de tildes invertidas (o como se llamen): para usar diferentes lenguajes en un bloque de JS. Por ejemplo este bloque de texto lo estoy haciendo con HTML y el anterior fue con un formato markdown, pero en el contexto de un bloque de JS.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":116,"value":"md`## Librería D3js`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"// Podemos cargar esta librería con este comando.\nd3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"datos = [20, 15, 30, 45, 60]","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"grafico = {\n const ancho = 300;\n const alto = 200;\n\n // Creamos un contenedor para el SVG\n const container = d3.create(\"div\")\n .style(\"display\", \"flex\")\n .style(\"justify-content\", \"center\")\n .style(\"width\", \"100%\");\n \n // Añadimos contenido\n const svg = container.append(\"svg\")\n .attr(\"width\", ancho)\n .attr(\"height\", alto);\n\n // Crear las barras usando los datos\n svg.selectAll(\"rect\")\n .data(datos)\n .join(\"rect\")\n .attr(\"x\", (d, i) => i * 60) // Posición horizontal de cada barra\n .attr(\"y\", d => alto - d * 3) // Posición vertical de cada barra\n .attr(\"width\", 50) // Ancho de cada barra\n .attr(\"height\", d => d * 3) // Altura proporcional al valor de los datos\n .attr(\"fill\", \"#01f3b3\"); // Color de cada barra\n\n return container.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"md`## Sincronizar un excel\nHay que definir una url de Google Sheet que esté publicada en CSV`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"url = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vTNqcsu60YVIDXAK4LZYKGWx1fPvfTnr5asRC5QknpWuOFDibfOk5tG9PYR3sDKdGWe6zJZoWEzB16H/pub?output=csv\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"datos_csv = d3.csv(url).then(data =>\n data.map(d => +d.Datos)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":248,"value":"\n const tooltip = container.append(\"div\")\n .style(\"position\", \"absolute\")\n .style(\"background-color\", \"#333\")\n .style(\"color\", \"white\")\n .style(\"padding\", \"5px 10px\")\n .style(\"border-radius\", \"4px\")\n .style(\"pointer-events\", \"none\")\n .style(\"opacity\", 0); \n\n\n .on(\"mouseover\", function(event, d) {\n tooltip.style(\"opacity\", 1)\n .text(`Valor: ${d}`);\n })\n .on(\"mousemove\", function(event) {\n tooltip.style(\"left\", (event.pageX - container.node().getBoundingClientRect().left + 10) + \"px\")\n .style(\"top\", (event.pageY - container.node().getBoundingClientRect().top - 20) + \"px\");\n })\n .on(\"mouseout\", function() {\n tooltip.style(\"opacity\", 0);\n });\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":255,"value":"md`## Cosas guays que podemos hacer como un slider de datos\nUsando viewof. Luego esto lo podríamos vincular con mapa o algo para filtrar`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"viewof slider = Inputs.range([d3.min(datos), d3.max(datos)], {label: \"Valores\", step:0.5})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null