Public
Edited
Dec 18, 2023
{
let d = document.createElement("div");
let img = document.createElement("img");
let resd = document.createElement("div");
let svg = d3.create("svg");
svg.style("position", "absolute");
svg.style("left", "0px");
let starting_dims;
function make_svg_brush() {
let img_bbox = img.getBoundingClientRect();
let dimscale = d3.scaleLinear([0, img_bbox.height], starting_dims);
svg.attr("width", img_bbox.width);
svg.attr("height", img_bbox.height);
let h = svg.attr("height");
let w = svg.attr("width");
console.log("dimensions", w, h);
let rect = svg.append("rect");
svg.on("click", (e) => {
let [x, y] = d3.pointer(e);
rect.attr("x", x);
rect.attr("y", y);
rect.attr("height", dimscale.invert(15));
rect.attr("width", dimscale.invert(15));
rect.attr("stroke", "red");
rect.attr("fill-opacity", 0);
x = dimscale(x);
y = dimscale(y);
console.log(x, y);
resd.remove();
resd = document.createElement("div");
d.append(resd);
// note that we swap the order that we give the code so that we fit the numpy operations
fetch("https://localhost:8080/usgs_to_drone", {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({
intpair: [y, x]
})
})
.then((res) => res.arrayBuffer())
.then((ab) => {
make_results(resd, ab);
});
});
}
img.onload = () => {
starting_dims = [0, img.height];
setTimeout(make_svg_brush, 100);
d.append(img);
d.append(resd);
};
img.src = "https://localhost:8080/image";
d.append(svg.node());
return d;
}
function make_results(parent_div, ab) {
let img = new Image();
let arrayBufferView = new Uint8Array(ab);
var blob = new Blob([arrayBufferView], { type: "image/png" });
var urlCreator = window.URL || window.webkitURL;
var imageUrl = urlCreator.createObjectURL(blob);
img.onload = function () {
console.log(this.width + "x" + this.height);
};
img.src = imageUrl;
parent_div.append(img);
}
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.
