I love building things that make people's life easier
Published
Edited
Sep 26, 2022
1 fork
1 star
Grid Image Generator
gridView = area.node()
list = {
return Array.from({ length: 12 }, (d, i) => ({
img: new_images[i % 12].src,
id: DOM.uid()
}));
}
images = [...(await preload(randomImagesURL(width, height, 16))).values()]
import { randomImagesURL } from "@pierreleripoll/random-images"
area = {
const area = d3
.create("div")
.attr("class", "area")
.attr(
"style",
(d) => `width: ${width}px;height: ${height}px;background-color: #f7f7f7;`
);
return area;
}
import { preload } from "@severo/preload-a-list-of-images"
height = "600"
gridding = d3.gridding().mode("grid").size([width, height]).offset([0, 0])
d3 = require("d3@6", "d3-gridding@0.1")
rects = {
const t = area;
return area
.selectAll("img")
.data(gridding(list), (g) => g.id)
.join("img")
.transition(t)
.attr("width", (d) => d.width)
.attr("height", (d) => d.height)
.attr("src", (d) => d.img)
.attr(
"style",
(d) =>
`transform: translate(${d.x}px, ${d.y}px); position : absolute;object-fit: cover;`
);
}
new_images = Promise.all([
FileAttachment("BtsSoap.png").image(),
FileAttachment("CinaSoap.png").image(),
FileAttachment("ClaySoap.png").image(),
FileAttachment("CoffTeaSoap.png").image(),
FileAttachment("GradientSoap.png").image(),
FileAttachment("HoneylemonSoap.png").image(),
FileAttachment("LavenderSoap.png").image(),
FileAttachment("MacronSoap.png").image(),
FileAttachment("OceanSoap.png").image(),
FileAttachment("RainbowSoap.png").image(),
FileAttachment("WaterMelonSoap.png").image(),
FileAttachment("WineSoap.png").image()
])
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.
