fay Alomar

@CoderFay·2 public vizzes

Caesar Cipher Visualization

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.

Sep 12, 2023

Loading thumbnail…

Untitled

This example shows a simple scatter plot of 100 randomly generated points, each positioned on a 500-by-500 pixel SVG canvas. The visualization uses D3.js v4 scales and axes to map linear domains to screen coordinates, with red circles drawn for each point. The code appends an SVG group to the page, translates it by a 40-pixel margin, and uses `d3.scaleLinear` for both the x- and y-axes, which are rendered via `d3.axisBottom` and `d3.axisLeft`. Data is created in a loop using `Math.random()`.

Aug 31, 2023