Animated Clock - Real-time analog clock using graph nodes

Animated Clock Visualization

Functional Overview

This creative example demonstrates an analog clock built with relation-graph nodes and lines. The clock face, hour hand, minute hand, and second hand are all graph elements that animate in real-time. It showcases the versatility of relation-graph for creating dynamic, time-based visualizations beyond traditional relationship graphs.

Implementation of Key Features

Clock Face Nodes

const createClockFace = () => {
    const nodes = [];
    const lines = [];

    // Center node
    nodes.push({ id: 'center', text: '', x: 400, y: 300, width: 10, height: 10 });

    // Hour markers
    for (let i = 0; i < 12; i++) {
        const angle = (i * 30) * Math.PI / 180;
        const x = 400 + Math.cos(angle) * 250;
        const y = 300 + Math.sin(angle) * 250;
        nodes.push({ id: `hour-${i}`, text: i.toString(), x, y });
    }

    return { nodes, lines };
};

Hand Animation

const updateClockHands = () => {
    const now = new Date();
    const hours = now.getHours() % 12;
    const minutes = now.getMinutes();
    const seconds = now.getSeconds();

    const hourAngle = ((hours + minutes / 60) * 30) * Math.PI / 180;
    const minuteAngle = ((minutes + seconds / 60) * 6) * Math.PI / 180;
    const secondAngle = (seconds * 6) * Math.PI / 180;

    updateHandPosition('hour-hand', hourAngle, 150);
    updateHandPosition('minute-hand', minuteAngle, 200);
    updateHandPosition('second-hand', secondAngle, 220);
};

useEffect(() => {
    const timer = setInterval(updateClockHands, 1000);
    return () => clearInterval(timer);
}, []);

Creative Use Cases

Time Zone Displays: Multiple clocks showing different time zones.

Timers and Countdowns: Visual countdown with animated hands.

Dashboard Widgets: Time displays in monitoring dashboards.

Educational Tools: Teaching analog clock reading.

Schedule Visualization: Show time-based schedules on clock face.