Coding the Earth
viewof deltaY = Inputs.range([30, 60], {label: "Top Margin", step: 1})
viewof clockColor = Inputs.color({label: "Favorite color", value: "#4682b4"})
digitalClock = {
let data = [0,0,0,0];
function update() {
const t = new Date();
data[0] = t.getHours();
data[1] = t.getMinutes();
if(data[1] < 10) data[1] = '0' + data[1];
data[2] = t.getSeconds();
if(data[2] < 10) data[2] = '0' + data[2];
data[3] = t.getMilliseconds()/10;
//console.log(data);
};
// create container svg
const svg = d3
.create('svg')
.attr('width', 900)
.attr('height', 100);
function draw() {
svg.selectAll('g').remove();
svg.append('g')
.append('text')
.attr('x', deltaX.toFixed())
.attr('y', deltaY.toFixed())
.attr('font-size', 30)
.attr('fill', clockColor)
.text(data.join(':'))
console.log(data.join(':'));
}
// draw clock
draw();
setInterval(()=>{
update(); draw();
}, 30)
// update time and draw hands every second
/*
const interval = d3.interval(() => {
update()
draw()
}, 1000);
invalidation.then(() => {
interval.stop()
});
*/
return svg.node();
}
{
var timesRslt1 = function(x,y) {
return x*y;
}(5,6);
var timesRslt2 = ((x,y)=>{
return x*y;
})(5,6);
return [timesRslt1, timesRslt2];
}
{
var a = 1;
var b = 2;
return a+b;
}
viewof worldCupDateV = Inputs.datetime({label: "2026 World Cup Final", value: "2026-07-19T16:00"});
weeksCount = {
// Calculate weeks in milliseconds
const minute = 1000 * 60;
const hour = minute * 60;
const day = hour * 24;
const week = day * 7;
const year = day * 365;
// Divide Time with a week
const d = new Date();
return Math.round( (worldCupDateV.getTime() - d.getTime()) / week);
}
${weeksCount} weeks to world cup
{
var toWrite = htl.html`<p id="cdWorldCup">A count down</p>`;
let updateCountDown = () => {
const d = new Date();
document.querySelector("#cdWorldCup").innerHTML = (worldCupDateV.getTime() - d.getTime())/1000 + " seconds to go";
};
setInterval(updateCountDown, 1000);
return toWrite;
}
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.
