2c:null 2d:["$","title",null,{"children":"Mapas del texto sobre el Perro de Roulin | juanFelipe | Observable"}] 32:T1219,altitudes = { // Crear el contenedor general con FLEXBOX usando `html` const container = html`

`; // Crear un div para el gráfico a la izquierda const chartContainer = html`

`; // Crear un div para la tarjeta a la derecha const infoContainer = html`

`; // Agregar los divs al contenedor general container.append(chartContainer, infoContainer); // Dimensiones del gráfico const width = 700; // Espacio para la gráfica const height = 500; const margin = { top: 40, right: 30, bottom: 50, left: 60 }; // Crear el SVG dentro del `chartContainer` const svg = d3.select(chartContainer).append("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]); // Crear escalas const xScale = d3.scaleBand() .domain(dataClima.map(d => d.Lugar)) .range([margin.left, width - margin.right - 50]) .padding(0.4); const yScale = d3.scaleLinear() .domain([0, d3.max(dataClima, d => d["Altitud (msnm)"])]) .nice() .range([height - margin.bottom, margin.top]); // Agregar ejes svg.append("g") .attr("transform", `translate(0,${height - margin.bottom})`) .call(d3.axisBottom(xScale)); svg.append("g") .attr("transform", `translate(${margin.left},0)`) .call(d3.axisLeft(yScale)); // SELECCIÓN DEL PUNTO POR DEFECTO const selectedPoint = dataClima[0]; // Seleccionamos el primer punto let selectedLugar = selectedPoint.Lugar; // Crear elementos dentro del `infoContainer` const imageElement = d3.select(infoContainer).append("img") .attr("width", "100%") .style("object-fit", "contain") .style("display", "none") .style("margin-bottom", "5px"); const textElement = d3.select(infoContainer).append("div") .style("font-size", "14px") .style("line-height", "1.4"); // 🔹 Función para actualizar la tarjeta con la información del punto seleccionado function updateCard(lugar) { const selectedData = dataClima.find(d => d.Lugar === lugar); if (!selectedData) return; const matchingImages = dataPerros.filter(p => p.lugar === lugar); const imageUrl = matchingImages.length > 0 ? matchingImages[0].url : null; const obra = matchingImages.length > 0 ? matchingImages[0].obras : "Sin imagen registrada"; const autor = matchingImages.length > 0 ? matchingImages[0].autor : ""; const fecha = matchingImages.length > 0 ? matchingImages[0].fecha : ""; const fuente = matchingImages.length > 0 ? matchingImages[0].fuente : ""; // Actualizar contenido de la tarjeta textElement.html(` ${selectedData.Lugar}
Altitud: ${selectedData["Altitud (msnm)"]} msnm
Clima: ${selectedData.Clima}

Obra: ${obra}
Autor: ${autor}
Fecha: ${fecha}
Fuente: ${fuente}
`); if (imageUrl) { imageElement.attr("src", imageUrl).style("display", "block"); } else { imageElement.style("display", "none"); } } // Inicializar la tarjeta con el primer punto updateCard(selectedLugar); // Puntos en la gráfica svg.selectAll("circle") .data(dataClima) .enter() .append("circle") .attr("cx", d => xScale(d.Lugar) + xScale.bandwidth() / 2) .attr("cy", d => yScale(d["Altitud (msnm)"])) .attr("r", 6) .attr("fill", d => (d.Lugar === selectedLugar ? "orange" : "steelblue")) // Resalta el seleccionado .style("cursor", "pointer") .on("mouseover", function(event, d) { d3.select(this).transition().duration(200).attr("r", 8); }) .on("mouseout", function(event, d) { d3.select(this).transition().duration(200).attr("r", 6); }) .on("click", function(event, d) { console.log(`🟢 Click en: ${d.Lugar}`); // Debug en Observable // Actualizar el punto seleccionado selectedLugar = d.Lugar; updateCard(selectedLugar); // Actualizar colores de los puntos svg.selectAll("circle") .attr("fill", p => (p.Lugar === selectedLugar ? "orange" : "steelblue")); }); return container; } 33:[] 30:{"id":"6ca45e8ac125c7ec","slug":null,"title":"Mapas del texto sobre el Perro de Roulin","thumbnail":"d3f604678d57f2c937765dc6d5eb3c6d6291006e3793043df4722397457508af","access_level":"public","create_time":"$D2025-02-27T19:27:52.021Z","update_time":"$D2025-02-28T01:21:42.889Z","view_time":null,"first_public_time":"$D2025-02-28T01:09:10.490Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"b08d810ce7971cef","login":"juanfuc","name":"juanFelipe","avatar_url":"https://avatars-next.observableusercontent.com/037dd09add2cbc71786979cc31dd87cb23bfa363a7e7e4d2e86d11909d7b6be7","tier":"starter_2024"},"version":66,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"787cd2505170a6b7","login":"juanfuc","name":"juanFelipe","avatar_url":"https://avatars-next.observableusercontent.com/037dd09add2cbc71786979cc31dd87cb23bfa363a7e7e4d2e86d11909d7b6be7","tier":null}],"members":[{"type":"individual","id":"787cd2505170a6b7","login":"juanfuc","name":"juanFelipe","avatar_url":"https://avatars-next.observableusercontent.com/037dd09add2cbc71786979cc31dd87cb23bfa363a7e7e4d2e86d11909d7b6be7","tier":null,"role":"editor"},{"type":"team","id":"b08d810ce7971cef","login":"juanfuc","name":"juanFelipe","avatar_url":"https://avatars-next.observableusercontent.com/037dd09add2cbc71786979cc31dd87cb23bfa363a7e7e4d2e86d11909d7b6be7","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Mapas del texto sobre el Perro de Roulin","cells":[{"id":54,"value":"titulo = html`\n\n\n

\n ${md`# Mapas del texto sobre el Perro de Roulin`}\n

\n`\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"pathClima = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vSLlPx4wNTSYqqWO_bHzl_m1sGfLo4jJuAwx5F7OwWHsxRjJzvyUL1RFcIAv4eApAHA3J7DAueaK_uw/pub?output=csv\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"pathPerros = \"https://docs.google.com/spreadsheets/d/e/2PACX-1vRVBt_mVyXz3-Sfv1vzmST12wq27NK90CoJAYf3nC4Rcr50U4jDcqqrkHo4crkpYwou04WSIlzKMvJw/pub?output=csv\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"imgUrl = \"https://lh3.googleusercontent.com/d/\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"csvString = fetch(pathClima).then((response) => response.text())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"csvPerros = fetch(pathPerros).then((response) => response.text())","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"dataClima = d3.csvParse(csvString, d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"dataPerros = d3.csvParse(csvPerros, d3.autoType).map(e => ({...e, url: imgUrl + e.id, otros: e.otros === \"False\" ? false : e.otros == \"True\" ? true : e.otros}))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 31:"$30:body"