An interactive knowledge graph visualization that reveals progressively deeper information based on gaze duration using WebGazer.js for eye tracking and D3.js for visualization.
- Eye tracking-based interaction using webcam
- Progressive content revelation:
- Initial view shows basic labels
- After 2 seconds reveals summary
- After 5 seconds shows full detail
- Interactive graph visualization with D3.js
- Proper calibration system with 4-point calibration
- Mouse hover fallback for testing
- Smooth transitions and visual feedback
- Responsive text wrapping and formatting
- Clone the repository:
git clone https://github.com/casepot/eyegraph.git
cd eyegraph- Start a local server (e.g., using Python):
python3 -m http.server 8000- Open http://localhost:8000 in your browser
- Allow webcam access when prompted
- Click the "Start Calibration" button in the top-left
- Look at each red calibration dot and press spacebar (4 points total)
- After calibration, look at nodes to reveal their content:
- Initial look shows label
- After 2 seconds shows summary
- After 5 seconds shows full detail
A red dot shows your current gaze position. Mouse hover functionality is available as a fallback for testing.
- WebGazer.js - Eye tracking
- D3.js - Graph visualization
- Modern browser with webcam support
- Secure context (HTTPS or localhost)
- Good lighting conditions for optimal eye tracking
MIT License