Public
Edited
Jan 4, 2023
1 fork
{
const svg = d3.create("svg").attr("width", width).attr("height", height);
svg
.append("svg:defs")
.append("svg:marker")
.attr("id", "triangle")
.attr("refX", 5)
.attr("refY", 0)
.attr("markerWidth", 3)
.attr("markerHeight", 3)
.attr("markerUnits", "strokeWidth")
.attr("orient", "auto")
.attr("viewBox", "0 -5 10 10")
.append("path")
.attr("d", "M0,-5L10,0L0,5")
.style("fill", "#934C93");
svg
.selectAll("line")
.data(coords)
.enter()
.append("line")
.attr("stroke", "#934C93")
.attr("stroke-width", 1)
.attr("marker-end", "url(" + window.location + "#triangle)")
.attr("x1", (d) => d.lon)
.attr("y1", (d) => d.lat)
.attr("x2", (d) => d.lon + d.u)
.attr("y2", (d) => d.lat + d.v);
return svg.node();
}
{
const svg = d3.create("svg").attr("width", width).attr("height", height);
svg
.selectAll("circle")
.data(coords)
.join("circle")
.attr("r", (d) => 1)
.style("fill", "rgba(57,109,124, 0.99)")
.attr("cx", (d) => d.lon)
.attr("cy", (d) => d.lat);
return svg.node();
}
coords
{
for (let i = 0; i < grid.length; i++) {
let u = grid[i].VX;
let v = -grid[i].VY;
let Vmagn = Math.sqrt(u * u + v * v);
coords.push({
lon: lon2pixel(Number(grid[i]["lon"])),
lat: lat2pixel(Number(grid[i]["lat"])),
u: u * width * 0.0001,
v: v * width * 0.0001
});
}
}
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 = 4
resolution = 45000
height = width
width = 500
grid = FileAttachment("antarctic_ice_vel_notnull_45.csv").csv()
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.
