2e:null 2f:["$","title",null,{"children":"Laboratorio de cartografía digital experimental | Sergio Rodríguez Gómez | Observable"}] 34:T93b,### La base de datos Antes de dibujar un mapa, necesitamos abstraer el espacio en una estructura de información. La tabla de abajo es nuestro punto de partida. En ella registramos los lugares que queremos representar y les asignamos atributos: un nombre, una descripción cualitativa, una categoría que nos servirá más adelante para prender o apagar capas, y una variable creativa (en este caso, «intensidad afectiva») que usaremos para alterar el aspecto visual de nuestro mapa. La clave de esta tabla está en dos columnas numéricas: la latitud y la longitud. Ambas coordenadas componen el sistema que usamos para ubicar un punto exacto sobre la superficie de la Tierra. La latitud indica qué tan al norte o al sur estamos de la línea del ecuador, mientras que la longitud marca la distancia hacia el este o el oeste del meridiano de Greenwich. En otros contextos es posible encontrar coordenadas escritas en grados, minutos y segundos (por ejemplo, 4° 38' 45" N, 74° 4' 39" W). Ese formato es una herencia histórica de la navegación y la astronomía. Sin embargo, en la cartografía digital y la programación usamos **grados decimales** (como 4.6458, -74.0775). Para que el computador pueda calcular distancias o dibujar geometrías en una pantalla, necesita traducir la esfera terrestre a un plano cartesiano continuo (ejes X y Y). Los números decimales permiten que las librerías gráficas hagan esas operaciones matemáticas de forma directa, sin tener que convertir sistemas de base sesenta a base diez en cada paso. **Cómo agregar tus propios lugares** Esta tabla es completamente editable. Puedes cambiar los textos, modificar los valores o agregar filas nuevas para los puntos que estás investigando. Para encontrar las coordenadas precisas de un espacio: 1. Abre Google Maps. 2. Encuentra el lugar que te interesa y haz clic derecho directamente sobre el punto en el mapa. 3. La primera opción que aparece en el menú desplegable son los dos números decimales. Haz clic sobre ellos para copiarlos. 4. Vuelve a esta tabla, crea una fila nueva y pega el primer número en la columna de latitud y el segundo en la de longitud. Ten cuidado de no omitir el signo negativo (-) en la longitud. Ese signo nos ubica en el hemisferio occidental; si desaparece, el punto terminará proyectado en el océano Índico en lugar de Bogotá.35:Te8c,mapaLeaflet = { // 1. Crear el contenedor del mapa // EXPERIMENTA: Puedes cambiar el 'height' para hacer el mapa más alto const contenedor = DOM.element('div', { style: `width: 100%; height: 500px; border-radius: 8px;` }); yield contenedor; // 2. Inicializar Leaflet const mapa = L.map(contenedor, { center: [4.636, -74.077], // Coordenadas centrales zoom: 13 // EXPERIMENTA: Cambia este número para alejar (ej. 11) o acercar (ej. 16) el mapa }); // 3. Elegir la estética del mapa (Tileset) // CAMBIA EL FONDO: Borra las dos barras (//) al inicio de la opción que quieras usar, // y pónselas a las otras dos opciones para desactivarlas. // Opción A: Mapa claro y minimalista // const urlTileset = 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png'; // Opción B: Mapa oscuro // const urlTileset = 'https://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}@2x.png'; // Opción C: Satélite // const urlTileset = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'; // Opción D: Pergamino // const urlTileset = 'https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png'; // Opción E: const urlTileset = 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png'; L.tileLayer(urlTileset).addTo(mapa); // 4. Preparar el lienzo transparente sobre el mapa L.svg({clickable: true}).addTo(mapa); const overlay = d3.select(mapa.getPanes().overlayPane); const miLienzo = overlay.select('svg').attr("pointer-events", "auto"); // Función matemática para traducir coordenadas a pixeles en pantalla const xy = (lat, lon) => mapa.latLngToLayerPoint([lat, lon]); // 5. Dibujar los puntos // ATENCIÓN: Usamos "datosFiltrados" para que el mapa responda a los checkboxes const circulos = miLienzo.selectAll('circle') .data(datosFiltrados) .join('circle') .attr('cx', d => xy(d.latitud, d.longitud).x) .attr('cy', d => xy(d.latitud, d.longitud).y) // EXPERIMENTA: Modificamos el radio según la variable de intensidad .attr('r', d => (mapa.getZoom() * 0.4) + (d[variableCreativa] || 0)) // EXPERIMENTA CON COLORES: Usa nombres en inglés (red, blue) o códigos HEX (#ff5733) .attr('fill', "crimson") .attr('fill-opacity', 0.8) .attr('stroke', 'white') .attr('stroke-width', 2) // 6. Interactividad con el ratón .on('mouseover', function(e, d) { const miCirculo = d3.select(this); miCirculo.style('cursor', 'pointer') .transition() .duration(150) .attr('r', 20) .attr("fill", "gold"); miLienzo.append('text') .attr('class', 'etiqueta-temporal') .text(d.nombre) .attr('x', xy(d.latitud, d.longitud).x) .attr('y', xy(d.latitud, d.longitud).y - 25) .attr('text-anchor', 'middle') .attr('font-family', 'sans-serif') .attr('font-weight', 'bold') .style('text-shadow', '2px 2px 3px white, -2px -2px 3px white'); }) .on('mouseout', function(e, d) { const miCirculo = d3.select(this); miCirculo.transition() .duration(150) .attr('r', d => (mapa.getZoom() * 0.4) + d.intensidad_afectiva) .attr("fill", "crimson"); miLienzo.selectAll('.etiqueta-temporal').remove(); }); // 7. Actualizar posiciones al hacer zoom function actualizarCirculos() { circulos .attr('cx', d => xy(d.latitud, d.longitud).x) .attr('cy', d => xy(d.latitud, d.longitud).y) .attr('r', d => (mapa.getZoom() * 0.4) + d.intensidad_afectiva); } mapa.on("zoom", actualizarCirculos); }36:T422,localidadesEnriquecidas = ({ type: "FeatureCollection", features: poligonosLocalidades.features.map(localidad => { const contienePlano = (feature, punto) => { if (!feature.geometry) return false; const coords = feature.geometry.coordinates; if (feature.geometry.type === "Polygon") return d3.polygonContains(coords[0], punto); if (feature.geometry.type === "MultiPolygon") return coords.some(pol => d3.polygonContains(pol[0], punto)); return false; }; const puntosAqui = datosFiltrados.filter(d => d.longitud && d.latitud ? contienePlano(localidad, [d.longitud, d.latitud]) : false ); // ATENCIÓN AQUÍ: Usamos corchetes para leer dinámicamente la columna seleccionada const sumaVariable = d3.sum(puntosAqui, d => d[variableCreativa] || 0); return { ...localidad, properties: { ...localidad.properties, cantidadPuntos: puntosAqui.length, sumaVariable: sumaVariable // Asignamos el resultado a un nombre genérico } }; }) })37:Tc7c,mapaVectorial = { const width = 800; const height = 600; // Usamos geoIdentity porque el GeoJSON ya viene proyectado en un plano const proyeccion = d3.geoIdentity().reflectY(true).fitSize([width, height], localidadesEnriquecidas); const generadorCaminos = d3.geoPath().projection(proyeccion); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .style("background", "#ffffff"); // Este grupo "g" contendrá todo lo que se puede acercar o alejar (zoom) const g = svg.append("g"); // 1. Dibujar las localidades const caminos = g.selectAll("path") .data(localidadesEnriquecidas.features) .join("path") .attr("d", generadorCaminos) .attr("fill", "#649cf5") .attr("stroke", "#ffffff") .attr("stroke-width", 1.5); // Función para calcular el tamaño del círculo según la intensidad const radioBase = d => 3 + (d.intensidad_afectiva || 0) * 0.5; // 2. Dibujar los puntos y agregar interactividad const circulos = g.selectAll("circle") .data(datosFiltrados) .join("circle") .attr("cx", d => proyeccion([d.longitud, d.latitud])[0]) .attr("cy", d => proyeccion([d.longitud, d.latitud])[1]) .attr("r", radioBase) .attr("fill", "crimson") .attr("stroke", "white") .attr("stroke-width", 1) // Interactividad: Mouse encima .on('mouseover', function(e, d) { const circuloActual = d3.select(this); // Obtenemos el nivel de zoom actual para escalar el efecto const transform = d3.zoomTransform(svg.node()); circuloActual .style("cursor", "pointer") .transition().duration(150) .attr("fill", "gold") .attr("r", 15 / transform.k); // Crece, pero respetando la escala del zoom g.append('text') .attr('class', 'etiqueta-temporal') .text(d.nombre) .attr('x', proyeccion([d.longitud, d.latitud])[0]) .attr('y', proyeccion([d.longitud, d.latitud])[1] - (20 / transform.k)) .attr('text-anchor', 'middle') .attr('font-family', 'sans-serif') .attr('font-weight', 'bold') // Mantenemos el tamaño de la letra legible sin importar el zoom .attr('font-size', 14 / transform.k) .style('text-shadow', '2px 2px 3px white, -2px -2px 3px white'); }) // Interactividad: Mouse afuera .on('mouseout', function(e, d) { const transform = d3.zoomTransform(svg.node()); d3.select(this) .transition().duration(150) .attr("fill", "crimson") // Regresa a su tamaño original basado en la intensidad y el zoom .attr("r", radioBase(d) / transform.k); g.selectAll('.etiqueta-temporal').remove(); }); // 3. Sistema de Zoom const zoom = d3.zoom() .scaleExtent([1, 15]) .on("zoom", (e) => { g.attr("transform", e.transform); // Evitamos que las líneas y los puntos se engruesen al hacer zoom caminos.attr("stroke-width", 1.5 / e.transform.k); circulos.attr("r", d => radioBase(d) / e.transform.k) .attr("stroke-width", 1 / e.transform.k); }); svg.call(zoom); return svg.node(); }38:T4b0,### Mapas coropléticos y abstracción geométrica Un mapa coroplético tradicional colorea áreas geográficas (como localidades, barrios o países) en función de una variable estadística. Sin embargo, amarrar nuestros datos exclusivamente a las divisiones político-administrativas puede generar sesgos visuales: una localidad muy grande podría dominar el mapa visualmente, aunque la intensidad de nuestro fenómeno esté concentrada en una sola de sus esquinas. Para experimentar con esto, recurrimos a una técnica llamada muestreo espacial continuo. En lugar de usar los polígonos irregulares de las localidades, superponemos una cuadrícula geométrica regular (de hexágonos o cuadrados) sobre la silueta de la ciudad. Luego, el código calcula cuánta intensidad afectiva o cuántos puntos caen dentro de cada pequeña celda. El resultado es una superficie que revela la densidad de los datos sin depender de fronteras oficiales, creando una estética abstracta similar a un mosaico o al pixel art. Al observar estos mapas, las jerarquías impuestas por la administración de la ciudad desaparecen, revelando topologías alternativas basadas en la experiencia cualitativa del espacio.39:Te6c,mapaHexagonal = { const width = 800; const height = 600; const r = 8; const propiedadAVisualizar = "sumaVariable"; const proyeccion = d3.geoIdentity().reflectY(true).fitSize([width, height], localidadesEnriquecidas); const dx = Math.sqrt(3) * r; const dy = 1.5 * r; const cols = Math.ceil(width / dx) + 2; const rows = Math.ceil(height / dy) + 2; function hexPolygonPath(radio) { const pts = []; for (let i = 0; i < 6; i++) { const a = (Math.PI / 180) * (60 * i - 30); pts.push([radio * Math.cos(a), radio * Math.sin(a)]); } return pts.map((p, i) => (i === 0 ? `M ${p[0]} ${p[1]}` : `L ${p[0]} ${p[1]}`)).join(" ") + " Z"; } const hexPathRel = hexPolygonPath(r); const contienePlano = (feature, punto) => { if (!feature.geometry) return false; const coords = feature.geometry.coordinates; if (feature.geometry.type === "Polygon") return d3.polygonContains(coords[0], punto); if (feature.geometry.type === "MultiPolygon") return coords.some(pol => d3.polygonContains(pol[0], punto)); return false; }; const celdas = []; for (let row = -1; row <= rows; row++) { for (let col = -1; col <= cols; col++) { const cx = col * dx + (row % 2 ? dx / 2 : 0); const cy = row * dy; if (cx < -dx || cx > width + dx || cy < -dy || cy > height + dy) continue; const coordenadaOriginal = proyeccion.invert([cx, cy]); if (!coordenadaOriginal) continue; const localidad = localidadesEnriquecidas.features.find(f => contienePlano(f, coordenadaOriginal)); if (localidad) { const valor = +localidad.properties[propiedadAVisualizar] || 0; celdas.push({ x: cx, y: cy, localidad, valor }); } } } const valorMaximo = d3.max(celdas, c => c.valor) || 1; const colores = ["#777DA7", "#D5573B"]; const escalaColor = d3.scaleLinear() .domain([0, valorMaximo]) .range(colores); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .style("background", "#ffffff"); const g = svg.append("g"); g.selectAll("path") .data(celdas) .join("path") .attr("d", hexPathRel) .attr("transform", d => `translate(${d.x},${d.y})`) .attr("fill", d => escalaColor(d.valor)) .attr("stroke", d => escalaColor(d.valor)) .attr("stroke-width", 0.5) .append("title") .text(d => `${d.localidad.properties["Nombre de la localidad"]}: ${d.valor}`); // CONSTRUCCION DE LA LEYENDA (Esquina inferior derecha) const defs = svg.append("defs"); const gradiente = defs.append("linearGradient") .attr("id", "gradiente-hex"); gradiente.append("stop").attr("offset", "0%").attr("stop-color", colores[0]); gradiente.append("stop").attr("offset", "100%").attr("stop-color", colores[1]); const leyenda = svg.append("g") .attr("transform", `translate(${width - 180}, ${height - 60})`); leyenda.append("text") .attr("x", 0) .attr("y", -10) .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("fill", "#333333") .text(`Suma de: ${variableCreativa}`); // Aquí usamos el nombre del dropdown leyenda.append("rect") .attr("width", 150) .attr("height", 12) .style("fill", "url(#gradiente-hex)"); leyenda.append("text") .attr("x", 0) .attr("y", 25) .attr("font-family", "sans-serif") .attr("font-size", 11) .attr("fill", "#666666") .text("0"); leyenda.append("text") .attr("x", 150) .attr("y", 25) .attr("text-anchor", "end") .attr("font-family", "sans-serif") .attr("font-size", 11) .attr("fill", "#666666") .text(valorMaximo); return svg.node(); }3a:Td0c,mapaCuadrados = { const width = 800; const height = 600; const lado = 12; const propiedadAVisualizar = "cantidadPuntos"; const proyeccion = d3.geoIdentity().reflectY(true).fitSize([width, height], localidadesEnriquecidas); const contienePlano = (feature, punto) => { if (!feature.geometry) return false; const coords = feature.geometry.coordinates; if (feature.geometry.type === "Polygon") return d3.polygonContains(coords[0], punto); if (feature.geometry.type === "MultiPolygon") return coords.some(pol => d3.polygonContains(pol[0], punto)); return false; }; const dx = lado; const dy = lado; const cols = Math.ceil(width / dx) + 2; const rows = Math.ceil(height / dy) + 2; const celdas = []; for (let row = -1; row <= rows; row++) { for (let col = -1; col <= cols; col++) { const cx = col * dx + dx / 2; const cy = row * dy + dy / 2; if (cx < -dx || cx > width + dx || cy < -dy || cy > height + dy) continue; const coordenadaOriginal = proyeccion.invert([cx, cy]); if (!coordenadaOriginal) continue; const localidad = localidadesEnriquecidas.features.find(f => contienePlano(f, coordenadaOriginal)); if (localidad) { const valor = +localidad.properties[propiedadAVisualizar] || 0; celdas.push({ x: cx, y: cy, localidad, valor }); } } } const valorMaximo = d3.max(celdas, c => c.valor) || 1; const colores = ["#777DA7", "#D5573B"]; const escalaColor = d3.scaleLinear() .domain([0, valorMaximo]) .range(colores); const svg = d3.create("svg") .attr("width", width) .attr("height", height) .style("background", "#ffffff"); const g = svg.append("g"); g.selectAll("rect") .data(celdas) .join("rect") .attr("x", d => d.x - lado / 2) .attr("y", d => d.y - lado / 2) .attr("width", lado) .attr("height", lado) .attr("fill", d => escalaColor(d.valor)) .attr("stroke", d => escalaColor(d.valor)) .attr("stroke-width", 0.5) .append("title") .text(d => `${d.localidad.properties["Nombre de la localidad"]}: ${d.valor}`); // CONSTRUCCION DE LA LEYENDA (Esquina inferior derecha) const defs = svg.append("defs"); const gradiente = defs.append("linearGradient") .attr("id", "gradiente-cuadrado"); gradiente.append("stop").attr("offset", "0%").attr("stop-color", colores[0]); gradiente.append("stop").attr("offset", "100%").attr("stop-color", colores[1]); const leyenda = svg.append("g") .attr("transform", `translate(${width - 180}, ${height - 60})`); leyenda.append("text") .attr("x", 0) .attr("y", -10) .attr("font-family", "sans-serif") .attr("font-size", 12) .attr("fill", "#333333") .text(`Variable: ${propiedadAVisualizar}`); leyenda.append("rect") .attr("width", 150) .attr("height", 12) .style("fill", "url(#gradiente-cuadrado)"); leyenda.append("text") .attr("x", 0) .attr("y", 25) .attr("font-family", "sans-serif") .attr("font-size", 11) .attr("fill", "#666666") .text("0"); leyenda.append("text") .attr("x", 150) .attr("y", 25) .attr("text-anchor", "end") .attr("font-family", "sans-serif") .attr("font-size", 11) .attr("fill", "#666666") .text(valorMaximo); return svg.node(); }3b:T1176,mapaFantasia = { // 1. Contenedor del mapa const contenedor = DOM.element('div', { style: `width: 100%; height: 600px; border-radius: 8px; background: #2a2a2a;` }); // Rendimos el contenedor primero para que Leaflet tenga dónde anclarse yield contenedor; const urlImagen = imagenMapaFantasia; // 2. Cargar la imagen en memoria para leer su tamaño real automáticamente const dimensiones = await new Promise((resolve) => { const img = new Image(); img.onload = () => resolve({ ancho: img.naturalWidth, alto: img.naturalHeight }); img.src = urlImagen; }); const ancho = dimensiones.ancho; const alto = dimensiones.alto; const limites = [[0, 0], [alto, ancho]]; // 3. Inicializar el mapa const mapa = L.map(contenedor, { crs: L.CRS.Simple, minZoom: -4 // Permitimos alejar más la cámara por si suben fotos de muy alta resolución }); L.imageOverlay(urlImagen, limites).addTo(mapa); mapa.fitBounds(limites); // 4. Herramienta recolectora de coordenadas const popup = L.popup(); mapa.on('click', function(e) { popup .setLatLng(e.latlng) .setContent(`Anota en tu tabla:
Y_ficticio: ${Math.round(e.latlng.lat)}
X_ficticio: ${Math.round(e.latlng.lng)}`) .openOn(mapa); }); // 5. Configurar la capa vectorial de D3 L.svg({clickable: true}).addTo(mapa); const overlay = d3.select(mapa.getPanes().overlayPane); const miLienzo = overlay.select('svg').attr("pointer-events", "auto"); const xy = (y, x) => mapa.latLngToLayerPoint([y, x]); // 6. Dibujar los puntos y agregar interactividad const circulos = miLienzo.selectAll('circle') .data(datosFiltrados.filter(d => d.y_ficticio != null && d.x_ficticio != null)) .join('circle') .attr('cx', d => xy(d.y_ficticio, d.x_ficticio).x) .attr('cy', d => xy(d.y_ficticio, d.x_ficticio).y) .attr('r', d => (mapa.getZoom() > 0 ? mapa.getZoom() * 4 : 4) + (d[variableCreativa] || 0)) .attr('fill', "cyan") .attr('fill-opacity', 0.8) .attr('stroke', 'white') .attr('stroke-width', 2) // Interactividad con fondos de alto contraste .on('mouseover', function(e, d) { const miCirculo = d3.select(this); miCirculo.style('cursor', 'pointer') .transition().duration(150) .attr('fill', "magenta") .attr('r', 15); const posX = xy(d.y_ficticio, d.x_ficticio).x; const posY = xy(d.y_ficticio, d.x_ficticio).y; const grupoTexto = miLienzo.append('g').attr('class', 'etiqueta-temporal'); const fondoNombre = grupoTexto.append('rect') .attr('fill', 'rgba(0, 0, 0, 0.8)') .attr('rx', 4); const fondoDesc = grupoTexto.append('rect') .attr('fill', 'rgba(0, 0, 0, 0.8)') .attr('rx', 4); const textoNombre = grupoTexto.append('text') .text(d.nombre) .attr('x', posX) .attr('y', posY - 38) .attr('text-anchor', 'middle') .attr('font-family', 'sans-serif') .attr('font-weight', 'bold') .attr('font-size', '14px') .attr('fill', '#ffffff'); const textoDesc = grupoTexto.append('text') .text(d.descripcion) .attr('x', posX) .attr('y', posY - 18) .attr('text-anchor', 'middle') .attr('font-family', 'sans-serif') .attr('font-size', '12px') .attr('fill', '#e0e0e0'); const cajaNombre = textoNombre.node().getBBox(); fondoNombre .attr('x', cajaNombre.x - 6) .attr('y', cajaNombre.y - 4) .attr('width', cajaNombre.width + 12) .attr('height', cajaNombre.height + 8); const cajaDesc = textoDesc.node().getBBox(); fondoDesc .attr('x', cajaDesc.x - 6) .attr('y', cajaDesc.y - 4) .attr('width', cajaDesc.width + 12) .attr('height', cajaDesc.height + 8); }) .on('mouseout', function(e, d) { d3.select(this) .transition().duration(150) .attr('fill', "cyan") .attr('r', d => (mapa.getZoom() > 0 ? mapa.getZoom() * 4 : 4) + (d[variableCreativa] || 0)); miLienzo.selectAll('.etiqueta-temporal').remove(); }); function actualizarCirculos() { circulos .attr('cx', d => xy(d.y_ficticio, d.x_ficticio).x) .attr('cy', d => xy(d.y_ficticio, d.x_ficticio).y) .attr('r', d => (Math.max(1, mapa.getZoom() * 3)) + (d[variableCreativa] || 0)); } mapa.on("zoom", actualizarCirculos); }3c:[{"id":"0e7b920174d75b38837d77ab68d9c58c16c34852fe65c3a4cdde9e853b9a49402dc50d321de95d592f62c9cdbffa499abd8fe42429316490e0e4aadc6459bb1f","href":"https://static.observableusercontent.com/files/0e7b920174d75b38837d77ab68d9c58c16c34852fe65c3a4cdde9e853b9a49402dc50d321de95d592f62c9cdbffa499abd8fe42429316490e0e4aadc6459bb1f","name":"poligonos-localidades.geojson","type":"application/geo+json","lastModified":1787628387608.864,"size":2333976},{"id":"d56097598533012322e4469b25de19ce1f573b42a81736ee037bafbb30c04a5d01d3f577763887f586930189fe2501732766896217be836621d6fa90e5494e31","href":"https://static.observableusercontent.com/files/d56097598533012322e4469b25de19ce1f573b42a81736ee037bafbb30c04a5d01d3f577763887f586930189fe2501732766896217be836621d6fa90e5494e31","name":"islesofpleasure.jpg","type":"image/jpeg","lastModified":1787631648852.277,"size":325547},{"id":"32832a6c6540b5ba31028ccaccbc07503ec56f4a18d689dac53c8233055b630115eac872c1de90e23ca361f87a336edc2b25861ac777930d33d07bcc68583715","href":"https://static.observableusercontent.com/files/32832a6c6540b5ba31028ccaccbc07503ec56f4a18d689dac53c8233055b630115eac872c1de90e23ca361f87a336edc2b25861ac777930d33d07bcc68583715","name":"mapadebarrio.jpeg","type":"image/jpeg","lastModified":1787866480853.044,"size":450055}] 32:{"id":"37f9999234976970","slug":"cartolab","title":"Laboratorio de cartografía digital experimental","thumbnail":"054b3efa44e34421c20b0b4df78c6af2a04a194dc228516c3e1a7739dc3e0841","access_level":"public","create_time":"$D2026-08-25T02:44:10.648Z","update_time":"$D2026-08-27T22:01:43.460Z","view_time":null,"first_public_time":"$D2026-08-25T02:57:06.924Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"305bf5080ae4580a","login":"srsergiorodriguez","name":"Sergio Rodríguez Gómez","avatar_url":"https://avatars-next.observableusercontent.com/6326606b0640f2597b352da73f7c073f29b44d4060f66cc47c575dd937903b31","tier":"starter_2024"},"version":152,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"7d80462b6b41d223","login":"srsergiorodriguez","name":"Sergio Rodríguez Gómez","avatar_url":"https://avatars-next.observableusercontent.com/6326606b0640f2597b352da73f7c073f29b44d4060f66cc47c575dd937903b31","tier":null}],"members":[{"type":"team","id":"305bf5080ae4580a","login":"srsergiorodriguez","name":"Sergio Rodríguez Gómez","avatar_url":"https://avatars-next.observableusercontent.com/6326606b0640f2597b352da73f7c073f29b44d4060f66cc47c575dd937903b31","tier":"starter_2024","role":"editor"},{"type":"individual","id":"7d80462b6b41d223","login":"srsergiorodriguez","name":"Sergio Rodríguez Gómez","avatar_url":"https://avatars-next.observableusercontent.com/6326606b0640f2597b352da73f7c073f29b44d4060f66cc47c575dd937903b31","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":5,"collection":null,"type":"notebook","body":{"title":"Laboratorio de cartografía digital experimental","cells":[{"id":0,"value":"# Laboratorio de cartografía digital experimental","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":120,"value":"### Instrucciones para intervenir este espacio\n\nEste cuaderno es una plantilla interactiva. Para usarla con tu propio proyecto, sigue estos pasos:\n\n1. **Duplica los datos:** Haz una copia del [Google Sheet de plantilla](https://docs.google.com/spreadsheets/d/1RL01aOjK9dxYdNkuQ4RONq8znSAtBVGNKyR1IEC7mD8/edit?gid=0#gid=0) en tu propio Google Drive y asegúrate de publicarlo en la web (Archivo > Compartir > Publicar en la web > formato CSV).\n2. **Duplica el código de este notebook:** Haz clic en el botón \"Fork\" (bifurcar) en la esquina superior derecha de este cuaderno para crear tu propia versión editable.\n3. **Conecta tus datos:** En la celda de abajo, reemplaza la URL que está entre comillas por la URL del CSV de tu propio Google Sheet.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":18,"value":"datos = await d3.csv(\"https://docs.google.com/spreadsheets/d/e/2PACX-1vR73dKT15-Mp_XC7knSxoftdbidFyf-ZwbdhWFL9BwFD6HG3JuViDCfPikOAVRwgkkimxXQAgEX-2z1/pub?gid=0&single=true&output=csv\", d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"datoscartograficos = datos","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"datoscartograficos","database":"$undefined"},{"id":32,"value":"### Mapas de teselas\n\nLos mapas de teselas (o *tilesets*) funcionan dividiendo el mundo en una inmensa cuadrícula de imágenes cuadradas que el navegador carga dinámicamente a medida que hacemos zoom o nos desplazamos. Es la tecnología base detrás de servicios como Google Maps o OpenStreetMap. \n\nLa principal ventaja de este sistema es que nos proporciona un contexto geográfico inmediato e hiperdetallado: calles, ríos, edificios y fronteras ya están ahí. Sin embargo, al usar tilesets delegamos el diseño del territorio a los servidores que proveen estas imágenes, anclándonos a una representación estandarizada del espacio. En este ejercicio, usaremos la librería Leaflet para invocar estos mapas de fondo y D3.js para superponer y dibujar nuestra propia capa de datos cualitativos sobre ellos.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":38,"value":"datosFiltrados = datos.filter(d => categoriasSeleccionadas.includes(d.categoria))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"opcionesCategorias = [...new Set(datos.map(d => d.categoria))]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"opcionesVariables = Object.keys(datos[0]).filter(columna => \n typeof datos[0][columna] === 'number' && !['id', 'latitud', 'longitud'].includes(columna)\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"viewof categoriasSeleccionadas = Inputs.checkbox(opcionesCategorias, {\n label: \"Filtro principal:\", \n value: opcionesCategorias\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"viewof variableCreativa = Inputs.select(opcionesVariables, {\n label: \"Variable principal:\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"poligonosLocalidades = FileAttachment(\"poligonos-localidades.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"## Mapas vectoriales\n\nPara pasar del teselas al mapa abstracto, usamos archivos GeoJSON. A diferencia de las teselas, que son imágenes de bits, los vectores son instrucciones matemáticas que le dicen al navegador cómo dibujar polígonos, líneas y puntos.\n\nLa gran ventaja de este formato es que nos permite separar el territorio de su apariencia fotográfica. Podemos deformarlo, simplificarlo y, sobre todo, usar la forma misma de la ciudad como un lienzo de datos.\n\nPara lograr lo que propones con los mapas coropléticos (colorear áreas completas o grillas), necesitamos resolver un problema espacial: nuestra tabla tiene puntos sueltos, pero el mapa tiene polígonos (las localidades). Afortunadamente, D3 nos permite hacer un cálculo llamado \"punto en polígono\". Vamos a crear una celda que cruce ambas fuentes de información, contando cuántos puntos caen dentro de cada localidad y sumando su intensidad afectiva.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":88,"value":"viewof clonFiltro = Inputs.bind(\n Inputs.checkbox(opcionesCategorias, {label: \"Filtro rápido:\"}), \n viewof categoriasSeleccionadas // <-- Añadimos viewof aquí\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"viewof clonVariable = Inputs.bind(\n Inputs.select(opcionesVariables, {label: \"Cambiar variable:\"}), \n viewof variableCreativa // <-- Añadimos viewof aquí\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":50,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"$38","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":58,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"viewof clonFiltro2 = Inputs.bind(\n Inputs.checkbox(opcionesCategorias, {label: \"Filtro rápido:\"}), \n viewof categoriasSeleccionadas // <-- Añadimos viewof aquí\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"viewof clonVariable2 = Inputs.bind(\n Inputs.select(opcionesVariables, {label: \"Cambiar variable:\"}), \n viewof variableCreativa // <-- Añadimos viewof aquí\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"### Geolocalizar la imaginación\n\nHasta ahora hemos usado las coordenadas hegemónicas del globo terráqueo. Pero, ¿qué ocurre si el territorio que investigamos no existe en Google Maps? ¿Cómo mapeamos la Bogotá de una novela, la topología de un recuerdo o un mapa de relaciones sociales dibujado a mano sobre una servilleta?\n\nLa cartografía digital también nos permite inventar nuestros propios sistemas de coordenadas. En lugar de proyectar una esfera, podemos decirle al código que nuestro \"planeta\" es una imagen plana. Al hacer esto, las unidades de medida dejan de ser la latitud y la longitud, y pasan a ser los pixeles (X y Y) de nuestro propio dibujo.\n\nPara ubicar tus puntos en tu dibujo:\n1. Haz clic en cualquier lugar de la imagen de abajo.\n2. Aparecerá una ventana con unas coordenadas Y y X.\n3. Copia esos números en las columnas `y_ficticio` y `x_ficticio` de tu tabla de datos. El punto aparecerá dibujado mágicamente sobre tu trazo.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":112,"value":"imagenMapaFantasia = await FileAttachment(\"mapadebarrio.jpeg\").url();","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W3c","stdlib":"1","titling":"auto"}} 33:"$32:body"