25:["$","title",null,{"children":"Iniciación a Observable | Newtral Data | Observable"}] 49:T765,grafico2 = { const ancho = 300; const alto = 200; const tooltip = container.append("div") .style("position", "absolute") .style("background-color", "#333") .style("color", "white") .style("padding", "5px 10px") .style("border-radius", "4px") .style("pointer-events", "none") .style("opacity", 0); // 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) .attr("font-family", "Helvetica"); // 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") .on("mouseover", function(event, d) { tooltip.style("opacity", 1) .text(`Valor: ${d}`); }) .on("mousemove", function(event) { tooltip.style("left", (event.pageX - container.node().getBoundingClientRect().left + 10) + "px") .style("top", (event.pageY - container.node().getBoundingClientRect().top - 20) + "px"); }) .on("mouseout", function() { tooltip.style("opacity", 0); });// Color de cada barra return container.node(); }4a:[] 29:{"id":"b720224952a3972b","slug":null,"title":"Iniciación a Observable","thumbnail":"cfb3774af7b03f415ce906171968688cf2d58484fcab85eba4999aae9caea6dd","access_level":"public","create_time":"$D2024-10-28T15:23:14.270Z","update_time":"$D2024-10-28T16:09:44.541Z","view_time":null,"first_public_time":"$D2024-10-28T15:23:14.270Z","has_unpublished_edits":null,"fork":{"id":"ee2b92e54d9f4e3c","slug":null,"title":"Iniciación a Observable","owner":{"id":"6978fd71330dd0cf","login":"miguel5","name":"Miguel"}},"stars":0,"starred":false,"owner":{"type":"team","id":"6721f19fe640557e","login":"newtral-datos","name":"Newtral Data","avatar_url":"https://avatars-next.observableusercontent.com/ff6ff00f51721a8025f0514b4e310cc0f80a1f58417bdffd6aa86bd2c3bcd948","tier":"starter_2024","bio":"Somos el equipo de datos de Newtral. Nos dedicamos a analizar y convertir datos en historias periodísticas, utilizando IA y programación.","following":false},"version":278,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"dcf36f2cf3d68944","login":"newtral-datos","name":"Newtral Data","avatar_url":"https://avatars-next.observableusercontent.com/ff6ff00f51721a8025f0514b4e310cc0f80a1f58417bdffd6aa86bd2c3bcd948","tier":null,"bio":"Somos el equipo de datos de Newtral. Nos dedicamos a analizar y convertir datos en historias periodísticas, utilizando IA y programación.","following":false}],"members":[{"type":"team","id":"6721f19fe640557e","login":"newtral-datos","name":"Newtral Data","avatar_url":"https://avatars-next.observableusercontent.com/ff6ff00f51721a8025f0514b4e310cc0f80a1f58417bdffd6aa86bd2c3bcd948","tier":"starter_2024","role":"editor"},{"type":"individual","id":"dcf36f2cf3d68944","login":"newtral-datos","name":"Newtral Data","avatar_url":"https://avatars-next.observableusercontent.com/ff6ff00f51721a8025f0514b4e310cc0f80a1f58417bdffd6aa86bd2c3bcd948","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"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