Skip to main content
SimilarExport ZIP
100%

Polymaps / Procedural Perlin

✓ Published0🌍 Public
Mmbostock
Last edited Aug 20, 2010
Created on Aug 20, 2010

This example displays a procedurally generated Perlin noise pattern rendered as a map using Polymaps. A web worker computes the noise values for each tile, writing RGB pixel data into an array, which is then posted back and displayed as a colorful texture. The code implements Ken Perlin’s classic noise algorithm from scratch, including fade, lerp, and gradient functions, and uses the `postMessage` API to communicate tile data asynchronously. The visualization demonstrates how noise can be generated on demand for arbitrary zoom levels and map coordinates.

AI-generated description

Similar vizzes

Loading thumbnail…

Sequential Tiles

This example demonstrates a rainbow-colored tile grid that visualizes the sequence of map tiles in a web mapping interface. Each tile at a given zoom level is assigned a color based on its sequential position, creating a visible gradient that shows the order and layout of map tiles. The visualization uses the Polymaps JavaScript library’s `po.map()` and `po.layer()` APIs, with a custom `rainbow` function that calculates a hue from the tile’s column and row indices. The code also includes a custom `hsl` function for color conversion, and the map is configured with a 32x32 tile size and zoom level 4.

Mmbostock
69% match
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
68% match
Loading thumbnail…

Pale Dawn

This example displays a tiled map of the world using the Polymaps library, with a calm “Pale Dawn” tileset from CloudMade that provides a subdued background for overlaying data points. The map renders spherical mercator tiles from OpenStreetMap data through an `org.polymaps` map instance, adding standard interaction controls via `po.interact()` and a compass. The visualization uses a single `po.image()` layer with a URL template for fetching 256x256 PNG tiles, and includes attribution to CloudMade and OpenStreetMap contributors under a CCBYSA license.

Mmbostock
65% match
Loading thumbnail…

Cellular automata

A one-dimensional cellular automaton stands at the center of this visualization, which arranges all 256 possible nearest-neighbor rules in a grid. The display uses a tile-based procedural map via Polymaps, with a worker script (`cell-worker.js`) computing each rule’s evolution from a random initial state. Color intensity indicates cell state, and zooming reveals the structure of individual rules. The rendering leverages Polymaps’ `po.map`, `po.procedural`, and `po.hash` APIs, while the worker handles the pixel-level computation and postMessage communication, following the example from MathWorld.

Mmbostock
62% match
Loading thumbnail…

Hilbert Tiles

This example uses a Hilbert curve to lay out a grid of colored tiles, demonstrating how a space-filling curve preserves spatial locality compared to a sequential layout. The map, built with Polymaps, renders rainbow-colored tiles whose hue is derived from the Hilbert index of each tile’s position, so adjacent tiles always display adjacent colors in the spectrum, even as the user zooms and pans. The code defines a custom Hilbert function, applies it in a Polymaps layer to generate SVG rectangles, and computes their fill colors with a custom HSL-to-RGB conversion.

Mmbostock
61% match
Loading thumbnail…

Polymaps + D3

This example combines Polymaps and D3 to render an interactive map with a custom data layer. The map displays image tiles from CloudMade as a base layer, and overlays circles representing weather station locations from a local `stations.json` file. Each station is positioned using geographic coordinates projected through a `locationPoint` function within the Polymaps layer, with circle and text elements added via D3's selection API. The map includes interactive pan and zoom controls and a compass overlay.

Mmbostock
61% match
Loading thumbnail…

Heatmap

This heatmap blends a base map with three point locations that are transformed into radial gradients, showing how they are highlighted on a map. The visualization combines a CloudMade tile layer and OpenStreetMap data, with the points loaded as GeoJSON features. The map uses the Polymaps library, and its `load` callback dynamically adjusts each point’s radius based on the current zoom level while assigning a green gradient fill with fading opacity.

Mmbostock
61% match
Loading thumbnail…

Minecraft Overviewer

This example displays a zoomable, pannable map of a Minecraft world rendered as square image tiles, generated from sample Overviewer output. The visualization uses Polymaps to handle map interactions, zooming, and tile loading, with a custom `minecraft` function that computes tile URLs based on the current zoom level and coordinates. It supports five zoom levels and centers initially on a latitude of -45 degrees, showing how a game world can be explored through a standard slippy-map interface.

Mmbostock
60% match