Public
Edited
Apr 17, 2023
1 star
Insert cell
Insert cell
Insert cell
{
banner.querySelector('#trianglify').innerHTML = ""
banner.querySelector('#trianglify').appendChild( Trianglify({
height: 400,
width: width,
seed: 'ESAI',
x_colors: 'YlOrRd'
}).svg() )
}
Insert cell
sitmap = dot`digraph "" {
"HOMEPAGE" [shape = doublecircle]
"Github" [shape = doublecircle]
"CVMiniGames" [shape = doublecircle]
"Lights" [shape = doublecircle]
"HOMEPAGE" -> "Github" [label="@karpatic"]
edge [color=red];
"HOMEPAGE" -> "Lights"
edge [color=black];
"HOMEPAGE" -> "CVMiniGames"
}`
Insert cell
graph = html`
<style>
.center{ text-align:center }
</style>
<div id='sitemap' class='center paper'>
${sitmap} <br>
${description} <br>
</div>
`
Insert cell
mutable clickedOn = 'undefined'
Insert cell
description = {
//d3.select(sitmap).selectAll(".node")
var eventListener = sitmap.addEventListener("click", (evt) => { mutable clickedOn = evt.target.innerHTML } );
var returnThis = clickedOn
returnThis = 'Click a diagram label to preview the website'
returnThis = clickedOn != 'HOMEPAGE' ? returnThis : 'You are currently on my homepage!'
returnThis = clickedOn != 'Lights' ? returnThis : '<iframe width=100% height=600px src="https://charleskarpati.com/lights" ></iframe>'
returnThis = clickedOn != 'CVMiniGames' ? returnThis : '<iframe width=100% height=600px src="https://cvminigames.com" ></iframe>'
returnThis = clickedOn != 'Github' ? returnThis : '<iframe width=100% height=600px src="https://github.com/karpatic" ></iframe>'
return returnThis
}
Insert cell
thankyou = {
const height = 500;
const svg = d3.select(DOM.svg(1024, height))
.style('max-width', '100%')
.style('height', 'auto');
svg.append('rect')
.attr('fill', '#E93223')
.attr('transform', 'translate(50, 50)')
.attr('width', 1024 - 100)
.attr('height', height - 100);
svg.append('text')
.attr('transform', 'translate(100, 315)')
.style('font-family', 'Futura')
.style('font-style', 'italic')
.style('letter-spacing', '-10px')
.style('font-size', '200px')
.attr('fill', '#ffffff')
.text('Thank You!');
return svg.node();
}
Insert cell
style = html`
<style>
body{
background: #efefef
}
.observablehq > link:only-child, .observablehq > style:only-child{display:none}
#bannertext{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #ff847c;
font-size: 30px;
}
.paper {
background: white;
}
.paper:after {
content: "";
position: absolute;
top: 100%;
left: 0;
height: 20px;
width: 100%;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/rip.svg) bottom center;
background-size: 150%;
}
</style>
`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more