datos = (await FileAttachment("Incendios-25-Enero.csv").csv({typed: true})).filter(d => {
return (d.latitude < 5.101107412615578 && d.latitude > 3.6710800756100688 && d.longitude < -74)
})
mapa = {
const contenedor = DOM.element('div', { style: `width:${width}px;height:${500}px` });
yield contenedor
const mapa = L.map(contenedor, {
center: [4.603043723798043, -74.06732150828127],
zoom: 5
})
let osmLayer = L.tileLayer('http://services.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}').addTo(mapa);
//'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png'
//http://services.arcgisonline.com/arcgis/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}
L.svg({clickable: true}).addTo(mapa)
const overlay = d3.select(mapa.getPanes().overlayPane)
const miLienzo = overlay.select('svg').attr("pointer-events", "auto");
const xy = (lat, long) => mapa.latLngToLayerPoint([lat, long]);
const circulos = miLienzo.selectAll('circle')
.data(datos)
.join('circle')
.attr('cx', d => xy(d.latitude, d.longitude).x)
.attr('cy', d => xy(d.latitude, d.longitude).y)
.attr('r', d => mapa.getZoom() * d.frp / 10)
.attr('fill', "red")
.attr('stroke', 'black')
.on('mouseover', function(e, d) {
const miCirculo = d3.select(this);
miCirculo.style('cursor', 'pointer')
.transition()
.duration(100)
.attr('r', mapa.getZoom() * d.frp / 10)
.attr("fill", "white")
miLienzo.append('text')
.text(d.nombre)
.attr('x', xy(d.latitude, d.longitude).x)
.attr('text-anchor', 'middle')
.attr('y', xy(d.latitude, d.longitude).y - 25)
.attr('stroke', 'black')
})
.on('mouseout', function(e, d) {
const miCirculo = d3.select(this);
miCirculo
.transition()
.duration(100)
.attr('r', mapa.getZoom() * d.frp / 10)
.attr("fill", "red")
miLienzo.selectAll('text').remove()
})
function actualizarCirculos() {
circulos
.attr('cx', d => xy(d.latitude, d.longitude).x)
.attr('cy', d => xy(d.latitude, d.longitude).y)
.attr('r', d => mapa.getZoom() * d.frp / 10)
}
mapa.on("zoomend", actualizarCirculos);
}
L = require("leaflet@1.2.0")
html`<link href='${resolve('leaflet@1.2.0/dist/leaflet.css')}' rel='stylesheet' />`
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.
