array = []
// a square size
a = 3.2
{
const svg = d3.create("svg").attr("width", width).attr("height", height);
svg
.selectAll("rect")
.data(coords)
.join("rect")
.attr("width", a)
.attr("height", a)
.style("fill", "rgba(37,124,163, 0.99)")
.attr("x", (d) => d.lon)
.attr("y", (d) => d.lat);
return svg.node();
}
Regular Grid
regularGrid
array
regularGrid = []
coords
coords = []
lat2pixel = function (y) {
return height - canvas_resolution * Math.round((y + lat_offset) / resolution);
}
lon2pixel = function (x) {
return canvas_resolution * Math.round((x + lon_offset) / resolution);
}
lat_offset = 2793275
lon_offset = 2795725
canvas_resolution = 5
resolution = 45000
height = width
width = 700
grid
grid = FileAttachment("antarctic_ice_vel_notnull_45.csv").csv()
gsap = gs.gsap
d3 = require("d3@5")
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.
