AlexZ33

@AlexZ33·6 public vizzes

The cicada principle in animations

A loading animation demonstrates the cicada principle by applying prime-number-based durations to multiple overlapping CSS keyframe animations. The code defines separate `@keyframes` rules for scaling, rotation, border-radius, color, and border-width, then combines them in a single `animation` shorthand property with durations like 1s, 0.7s, 1.1s, and 1.3s. The result is a visually complex, seemingly random looping effect on a simple box element, rendered purely through CSS and HTML without any JavaScript.

Dec 15, 2019

Loading thumbnail…

Hyphenation

This example demonstrates how CSS hyphenation automatically breaks a long quotation to fit a narrow text column, creating a justified, evenly spaced block of text. The HTML contains a single sentence from Oscar Wilde, while the CSS sets a fixed width, serif typography, and text justification. The `hyphens: auto` property, combined with the `lang` attribute implied by the content, enables automatic hyphenation. The JavaScript file only contains a commented-out alert, so no interactive behavior occurs. The dabblet is styled using standard CSS without external libraries.

Dec 10, 2019

Loading thumbnail…

Flexible background positioning

This example demonstrates how to position a background image with precise offsets from the edges of a container using the CSS `calc()` function. The code sets a fixed background position of `calc(100% - 20px)` horizontally and `calc(100% - 10px)` vertically, ensuring the image stays 20 pixels from the right and 10 pixels from the bottom regardless of container size. A placeholder SVG image from `csssecrets.io` is applied as the background, with the text "Code Pirate" rendered inside the styled `div`. The example uses only standard CSS properties and no external JavaScript libraries.

Nov 19, 2019

Loading thumbnail…

Simple line chart

This simple line chart visualizes twelve months of value data from `dataset.json`, plotting points for each month and connecting them with a single black line. The chart uses an ordinal x-axis for the month names and a linear y-axis for values, with a dashed line and green tooltip text appearing when hovered over a data point. Built with d3.v3, the visualization uses `d3.scale.ordinal`, `d3.scale.linear`, `d3.svg.line`, and SVG circles rendered via `d3.select`. The code also includes a final value label and uses the MIT-licensed blockbuilder.org framework.

Jul 19, 2017

Loading thumbnail…

GA的源码 analytics.js

This example shows a utility class for tracking and encoding feature-usage data in Google Analytics' analytics.js library. The `UsageManager` class records which methods or features are triggered, then encodes that information into a compact base64-like string for transmission to a backend. A `decode` method reverses the encoding by mapping each character back to its bit positions. The code demonstrates custom bit-packing logic and string manipulation rather than relying on visualization libraries, with the data source being the runtime state of the analytics script itself.

Sep 16, 2016

Loading thumbnail…

GA的源码 analytics.js

This example visualizes the internal usage-tracking mechanism of Google Analytics’s `analytics.js` library, showing how method calls are recorded and encoded into compact strings. The code defines a `UsageManager` class that tracks boolean usage flags, encodes them into base64-like characters, and decodes them back into index arrays. It also includes utility functions for DOM manipulation, script loading, and event handling, all interacting with the global `UsageManager` instance. The visualization relies on plain JavaScript object methods and string operations, with no external libraries, to demonstrate the encoding and decoding pipeline for analytics telemetry.

Sep 16, 2016