Public
Edited
Jul 17, 2024
2 forks
5 stars
Also listed in…
FISHEYE
ArtSlices = (images, align) => {
const height = 450,
xSteps = d3.range(0, width, width / images.length);
//console.log(xSteps)
const regularScale = d3.scaleIdentity().range(0, width).domain(xSteps);
const svg = d3
.select(DOM.svg(width, height))
.attr("viewBox", `0 ${height / 2} ${width} ${height}`)
.attr("width", "100%")
.attr("height", height * 2);
const g = svg
.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
var imageSlides = g
.selectAll("image")
.data(images)
.join("image")
.attr("xlink:href", (d) => d)
.attr("preserveAspectRatio", `${align} ${meetOrSlice}`);
defaultScale();
function defaultScale() {
imageSlides
//.transition()
.attr("x", (d, i) => regularScale(xSteps[i]))
.attr("y", 0)
.attr("width", (d, i) => width / images.length)
.attr("height", height / 2);
}
svg.on("pointermove click", function (e, d, i) {
return handleMove([e.x, e.y]);
});
// .on("touchmove", function(e, d, i) {
// return handleMove(d3.touches(e)[0]);
// });
// .on("mouseout touchend", defaultScale);
function handleMove(mouse) {
xFisheye.focus(mouse[0]); // yFisheye(mouse[1]);
imageSlides
.attr("x", (d, i) => xFisheye(xSteps[i]))
.attr("height", height * 2)
.attr("width", (d, i) => {
let x1 = xFisheye(xSteps[i + 1]);
if (!x1) x1 = width;
return x1 - xFisheye(xSteps[i]);
});
//.attr("preserveAspectRatio",`${align} none`)
}
return svg.node();
}
//webp file size was much smaller but they don't work on apple devices so now it only uses jpg
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.
