playing with space, shape, colour & composition
Public
Edited
Sep 13, 2023
<div class='wrap'>
<div class='box xy-output'><h2>x: ${xy[0]}</h2><div>
<div class='box xy-output'><h2>y: ${xy[1]}</h2><div>
<div><h3 class='xy-time'>You have: ${time} seconds</h3></div>
</div>
data
data.push(createData(loop, xy));
data = []
xy
function createData(loop, xy) {
const data = [];
data.push(xy);
return data;
}
xy = randomXY(loop);
function randomXY (seed) {
const x = Math.random().toFixed(2); // decimal points
const y = Math.random().toFixed(2);
return [x, y];
}
delayMin = 1000; // milliseconds
delayMax = 8000;
time = (loop / 1000).toFixed(2);
timer = () => d3.randomUniform(delayMin, delayMax)();
loop = {
while (true) {
const t = timer() ;
yield t;
await Promises.delay(t);
}
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Mono&display=swap" rel="stylesheet">
<style>
.wrap {
width: ${width}px;
height: 400px;
display: flex;
justify-content: center;
align-items: center; /* vertically center to the parent container */
}
.box {
font-family: 'Space Mono', monospace;
margin: 0px;
padding: 10px;
background: #29bdad;
}
.box h2 {
padding: 10px;
margin: 0px;
font-size: 72px;
font-weight: 400;
color: #5c2c45;
}
.xy-output {
font-size: 72px;
color: #6b2e63;
text-align: center;
}
h3.xy-time {
font-size: 24px;
color: #fff;
padding-top: 20px;
padding-bottom: 10px;
text-align: center;
}
</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.
