Public
Edited
Apr 13, 2023
1 fork
<div class="flex-parent-element">
<div class="flex-child-element magenta">
${createChart(finalJson)}
</div>
<div class="flex-child-element green">
<div id="app1"></div>
<div id="app2"></div>
</div>
</div>
// function renderApp() {
// const randomId = Array.from(randomImageByTopicsMap.keys())[Math.floor(Math.random() * randomImageByTopicsMap.size)];
// ReactDOM.render(
// React.createElement(Gallery, { id: randomId }),
// document.getElementById("app1")
// );
// }
dispatch.on("circle-clicked", (obj) => {
ReactDOM.render(
React.createElement(Gallery, obj),
document.getElementById(obj.tag)
);
});
<style>
.flex-parent-element {
display: flex;
width: 100%;
align-items: center; /* add this */
}
.flex-child-element {
flex: 1;
/* border: 2px solid black; */
margin: 0px;
}
.flex-child-element:first-child {
margin-right: 10px;
flex-basis: 20%;
}
.flex-child-element.green {
height: 100%;
/* justify-content: center; */
}
</style>
// {
// const randomId = Array.from(randomImageByTopicsMap.keys())[Math.floor(Math.random() * randomImageByTopicsMap.size)];
// ReactDOM.render(
// React.createElement(Gallery, { id: randomId }),
// document.getElementById("app2")
// );
// }
// function wrapperApp() {
// React.useEffect(() => {
// renderApp();
// }, [randomImageByTopicsMap]);
// return React.createElement("div", { id: "app1" });
// }
// ReactDOM.render(React.createElement(wrapperApp), document.getElementById("app1"));
// renderApp();
// function renderApp() {
// const randomId = Array.from(randomImageByTopicsMap.keys())[Math.floor(Math.random() * randomImageByTopicsMap.size)];
// ReactDOM.render(
// React.createElement(Gallery, { id: randomId }),
// document.getElementById("app1")
// );
// }
// dispatch.on("circle-clicked", (id) => {
// ReactDOM.render(
// React.createElement(Gallery, { id }),
// document.getElementById("app1")
// );
// });
<!-- <div id="app1"></div> -->
function Gallery(props) {
let urls = randomImageByTopicsMap.get(props.id).map(obj => obj.img_url);
let captions = randomImageByTopicsMap.get(props.id).map(obj => obj.captions);
const columns = 2;
const [rows, setRows] = useState(1);
const images = urls.map((url, index) => ({
url,
caption: captions[index],
}));
useEffect(() => {
const totalImages = images.length;
const newRows = Math.ceil(totalImages / columns);
setRows(newRows);
}, [columns, images]);
const imageElements = images.map((image, index) => {
return React.createElement('div', {
key: index,
style: {
display: 'inline-block',
marginRight: '10px',
position: 'relative', // add relative positioning
width: '200px',
height: '200px',
overflow: 'hidden',
},
}, [
React.createElement('img', {
key: 'img',
src: image.url,
style: {
width: '100%',
height: '100%',
objectFit: 'cover',
},
}),
React.createElement('div', {
key: 'caption',
style: {
position: 'absolute',
bottom: '0',
left: '0',
right: '0',
padding: '0px',
color: 'white',
backgroundColor: 'rgba(0, 0, 0, 0.5)',
// textOverflow: 'ellipsis',
maxHeight: '50px',
overflowY: 'scroll',
whiteSpace: 'nowrap',
zIndex: 1, // add z-index to make sure caption is on top
},
}, image.caption),
]);
});
return React.createElement('div', {}, [
React.createElement('div', {
key: 'title',
style: {
fontSize: '18px',
fontWeight: 'bold',
marginBottom: '10px',
textAlign: "center",
},
}, `Image topic: #${props.id}`),
React.createElement('div', {
key: 'gallery',
style: {
width: '600px',
height: '220px',
overflowX: 'auto',
whiteSpace: 'nowrap',
},
}, imageElements),
]);
}
<!-- <style>
.image-container {
position: relative;
overflow: hidden;
width: 100%;
height: 0;
padding-bottom: 60%; /* 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: 0px;
box-sizing: border-box;
max-height: 50px;
overflow-y: scroll;
}
</style> -->
// {
// let idQueue = [];
// function addIdToQueue(id) {
// // Check if ID already exists in the queue
// for (let i = 0; i < idQueue.length; i++) {
// if (idQueue[i].id === id) {
// console.log(`ID ${id} already exists in the queue`);
// return;
// }
// }
// // Assign color to new object based on color of previous object
// let color;
// let divTag;
// if (idQueue.length === 0) {
// color = "green";
// divTag = "app1";
// } else if (idQueue[idQueue.length - 1].color === "green") {
// color = "red";
// divTag = "app2";
// } else {
// color = "green";
// divTag = "app1";
// }
// // Add new object to queue
// if (idQueue.length < 2) {
// idQueue.push({ id: id, color: color, divTag: divTag });
// } else {
// // Replace oldest object with new object
// idQueue[0] = idQueue[1];
// idQueue[1] = { id: id, color: color, divTag: divTag };
// }
// console.log(`ID ${id} added to queue with color ${color} and divTag ${divTag}`);
// }
// addIdToQueue(1);
// addIdToQueue(2);
// addIdToQueue(2);
// addIdToQueue(1);
// addIdToQueue(3);
// addIdToQueue(1);
// addIdToQueue(2);
// return idQueue;
// }
margin = ({top: 25, right: 50, bottom: 10, left: 7.5})
dy = width / 2.4
dx = 50
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
dispatchImg = d3.dispatch("img-clicked");
diagonal = d3.linkHorizontal().x(d => d.y).y(d => d.x)
tree = d3.tree().nodeSize([dx, dy])
// margin = ({top: 10, right: 120, bottom: 10, left: 40})
d3 = require("d3@6")
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"
import {Range, pack} from "@esperanc/range-input-variations"
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.
