Realtime Rain Radar (Japan)Flood depth map on 3D terrainTest: Mapbox GL JS v2Asteroid Itokawa 3D [9MB]Pseudo-contouringDecoding PNG elevation tileJapan FloodBilinear interpolation of tileGradient of MountainOverlay DIY contour on mapContoured mountainious terrain 3DDem to contour by d3H3 index visualizerFetch elevation tileMapbox GL + GeoJSON PolygonH3 GeoJsonMountain Terrain 3D
Drawing isobar on map
// Color scale function for pressure
color = d => {
const minP = Math.min(...geojsons.map(g => g.properties.pressure));
const maxP = Math.max(...geojsons.map(g => g.properties.pressure));
return d3.interpolateSpectral((d - minP) / (maxP - minP));
}
// Preview xml
await FileAttachment("75adbf8d-bdcd-3ec3-93e0-858a87bdd718.xml").text();
// Parse XML Data
xml = {
const text = await FileAttachment("75adbf8d-bdcd-3ec3-93e0-858a87bdd718.xml").text();
const parser = new DOMParser();
return parser.parseFromString(text, "application/xml")
}
// Extract isobar part from XML
items = xml.getElementsByTagName("MeteorologicalInfo")[0].getElementsByTagName("Item")
// Decode to GeoJSON
geojsons = Array.from(items).filter(item => {
const type = item.getElementsByTagName("Type")[0].innerHTML;
return type === "等圧線";
}).map(item => {
const isobarPart = item.getElementsByTagName("IsobarPart")[0];
const coordsText = isobarPart.getElementsByTagName("jmx_eb:Line")[0].innerHTML;
const coords = coordsText.split("/").map(d => d.split("+").slice(1).map(parseFloat).reverse());
const pressure = isobarPart.getElementsByTagName("jmx_eb:Pressure")[0].innerHTML;
return {
type: "Feature",
geometry: {
type: "LineString",
coordinates: coords,
},
properties: {
pressure: parseInt(pressure)
}
};
})
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.
