Tell us what works and what could be better. We read every submission.
@adammarcwilliams·4 public vizzes
A single black polyline traces a line chart of twelve data points, mapping step numbers to values on a fixed SVG canvas. The line is drawn using `d3.line()` with linear scales (`d3.scaleLinear`) for both axes, and the path is rendered with `fill: none` and `stroke: black`. The code defines a secondary set of coordinates but never uses it, and the chart shows only the line without axes, labels, or interactive elements. Data is hardcoded in a JavaScript array.
This example demonstrates a responsive video player that maintains a 16:9 aspect ratio within its container. It shows how the video element automatically adjusts its dimensions based on available space, prioritizing either width or height depending on the container’s proportions. The code uses vanilla JavaScript with the `clientWidth` and `clientHeight` properties to measure the parent element, then directly manipulates the video’s `style.width` and `style.height` properties. It compares the container’s aspect ratio against the target 16:9 ratio to determine whether to constrain by width or height. No external libraries are required; the logic relies solely on DOM element references and inline style updates.
This example generates a spiraling floral pattern on an HTML5 canvas using the JavaScript Canvas API. It draws hundreds of overlapping petal-like shapes, each positioned and rotated according to the golden angle (137.5 degrees) with a growing radius. The pattern emerges from repeated trigonometric calculations—cosine and sine for placement, plus rotation and scaling transformations per petal. The code uses `CTX.translate`, `CTX.rotate`, `CTX.scale`, and `CTX.arc` to render each petal with layered circles and rectangles, producing a dense, organic composition.
This example demonstrates the ROT13 Caesar cipher, a letter-substitution cipher that shifts each alphabetic character by 13 positions. It shows the transformation of an encoded input string into its decoded plaintext output. The JavaScript function `rot13` processes the string by splitting it into an array, applying the cipher logic via `Array.map`, and rejoining the characters. The cipher uses `charCodeAt` and `String.fromCharCode` to handle character codes, preserving non-alphabetic characters while shifting letters in the ranges A–M and N–Z. The visible test case decodes "V PENPXRQ GUR PBQR" to reveal the original message.