geoPanama = FileAttachment("distritos-panama.geojson").json()
puntosEcuador = FileAttachment("Viaje a Ecuador(2).geojson").json()
caminoQuindioPuntos = FileAttachment("AnyConv.com__Camino del Quindío.geojson").json()
projection = d3.geoMercator()
.scale(1500)
.center([-78.62, 3])
geoGenerator = d3.geoPath().projection(projection)
mapa = {
const ancho = 500;
const alto = 800;
const svg = d3.create("svg").attr("viewBox", [0,0, width, alto])
const baseMap = svg.append("g")
function drawMap(data, fillColor, strokeColor) {
return baseMap.append("g").selectAll("path")
.data(data.features)
.join("path")
.attr("d", geoGenerator)
.attr("fill", fillColor)
.attr("stroke", strokeColor);
}
const colombia = drawMap(geoColombia, "#a8dadc", "#f1faee");
const ecuador = drawMap(geoEcuador, "#a8dadc", "#f1faee");
const panama = drawMap(geoPanama, "#a8dadc", "#f1faee");
const venezuela = drawMap(geoVenezuela, "#a8dadc", "#f1faee");
// Añade funcionalidad de zoom
const zoom = d3.zoom()
.scaleExtent([1, 8]) // Define los límites de escala para el zoom
.on("zoom", zoomed); // La función `zoomed` se llamará cuando ocurra un evento de zoom
// Aplica el comportamiento de zoom al contenedor SVG
svg.call(zoom);
function zoomed(event) {
// Actualiza la transformación del grupo baseMap
baseMap.attr("transform", event.transform);
}
return svg.node()
}
geoVenezuela.features
geoColombia.features
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.
