dataurl = "https://docs.google.com/spreadsheets/d/e/2PACX-1vSOgo_7DfTm0yV0bmX_eWU9gEMYFu4ydtnMYJSx9XZRiScmRx3zKMUxmEANXwj_U8TvkwbBwxTx6BI8/pub?output=csv"
csv = fetch (dataurl).then((response) => response.text())
data = d3.csvParse(csv, d3.autoType)
tabla = Inputs.table(data)
especiasDeAsia = FileAttachment("Especias+de+Asia.geojson").json()
map = {
const container = yield htl.html`<div style="height: 500px;">`;
const map = L.map(container).setView([16.84942, -99.90891], 1);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
}).addTo(map);
for (const d of data) {
if (d.LATITUD && d.LONGITUD) {
L.marker([+d.LATITUD, +d.LONGITUD])
.addTo(map)
.bindPopup(`<b>${d.ESPECIA}</b><br>${d.ORIGEN}`);
}
}
L.geoJSON(especiasDeAsia, {
style: function (feature) {
return { color: "darkred", weight: 3 };
},
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {
radius: 6,
fillColor: "orange",
color: "darkred",
weight: 1,
opacity: 1,
fillOpacity: 0.8
}).bindPopup(`<b>${feature.properties.name}</b>`);
},
coordsToLatLng: function (coords) {
// Ignora la altitud (Z) y usa solo latitud y longitud
return L.latLng(coords[1], coords[0]);
}
}).addTo(map);
}
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.
