Public
Edited
Jan 8
Importers
1 star
gr = html`${dot`${graph}`.outerHTML}`
vswp = displayGraph(gr, dict)
function displayGraph(shortcode, dict) {
const random = "description"+Math.floor(Math.random()*10000)
const random2 = "container"+Math.floor(Math.random()*10000)
const styleAndAttachEventListeners = function(dict, svg){
console.log(svg.querySelectorAll('ellipse, text, polygon'))
let firstPolygon = false
svg.querySelectorAll('ellipse, text, polygon').forEach(element => {
if(element.tagName === 'polygon' && !firstPolygon) {firstPolygon=true; element.remove(); return }
element.tagName !== 'text' && (element.style = "cursor: pointer; fill: rgba(0,0,0,0);");
/* Array.from(document.querySelectorAll(".graph")).map( graph => { graph.firstChild.nextSibling.style = "cursor: cursor; fill: transparent;";
} ) */
element.addEventListener('click', function(event) {
event.stopPropagation();
event.preventDefault();
let parent = element.closest('.node, .edge') || element.parentElement;
let title = parent.querySelector('title').textContent.toLowerCase();
let text = parent.querySelector('text').textContent;
document.querySelector(`#${random}`).innerHTML = dict[title] || text;
document.querySelector(`#${random}`).style.position="absolute";
document.querySelector(`#${random}`).style.top = event.offsetY + 'px';
console.log('yaww2', event.target, parent);
});
});
};
return html`
<div id="${random2}" style="position: relative; display: flex; justify-content: center; align-items: center;">
<p id="${random}" style="background:white; border: 5px solid red; position:absolute;"> Click a shape! </p>
${shortcode}
</div>
<script>${styleAndAttachEventListeners(dict, shortcode)}</script>
<style>p{z-index:10;} svg{position: absolute; position: sticky; left: 0; top: 0; z-index: 1;}</style>
`;
}
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.
