Public
Edited
Oct 7, 2024
3 forks
Importers
Insert cell
Insert cell
datosMapa = FileAttachment("datosExtraidos@2.csv").csv({typed: true})
Insert cell
Insert cell
opcionesLeaflet = ({
center: [4.603043723798043, -74.06732150828127], // Centrado en la latitud y longitud de Bogotá por defecto. Primero latitud y luego longitud
zoom: 5,
width: width, // ancho por defecto del notebook
height: 300
})
Insert cell
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.5)
.attr('fill', "red")
.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.5)
}
mapa.on("zoom", actualizarCirculos);

return contenedor
}
Insert cell
Insert cell
opcionesVectorial = ({
projection: d3.geoNaturalEarth1, // Proyección para el mapa
geoJson: await (FileAttachment("Colombia.geo.json").json()),
width: width,
height: 500,
scale: 1500,
center: [-74, 4.376068906468002], // Primero longitud y luego latitud
})
Insert cell
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", "white");

const g = svg.append("g");

// Dibujar mapa
g.append("path")
.attr("d", pathGenerator(opcionesVectorial.geoJson))
.attr("fill", "#ddd")
.attr("stroke", "black")

// Dibujar círculos
svg.append("g")
.selectAll("circle")
.data(datosMapa)
.join("circle")
.attr("transform", d => `translate(${projection([d.lon,d.lat])})`)
.attr("fill", "red")
.attr("r", 3)

return svg.node();
}
Insert cell
Insert cell
Leaflet = require("leaflet@1.2.0")
Insert cell

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.
Learn more