"JAXA Earth API for JavaScript" examples on the Observable by the JAXA Earth Observation Research Center
//Load the API module
je = require("https://data.earth.jaxa.jp/api/javascript/v1.2.3/jaxa.earth.umd.js");
//Date for observation
//The newest data will be get.
date = new Date();
//Specified date
// date = new Date(Date.UTC(2023,3-1,1)); //year, month-1 ,day
//Bounding box of the area for observation
bbox = {
const lng = 140;
const lat = 35;
const dl = 20;
return [lng - dl, lat - dl, lng + dl, lat + dl]; //west, south, east, north
}
width = 300;
height = 300;
image1 = await je.getImage({
collection: "https://s3.ap-northeast-1.wasabisys.com/je-pds2/cog/v1/JAXA.G-Portal_GCOM-W.AMSR2_standard.L3-SST.nighttime.v4_global_daily/collection.json",
band: "SST",
bbox,
date,
width,
height,
colorMap: {
min: 10,
max: 35,
colors: "jet",
},
});
image1.getFormattedDate();
image1.getCanvas();
image1.getLegend(300,20,10); //width, height, text size
//Mean 平均値
je.data.globalStat(image1.getData()).mean
image2 = await je.getImage({
collection: "https://s3.ap-northeast-1.wasabisys.com/je-pds2/cog/v1/JMA_COBE-SST-interpolation_SST.v2_global_daily-normal/collection.json",
band: "SST",
bbox,
date: image1.getDate(),
width,
height,
colorMap: {
min: 10,
max: 35,
colors: "jet",
},
});
image2.getFormattedDate();
image2.getCanvas();
image2.getLegend(300,20,10);
//Mean 平均値
je.data.globalStat(image2.getData()).mean
image3 = new je.CompositeImage({
//Input images to composite
images: [image1, image2],
//All pixels will be calculated by the operation function
operation: (value_of_image1, value_of_image2) => value_of_image1 - value_of_image2,
colorMap: {
min: -6,
max: 6,
colors: "jet",
},
//Unit of the calculated value
unit: "degC",
});
image3.getCanvas()
image3.getLegend(300,20,10);
//Mean 平均値
je.data.globalStat(image3.getData()).mean
plotData = {
//Float32Array
const validData = image3.getData().data.filter(e => !isNaN(e));
const plotData = [];
for(let i=0;i<validData.length;i++){
plotData.push({"SST": validData[i]});
}
return plotData;
}
Plot.plot({
x: {
grid: true,
},
y: {
grid: true
},
color: {
legend: true
},
grid: true,
marks: [
Plot.rectY(plotData, Plot.binX({y: "count"}, {x: "SST"})),
Plot.ruleY([0])
]
})
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.
