{
const r = elevData.height / elevData.width;
let c = DOM.context2d(width, width * r, elevData.width / width / scaler);
const { windData, drawData } = datas;
for (let i = 3; i < drawData.data.length; i += 4) {
if (elevData.data[i] == 0) {
drawData.data[i] = 0;
continue;
}
for (let j = 1; j < 4; j++) {
drawData.data[i - j] =
windOpacity * windData.data[i - j] +
(1 - windOpacity) * elevData.data[i - j];
}
}
c.putImageData(drawData, -xOffset, -yOffset);
return c.canvas;
}
datas = {
let [r] = windRasters; // there is one channel in raster for this image
let { width, height } = windRasters;
const data = new Uint8ClampedArray(width * height * 4);
// for (let i = 0; i < r.length; i++) {
// data[i * 4] = r[i];
// data[i * 4 + 1] = g[i];
// data[i * 4 + 2] = b[i];
// data[i * 4 + 3] = r[i] == 0 ? 0 : 255;
// }
console.log(d3.extent(r));
const scaler = d3.scaleLinear().domain(d3.extent(r)).range([0, 255]);
for (let i = 0; i < r.length; i++) {
let rs = r[i] * 1; // some scaling
rs = scaler(rs);
data[i * 4] = rs;
data[i * 4 + 1] = rs;
data[i * 4 + 2] = 0;
data[i * 4 + 3] = 255;
}
const data2 = data.map((e) => e);
const windData = new ImageData(data, width, height);
const drawData = new ImageData(data2, width, height);
return { windData, drawData };
// return new ImageData(data, width, height), new ImageData(data, wind, height);
}
d3.extent(windRasters[0])
windRasters = {
const init = await geotiff.fromUrl(
await FileAttachment("wc2.1_10m_wind_01.tif").url()
);
const inits = [
await geotiff.fromUrl(await FileAttachment("wc2.1_10m_wind_01.tif").url()),
await geotiff.fromUrl(await FileAttachment("wc2.1_10m_wind_02.tif").url()),
await geotiff.fromUrl(await FileAttachment("wc2.1_10m_wind_03.tif").url()),
await geotiff.fromUrl(await FileAttachment("wc2.1_10m_wind_04.tif").url()),
await geotiff.fromUrl(await FileAttachment("wc2.1_10m_wind_05.tif").url()),
await geotiff.fromUrl(await FileAttachment("wc2.1_10m_wind_06.tif").url()),
await geotiff.fromUrl(await FileAttachment("wc2.1_10m_wind_07.tif").url()),
await geotiff.fromUrl(await FileAttachment("wc2.1_10m_wind_08.tif").url()),
await geotiff.fromUrl(await FileAttachment("wc2.1_10m_wind_09.tif").url()),
await geotiff.fromUrl(await FileAttachment("wc2.1_10m_wind_10.tif").url()),
await geotiff.fromUrl(await FileAttachment("wc2.1_10m_wind_11.tif").url()),
await geotiff.fromUrl(await FileAttachment("wc2.1_10m_wind_12.tif").url())
];
const rasterses = [];
for (let i = 0; i < 12; i++) {
rasterses.push(await get_rasters(inits[i]));
console.log(i);
}
const rasters = await get_rasters(init);
for (let i = 0; i < rasters[0].length; i++) {
for (let j = 0; j < 12; j++) {
if (rasterses[j][0][i] > rasters[0][i]) {
rasters[0][i] = rasterses[j][0][i];
}
}
}
const pos = (e) => (e > 0 ? e : 0);
rasters[0] = rasters[0].map(pos);
return rasters;
}
get_rasters = async (init) => {
const image = await init.getImage();
const rasters = await image.readRasters({ pool });
return rasters;
}
elevData = {
const elev_tiff_init = await geotiff.fromUrl(
await FileAttachment("wc2.1_10m_elev.tif").url()
);
const image = await elev_tiff_init.getImage();
const data = await readImageData(image);
return data;
}
pool = new geotiff.Pool();
readImageData = async (image) => {
// const pool = new geotiff.Pool();
const rasters = await image.readRasters({ pool });
// let [r, g, b] = rasters; //
let [r] = rasters; // there is one channel in raster for this image
let { width, height } = rasters;
const data = new Uint8ClampedArray(width * height * 4);
// for (let i = 0; i < r.length; i++) {
// data[i * 4] = r[i];
// data[i * 4 + 1] = g[i];
// data[i * 4 + 2] = b[i];
// data[i * 4 + 3] = r[i] == 0 ? 0 : 255;
// }
const scaler = d3.scaleLog().domain([1, 10000]).range([0, 255]);
for (let i = 0; i < r.length; i++) {
let rs = r[i] * 1; // some scaling
let isSea = rs == -32768;
// rs = rs > 0 ? rs : 0;
rs = (rs / 10000) * 255;
rs = scaler(rs);
data[i * 4] = rs;
data[i * 4 + 1] = rs;
data[i * 4 + 2] = rs;
data[i * 4 + 3] = rs[i] == 0 ? 0 : 255;
data[i * 4 + 3] = isSea ? 0 : 255;
}
return new ImageData(data, width, height);
}
geotiff = require("geotiff.js@1.0.1/dist/geotiff.bundle.min.js")
d3 = require("d3")
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.
