test

100%

✓ Published0🌍 Public

Last edited Mar 3, 2017

Created on Mar 3, 2017

This example presents a visualization of an image feed generated from a single Mendeley sign-in URL. The rendering uses the Canvas API to construct a grid of tiles, with each tile’s color and position driven by data parsed from the source URL's query parameters. The code leverages JavaScript’s `URLSearchParams` to extract route tokens, then draws the resulting pattern using `canvas.beginPath()` and `canvas.arc()`. The visualization shows the transformation of a simple web address into a geometric, color-coded matrix, highlighting the structural components of the URL string.

AI-generated description

Similar vizzes

Loading thumbnail…

Image Processing

This example demonstrates real-time image processing on map tiles using Polymaps and HTML5 Canvas. The map loads a static image from a URL and renders it through a custom canvas layer, where each tile’s pixel data is read with `getImageData` and halved in intensity before being written back via `putImageData`. The code uses `po.canvas()` to define the layer, `drawImage` to place the source, and `createImageData` to prepare the output. The result shows a visibly darkened version of the original image across the panning map.

Mmbostock

60% match

Loading thumbnail…

shape rendering in nodejs with LearnBoost's node-canvas

This example demonstrates dynamic, tile-based map rendering in Node.js using LearnBoost's node-canvas library. It projects GeoJSON feature coordinates onto a spherical Mercator grid and serves individual 256x256 pixel tiles over HTTP. The code loads multiple geographic layers, such as park boundaries, water bodies, and street centerlines from naturalearthdata.com or datasf.org, applies fill and stroke styles, and caches rendered canvases for reuse. It uses the canvas context's `moveTo`, `lineTo`, `scale`, and `translate` methods to draw the parsed geometries, then streams PNG output to the client.

RRandomEtc

60% match

Loading thumbnail…

Gist 6430664ff001d9202e5ef55df4ade43c

A collection of small, square tiles arranged in two separate fields—one flat, one garden-like—forms a mosaic of colorful cells. The visualization uses Vue to render the layout while leveraging Canvas pixel manipulation for fine-grained control over the tile colors and patterns. The code references force simulation for distribution and image data extraction from a provided source, suggesting a data-driven generation of the organic, layered structure.

SStephen

60% match

Loading thumbnail…

Gist 56494ad7dada033af61cc1c9c3d87776

This example presents a full-screen, animated canvas of randomly colored square pixels that continuously redraws itself. It shows how a simple generative pattern can create a dynamic, shifting mosaic across the entire browser window. The code uses the Canvas 2D API with `fillRect` and `requestAnimationFrame` to refresh the display, while each frame assigns new random RGB values to every pixel block. The visualization responds to window resizing by updating the canvas dimensions, and it is rendered inside a draggable, resizable widget container.

HHypercubed

60% match

Loading thumbnail…

Gist 2d272134b57b02eb8cdd0c5904249591

This example tests the archival fidelity of a web page by loading a series of images and scripts that mimic dynamic behavior, including DOM manipulation, AJAX requests, and delayed updates. It uses JavaScript’s `XMLHttpRequest` to fetch remote images and replaces them via base64 data URLs, while `setTimeout` and scroll events trigger asynchronous content changes. The page is rendered within an iframe by the pywb web archiving tool, with a banner and rewrite layer applied. The visualization demonstrates how archived sites handle live interactions and resource loading over time.

NN0taN3rd

60% match

Loading thumbnail…

Untitled

This example presents a minimal canvas-based visualization that renders a blank drawing surface within an HTML page. The code combines D3 v6 for potential data-driven operations, jQuery for DOM manipulation, and Papa Parse for CSV parsing, though no actual data or visual elements are drawn. The canvas element is set to 200 by 100 pixels and displays the default white background, with a commented-out color property suggesting incomplete styling. The page loads the D3 library from a CDN and includes a separate Papaparse script reference, indicating readiness for future data loading and rendering tasks.

SSMIT9102

59% match

Loading thumbnail…

Gist e9e662643752b1cd6f46767b03eab04d

This example demonstrates how to draw a line graph using the HTML5 Canvas API, adapted from a Japanese presentation on Canvas fundamentals. The code initializes a canvas element, retrieves its 2D rendering context, and then draws a framed plotting area with gridlines, data points as arcs, text labels, and connecting line segments. It uses core Canvas methods such as `strokeRect`, `arc`, `fillText`, and `moveTo`/`lineTo`, along with `save` and `restore` to manage drawing states. The visualization is rendered directly to canvas with no external charting library, though the slides reference Chart.js and D3.js as alternatives.

MMiyaton

59% match

Loading thumbnail…

Mandelbrot

This visualization renders a slice of the Mandelbrot set as a 360 by 360 grid of pixels on an HTML canvas. Each pixel’s color is computed by iterating the complex function `z = z² + c` for up to 200 iterations; colors, from black to a teal gradient, are derived from the iteration count using `d3.scaleLinear`. The visualization uses Svelte components (`App.svelte`, `Canvas.svelte`, `Pixel.svelte`) where the canvas context manages drawing and invalidation for rendering.

KKristin Baumann

59% match