Public
Edited
Apr 5, 2023
1 fork
2 stars
import {render, component, jsx, memo, forwardRef, React, ReactDOM, createElement, Children, createRef, createContext, lazy, Fragment, StrictMode, Suspense, cloneElement, useCallback, useContext, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useReducer, useRef, useState, useDebugValue, createPortal, __SECRET_SWITCHER} from "@j-f1/react"
{
// const urls = [
// "https://apod.nasa.gov/apod/image/2105/GegenscheinBolide_Casado_1080.jpg",
// "https://apod.nasa.gov/apod/image/2105/UluruOrion_Liu_1080.jpg",
// "https://apod.nasa.gov/apod/image/1910/ClayCache_Curiosity_9990.jpg",
// "https://apod.nasa.gov/apod/image/2011/IC1848_Guenzel_960.jpg",
// "https://apod.nasa.gov/apod/image/1906/M13_and_HR_diag_updated6_1024.jpg",
// "https://apod.nasa.gov/apod/image/1709/LastRingPortrait_Cassini_4472.jpg",
// "https://apod.nasa.gov/apod/image/1707/AntarcticEclipse_bruenjes_650.jpg",
// "https://apod.nasa.gov/apod/image/1703/JWSTlightsout1024.jpg",
// "https://apod.nasa.gov/apod/image/1703/M42kaltseis_Cedic1024.jpg",
// "https://apod.nasa.gov/apod/image/1701/pinky_sun_beletsky1024y.jpg",
// "https://apod.nasa.gov/apod/image/1612/LowerMtSharp_Curiosity_1080_annotated.jpg"
// ];
// const captions = [
// "It is commonly stated that the gegenschein was.",
// "Uluru and Orion",
// "Clay Cache on Mars",
// "IC 1848: The Soul Nebula",
// "M13: The Great Globular Cluster in Hercules",
// "The Last Portrait of Saturn's Rings",
// "The 2017 Antarctic Eclipse",
// "JWST: Lights Out",
// "The Orion Nebula in Infrared from Hubble",
// "A Pink Sun Rising",
// "Curiosity Rover: Lower Mount Sharp on Mars"
// ];
let urls = flattenedRandomSelection.map(obj => obj.img_url);
let captions = flattenedRandomSelection.map(obj => obj.captions);
function Gallery() {
const [columns, setColumns] = useState(3);
const images = urls.map((url, index) => ({
url,
caption: captions[index],
}));
const rows = images.reduce(
(rows, image, index) =>
index % columns === 0
? [...rows, [image]]
: [...rows.slice(0, -1), [...rows.slice(-1)[0], image]],
[]
);
return React.createElement(
"div",
null,
React.createElement(
"div",
null,
React.createElement("label", null, "Number of columns: "),
React.createElement("input", {
type: "number",
min: "1",
max: "4",
value: columns,
onChange: (event) => setColumns(event.target.value),
})
),
React.createElement(
"div",
{
style: {
display: "flex",
flexDirection: "column",
gap: "16px",
},
},
rows.map((row, rowIndex) =>
React.createElement(
"div",
{
key: rowIndex,
style: {
display: "grid",
gridTemplateColumns: `repeat(${columns}, 1fr)`,
gap: "16px",
},
},
row.map((image, columnIndex) =>
React.createElement(
"div",
{ key: columnIndex, className: "image-container" },
React.createElement("img", { src: image.url, alt: image.caption }),
React.createElement("div", { className: "caption" }, image.caption)
)
)
)
)
)
);
}
ReactDOM.render(React.createElement(Gallery), document.getElementById("app"));
}
<style>
.image-container {
position: relative;
overflow: hidden;
width: 100%;
height: 0;
padding-bottom: 75%; /* 4:3 aspect ratio */
}
.image-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.image-container .caption {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 8px;
box-sizing: border-box;
max-height: 60px;
overflow-y: scroll;
}
.scrollable-gallery {
height: 100%;
overflow-y: auto;
}
</style>
imageCsv = d3.csv(
"https://raw.githubusercontent.com/AI-EnabledSoftwareEngineering-AISE/RE4VIS/main/data/images_df.csv",
d3.autoType
)
imgUrls = imageCsv.map(obj => obj.img_url);
imgCaptions = imageCsv.map(obj => obj.captions);
sliceCaptions = imgCaptions.slice(100, 120)
sliceUrls = imgUrls.slice(120, 130)
flattenedRandomSelection = imageCsv.slice(120, 140)
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.
