Skip to main content
🌍 Public

Share visualization

Send this visualization to others.

Caesar Cipher Visualization

Public visualization

Viewing a saved revision (read-only)

fca693d7327942988c4dd3f24b5aa641

Caesar Cipher Visualization

0 stars0🌍 Public
Ffay Alomar
Last edited Sep 12, 2023
Created on Sep 12, 2023

This interactive visualization demonstrates the Caesar cipher encryption technique by allowing users to input text and a shift value, then animating the transformation of the alphabet. The code uses D3.js v7 to render SVG letter boxes that smoothly transition colors and characters over a one-second animation, highlighting which letters shift and which remain unchanged. User input is processed through a custom `caesarCipher` function, while the `d3.select` and `transition` APIs drive the visual feedback.

AI-generated description

Demonstrates fundamental DOM manipulation using D3.js by making a smiley face whose eyebrows move.