datosMapa = FileAttachment("datosExtraidos.csv").csv({typed: true})
opcionesLeaflet = ({
center: [4.60971, -74.08175], // Centrado en la latitud y longitud de Bogotá por defecto. Primero latitud y luego longitud 4.60971, -74.08175
zoom: 5,
width: width, // ancho por defecto del notebook
height: 300
})
/mapaLeafleat = {
const contenedor = DOM.element('div', { style: `width:${opcionesLeaflet.width}px;height:${opcionesLeaflet.height}px` });
// yield contenedor // Yield actualiza constantemente el mapa
// Crea un mapa usando Leaflet, define el contenedor y las opciones de presentación
const mapa = Leaflet.map(contenedor, {
center: opcionesLeaflet.center,
zoom: opcionesLeaflet.zoom
})
// Crea la capa de tiles y las inserta en el mapa
let osmLayer = //
Leaflet.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}@2x.png').addTo(mapa);
// Crea una capa de svg que se podrá modificar con D3
L.svg({clickable: true}).addTo(mapa)
const overlay = d3.select(mapa.getPanes().overlayPane)
const miLienzo = overlay.select('svg').attr("pointer-events", "auto");
// Una función de ayuda para convertir latitud y longitud en valores x y y dentro del mapa
const xy = (lat, lon) => mapa.latLngToLayerPoint([lat, lon]);
const circulos = miLienzo.selectAll('circle')
.data(datosMapa)
.join('circle')
.attr('cx', d => xy(d.lat, d.lon).x)
.attr('cy', d => xy(d.lat, d.lon).y)
.attr('r', mapa.getZoom() * 0.11)
.attr('fill', "green")
.attr('stroke', 'black')
function actualizarCirculos() {
circulos
.attr('cx', d => xy(d.lat, d.lon).x)
.attr('cy', d => xy(d.lat, d.lon).y)
.attr('r', mapa.getZoom() * 0.9)
}
mapa.on("zoom", actualizarCirculos);
return contenedor
}
opcionesVectorial = ({
projection: d3.geoEquirectangular, // Proyección para el mapa
geoJson: await (FileAttachment("Colombia.geo.json").json()),//FileAttachment("Paises Sudamerica.json").json()
width: width,
height:850,
scale: 1600,
center: [-74.0817500, 4.6097100], // Primero longitud y luego latitud
})
mapaVectorial = {
const projection = opcionesVectorial.projection()
projection.scale(opcionesVectorial.scale).center(opcionesVectorial.center)
const pathGenerator = d3.geoPath(projection);
const svg = d3.create("svg").attr("width", opcionesVectorial.width).attr("height", opcionesVectorial.height).style("background", "lightblue");
const g = svg.append("g");
// Escala de colores personalizada
const colorScale = d3.scaleOrdinal(d3.schemePastel1)
// Dibujar mapa
g.selectAll("path")
.data(opcionesVectorial.geoJson.features)
.join("path")
.attr("d", pathGenerator)
.attr("fill", d => colorScale(d.properties.NOMBRE_DPT))
.attr("stroke", "steelblue")
.attr("stroke-width", 1)
.on("mouseover", function(event, d) {
d3.select(this)
.attr("fill", "magenta");
tooltip.style("visibility", "visible")
.text(d.properties.NOMBRE_DPT) //
.style("top", `${event.pageY + 10}px`)
.style("left", `${event.pageX + 10}px`);
})
.on("mouseout", function() {
d3.select(this).attr("fill", d =>
colorScale(d.properties.NOMBRE_DPT));
tooltip.style("visibility", "hidden");
})
// Crear tooltip
const tooltip = d3.select("body").append("div")
.attr("class", "tooltip")
.attr("type", "text")
.style("position", "absolute")
.style("visibility", "hidden")
.style("background", "white")
.style("border", "1px solid blue")
.style("padding", "10px")
.style("border-radius", "10px")
.style("box-shadow", "0 0 5px rgba(0,0,0,0.6)");
//Leyenda etiqueta
const legend = svg.append("g")
.attr("class", "legend")
.attr("transform", `translate(${opcionesVectorial.width - 750}, 20)`);
const legendData = [
{ color: "blue", label: "Viajes de Sara 2024"},
];
legend.selectAll("rect")
.data(legendData)
.enter()
.append("rect")
.attr("x", 0)
.attr("y", (d, i) => i * 20)
.attr("width", 20)
.attr("height", 20)
.attr("fill", d => d.color);
legend.selectAll("text")
.data(legendData)
.enter()
.append("text")
.attr("x", 20)
.attr("y", (d, i) => i * 20 + 9)
.attr("dy", "0.40em") //Mueve el texto hacía arriba o abajo del rect.
.text(d => d.label);
//Dibujar círculos
g.append("g")
.selectAll("circle")
.enter()
.data(datosMapa)
.join("circle")
.attr("transform", d => `translate(${projection([d.lon, d.lat])})`)
.attr("fill", "blue") //(d, i) => colorScale(i)) también podría dejarse de un color cada punto.
.attr("r", 9)
.transition()
.duration(1000)
.attr("r", 12)
.transition()
.duration(1000)
.attr("r", 9);
// Agregar etiquetas
g.append("g")
.selectAll("text")
.data(opcionesVectorial.geoJson)
.join("text")
.attr("transform", d => `translate(${projection([d.lon, d.lat])})`)
.attr("dy", -10)
.attr("text-anchor", "middle")
.text(d => d.DPTO)
.attr("font-size", "7px")
return svg.node();
}
Leaflet = require("leaflet@1.2.0")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
